Background: Repetitive Labor Drives the Need for Automation
Creating the venue layout for the annual campus job fair is a tedious and highly repetitive task. The traditional method relies heavily on spreadsheet software (like Excel), where staff must manually categorize companies, number booths, assign layouts, and constantly adjust cell formats to simulate a layout map. This process is not only time-consuming but also lacks reusability due to annual changes in company lists and venue layouts, forcing a restart from scratch each year. Faced with this long-standing pain point, an individual with no front-end development experience came up with the idea of using artificial intelligence to develop a dedicated tool for automation.
Development in Practice: Agile Iteration with Codex
The tool’s development did not follow a traditional software development life cycle. Instead, it adopted an AI-assisted agile iteration model, the core of which was to continuously and clearly describe requirements to the AI.
Prototyping: From Zero to One in 30 Minutes
The developer first chose OpenAI’s Codex model. By providing Codex with a historical Excel list of companies and a screenshot of the final layout map, and issuing the command “replicate the distribution map 1:1 using HTML,” a single-file HTML prototype was generated in about 30 minutes. Although the initial version had basic functionality and the booth cards were not interactive, it successfully structured the data and visualized it, validating the AI’s ability to understand and convert complex layouts. This achieved the first step of “making it work.”
Feature Iteration: From Static Display to Interactive Tool
Building on the prototype, the developer used natural language commands to gradually add several core features to the tool:
- Snap Alignment: To address the pain point of manual alignment, a snap-to-grid feature was added for dragging. The AI automatically implemented snapping logic based on a 20px grid and an 18px alignment threshold, allowing booth cards to automatically align with grid lines, adjacent booths, and area placement points.
- One-Click Smart Placement: Users can simply select an area, set layout parameters (like the number of columns and spacing), and paste a list of company IDs. The tool then automatically generates and arranges all the booth cards neatly.
- Automated Categorization and Assignment: The tool can parse a list containing three columns of information—“Booth Number, Company Name, Category”—and automatically assign different companies to designated areas based on preset rules (e.g., “Production & Technology types go to Area A”).
- Data Persistence and Export: The functionality was implemented to save the current layout state to the browser’s local storage, making it easy to continue editing when reopening. It also supports exporting the final layout as a PNG or PDF, or directly downloading the complete HTML file with the current editing state.
- Conflict Detection: To prevent human error, a conflict detection mechanism was added later. The system now provides an alert if there are duplicate booth numbers, overlapping positions, or placements outside the designated zone.
Throughout the entire process, the developer did not directly write complex code such as SVG affine transformations, collision detection algorithms, or native DOM manipulations (like createElementNS). All technical implementations were autonomously completed by Codex based on the described requirements.
Practical Reflections: Tool Selection and Process Management Are Crucial
The development process was not always smooth, and the experience gained from two key stages was particularly important.
The Choice of AI Model Determines Project Success
In the early stages, the developer attempted to use several large language models, including GLM 5.1, MiniMax 3, and Kimi 2.6, for the “image-to-HTML” conversion task. However, the code they generated had significant deviations in layout details, color accuracy, and positional correspondence, making it unusable. In contrast, Codex was able to generate an HTML structure that was almost identical to the original image in a single attempt, greatly improving development efficiency. This shows that in AI-assisted development, selecting a model optimized for specific tasks (like code generation and visual understanding) is a prerequisite for success.
Version Control is a Necessity for AI Collaboration
Due to the “black box” nature of AI-generated code, introducing new features can sometimes unexpectedly break existing ones. When adding the “Conflict Detection” feature, the developer found that it had caused the original “Snap Alignment” function to fail. Because a version control system was not used initially, rolling back the changes was extremely difficult. Learning from this, the developer started using Git to make commits (git commit) before every modification, even if it was just for a local repository. This habit proved to be an effective risk management strategy in subsequent development, allowing for a successful restoration to a stable version in just a few seconds when another feature conflict occurred. This illustrates that when collaborating with AI on programming, incorporating version control is a necessary measure to ensure project stability.
Conclusion: AI Empowers Individuals to Reshape Work Paradigms
The key takeaway from this case is that artificial intelligence is lowering the barrier to technological innovation, enabling individuals from non-technical backgrounds to become tool creators. The crucial skill is shifting from “how to implement” to “what is needed.” Users no longer need to master underlying technical details; as long as they can clearly define requirements and describe problems, they can leverage AI to turn their ideas into reality. This heralds the emergence of a new work paradigm: future workflows will no longer be static but can be continuously and personally reconstructed and optimized by everyone involved, using AI.
