Building a Complete Vue Frontend Website in One Day with AI Assistants

🚀 Core Idea of AI Coding

During this immersive AI‑coding session we primarily used Trae as the AI programming assistant, combined with Claude 3.5 Sonnet and GPT‑4o for code generation and optimization. The overall workflow is as follows:

Let AI be creative : give the model a high‑level requirement and let it produce a complete functional prototype.

Iterative refinement : modify only one small aspect at a time (e.g., colour, layout, or a single feature) instead of issuing a complex request.

Check and fix : AI‑generated code often contains minor bugs; manually review and correct them.

Multimodal interaction : use screenshots with annotations so the AI can edit visual issues directly rather than relying solely on text.

Switch AI tools flexibly : Claude 3.5 Sonnet tends to be more stable for code generation, while GPT‑4o can offer alternative implementations.

💡 Best Practices for AI‑Assisted Development

The following observations dramatically improve development efficiency:

1. AI excels at frontend generation

For HTML/CSS/JavaScript, especially frameworks like React and Vue, AI produces high‑quality code that feels smoother than many traditional approaches.

2. When stuck in a loop, change the approach

Ask a different AI to reinterpret the problem.

Search the web for a correct solution, then feed that information back to the AI.

Prompt the AI with “Is there another way? Think again.” to break its fixed‑thinking.

3. Abstract expressions vs. precise commands

Directly requesting a specific code change can be fragile. For example:

❌ Exact request : “Please set the div padding to 20px .” – often leads to sub‑optimal results.

✔️ Abstract request : “The current layout is unreasonable; please redesign it for better usability.” – yields more coherent suggestions.

4. Leverage multimodal capabilities

Attach a screenshot with red‑box annotations to let the AI modify the exact region.

Visual feedback reduces communication overhead compared with plain text descriptions.

5. Direct file‑level modifications

Specify the target file path when the AI needs to edit code spread across multiple files, avoiding accidental edits of similar files.

⚠️ Pitfalls Encountered

“Writing changes to the current file” is extremely slow The AI may generate code quickly but the write‑back process stalls, sometimes showing network errors. Workaround: copy the AI output manually into the file or ask the model to output the full file content.

Generated code is not always correct About 80 % of the output works, but minor syntax errors (missing commas, ordering issues) are common. Solution: thorough testing and debugging; never rely 100 % on the AI.

Inconsistent code style Variable names and formatting may differ between snippets. Define a style guide beforehand and ask the AI to format accordingly, or run a formatter after generation.

AI can break previously working modules Uncontrolled overwrites may introduce logical errors. Use Git for version control: commit a stable baseline before each AI‑driven change and revert if needed.

Below are screenshots and logs captured during the coding session, illustrating password‑generation, QR‑code creation, and mobile‑responsive adjustments.

Examples of Specific Features

Password generator implementation – screenshots show the AI‑produced UI and logic.

QR‑code feature – the AI added the functionality but initially broke other parts, requiring manual fixes.

Mobile adaptation – the AI adjusted layout for responsiveness, though some pages still needed manual tweaks.

Overall, the experiment demonstrates that AI can dramatically accelerate frontend development when used with disciplined prompting, iterative refinement, and solid version‑control practices.