VibeCoding Practice 1: Creating a Resume Generator with ByteDance’s Trae IDE

VibeCoding, described as "immersive coding," emphasizes stating desired outcomes and letting AI handle implementation details. The author introduces the VibeCoding workflow, highlighting its high efficiency, low entry barrier, and deep immersion.

Step 1 – Prompt preparation : The author creates a comprehensive prompt that defines the role, core constraints (absolute content preservation, layout, size, module limits), content generation instructions for personal introduction, professional skills, work experience, and project experience, as well as design and implementation specifications such as visual style, precise typography, spacing, layout optimization, PDF export, printing style, and micro‑interactions. The prompt is written in English as follows:

#### Role Definition
You are a professional web resume designer, proficient in HTML/CSS/JavaScript development, capable of creating a two‑page resume web page that fully conforms to A4 paper size and precise content for a senior Java developer.

#### Core Constraints
1. **Absolute Constraint**: Must keep the original content unchanged, only style and layout may be optimized.
2. **Layout Constraint**: Strictly follow a vertical Word‑document style, no side‑by‑side columns, ensuring content fits exactly within two A4 pages.
3. **Size Constraint**: A4 dimensions (210mm × 297mm); all content must be within the visible area.
4. **Module Constraint**: Include only four core modules, no extra content.

#### Content Generation Instructions
**Personal Introduction**: Use the user‑provided text, limited to 100‑150 characters.
**Professional Skills**: Generate 10 skill descriptions based on user input, format:
- Technology stack: aligned with the latest 2025 Java development requirements.
- Each line plain text, no special styling.
- Include depth, application scenario, and solution for each skill.
**Work Experience**: Strictly follow user‑provided information, include:
- Company name
- Tenure
- List in reverse chronological order
**Project Experience**: For each project include:
1. Project name and timeline (use user data)
2. Project description (50‑80 characters, use user data)
3. Tech stack (5‑7 key technologies, use user data)
4. Work content: Follow the STAR principle, generate five distinct paragraphs:
   - S (Situation): [background]
   - T (Task): [responsibility]
   - A (Action): [specific action]
   - R (Result): [quantified outcome]

#### Design Execution Specification
**Visual Style**:
- Use a professional, clean black‑and‑white color scheme.
- Bold headings where appropriate.
- Maintain a visual style suitable for a technical position.
**Precise Typography**:
- Base font: 10.5pt
- Heading 1: 18pt
- Heading 2: 12pt
- Contact info: 9pt
- Skill list: 10pt
**Spacing Control**:
- Line height: 1.2‑1.4 (adjust based on density)
- Module margin: 8mm
- Project inner padding: 5mm
- List item spacing: 2‑3mm
**Layout Optimization**:
- Header padding: 10px
- Contact info spacing: 5px
- Project tags: 12px
- Page break precisely at the end of page one.
**Function Implementation**:
1. Include PDF export using html2canvas and jsPDF.
2. Add print‑style optimization to match screen rendering.
3. Add subtle micro‑interactions (hover effects, transition animations).
4. Ensure responsive design remains stable across screen sizes.

#### Output Requirements
1. **Code Structure**:
- Provide complete HTML with inline CSS and JavaScript.
- Clear, modular organization.
- Detailed comments explaining key design decisions.
2. **Feature Verification**:
- All functions work, especially PDF export.
- Two‑page layout precision confirmed.
- Print styles applied correctly.
3. **Compatibility**:
- Works in mainstream browsers.
- Printing does not break layout.

#### Final Validation Checklist
- [ ] All original content retained.
- [ ] Layout strictly within two A4 pages.
- [ ] Font sizes and spacing meet exact specifications.
- [ ] PDF export functional.
- [ ] Print output matches screen view.
- [ ] Code is clear and maintainable.

Step 2 – Using Trae IDE : The author opens ByteDance’s free AI‑coding IDE Trae, adds an AI agent, and feeds the prepared prompt. Screenshots show the initial AI‑generated page, followed by successive refinement cycles where the author adjusts prompts (e.g., changing colors, adding dynamic skill generation, supporting work experience, and project editing).

Each iteration is documented with screenshots illustrating the AI’s response, the updated UI, and the final rendering. After several rounds, the resume generator supports theme color selection, professional skill configuration, work experience and project sections, PDF export, and responsive layout. The final codebase totals 1,723 lines.

Observations and Tips : The author notes that AI‑generated pages often pull external Font Awesome assets, which can slow loading; they replace these with locally stored assets or emojis. The article concludes with practical advice for VibeCoding: focus on one problem per interaction, revert quickly if the model deviates, specify exact file or code locations when requesting changes, and provide complete error messages for debugging.

References include links to VibeCoding documentation, AI knowledge bases, and related AI‑assisted development resources.