Skip to main content

Vibe Coding Process

Building a complex prototype like this involves more than just manual typing; it requires a fluid, interactive collaboration between humans and AI. We adopted a “Vibe Coding” approach—an intuitive, iterative human-AI collaboration workflow that accelerates development from ideation to execution.

Ideation & Refinement
Architecture & Tech Stack
Agile Task Planning
Vibe Coding & Skill Abstraction
Step 1

Ideation & Refinement

We started with a high-level design concept and consulted our AI Agent. The agent helped us brainstorm, patch logical gaps, and clarify ambiguous requirements into actionable goals.

#Brainstorming#Requirement Clarification#Agent Collaboration
Step 2

Architecture & Tech Stack

Based on the refined requirements, we negotiated the optimal system architecture and selected a modern technology stack capable of supporting our features robustly.

#System Design#Tech Stack Selection#Feasibility Check
Step 3

Agile Task Planning

We broke the project down into a comprehensive checklist. We mapped out Product Backlog Items (PBIs) and divided them into fine-grained, independently verifiable tasks. We execute and verify these strictly one task at a time.

#PBIs#Micro-tasks#Step-by-step Verification
Step 4

Vibe Coding & Skill Abstraction

During implementation, we maintain a tight feedback loop. Whenever we encounter repetitive logic or specific coding patterns, we extract them into a dedicated `skills` folder. This empowers the agent with domain-specific knowledge for future tasks.

#Prompt Engineering#Custom Skills#Iterative Execution

Our Workflow Principles​

To maximize efficiency and minimize hallucinations, we adhered to the following strict process:

  1. Idea Validation & Brainstorming
    Before writing any code, we feed our rough ideas and structural concepts into the AI agent. The agent acts as a sounding board, helping us identify logical gaps, resolve edge cases, and define ambiguous requirements. This turns "vibes" into solid specifications.

  2. Architectural Alignment
    Once requirements are clear, we use the agent to analyze the best possible architecture and tech stack tailored to those specific needs (e.g., choosing Next.js for better routing and performance).

  3. Granular Task breakdown (PBI & Tasks)
    We generate a master checklist consisting of High-Level Product Backlog Items (PBIs). Each PBI is then fractured into extremely small, independently verifiable tasks. We enforce a rule of tackling only one task at a time, constantly verifying the output to avoid compounding errors.

  4. Continuous Learning via "Skills"
    During implementation, there is often repetitive logic, repeated command sequences, or domain-specific architectural rules. Instead of repeatedly prompting the agent, we abstract these into .md files inside a skills folder. The agent then reads these specialized instructions, permanently upgrading its context awareness for our specific repository.

AI Log​

1. Global Standard: Code Evolution Slider​

Design Core: Demonstrates how we transformed AI's initial output from "one-off toys" to a "maintainable system" using our No Hard-coding Policy.

Refined Standard
<InteractiveCard className="checkin-container">
  <span className="status-text">
    <MapPin /> Checking in...
  </span>
</InteractiveCard>

/* In CSS:
.checkin-container {
  display: flex;
  background-color: var(--color-primary);
  border-radius: var(--radius-card);
  padding: 20px;
}
*/
Initial Vibe (AI Output)
<div className="flex bg-[#281559] rounded-[16px] p-[20px]">
  <span className="text-white text-[14px]">
    Checking in...
  </span>
</div>
<>

2. Practice: P-O-A Interactive Logs​

Case A: Responsive Layout & Navigation Strategy (3/28)​

View P-O-A Details
  • P (Prompt): "Build a responsive base layout (MainLayout). Use a sticky Bottom Navigation bar for Mobile and a Top Navigation bar for Desktop/Tablet. Active tab should use --color-primary."
  • O (Outcome): AI mixed desktop and mobile navigation logic into a single monolithic component, causing layout flickering during window resizing and incorrect active state synchronization.
  • A (Action): [Physical Isolation] Refactored the layout into separate MobileNav and DesktopNav components. Used Tailwind sm:hidden and hidden sm:flex for strict physical isolation, ensuring zero CSS interference between device modes.

Case B: Scalable Map & GPS Simulation (3/30)​

View P-O-A Details
  • P (Prompt): "Implement a responsive map container supporting pan and zoom. Add a navigation pointer with a breathing light pulse. Place a blue dot at exactly 23% Left, 25% Top."
  • O (Outcome): The blue dot offset incorrectly when zooming because the AI calculated its position relative to the viewport instead of the map's coordinate system.
  • A (Action): [Coordinate Transformation] Modified the CSS DOM structure to place the blue dot inside a dedicated "Marker Container" that shares the exact same transform-origin as the map image, anchoring the point regardless of scale level.

Case C: NFC/URL Trigger Logic & Persistence (3/31)​

View P-O-A Details
  • P (Prompt): "Refactor the check-in flow to trigger via URL parameters (?checkin=xxx). Validate IDs, save to localStorage, and ensure the modal displays correct location data."
  • O (Outcome): AI provided a basic useEffect listener, but failed to clean the URL. This caused the "Success Modal" to pop up repeatedly every time the user refreshed the page.
  • A (Action): [Logic Correction] Integrated window.history.replaceState to clear URL parameters immediately after a successful check-in. Adhered to human-centered computing principles by ensuring "single-trigger" feedback.

Case D: 3D Mascot Dynamic Loading System (3/31)​

View P-O-A Details
  • P (Prompt): "Extract logic to dynamically generate 'success checkin' text. For 3D models, use id-model.glb format from assets. Fallback to default-model.glb."
  • O (Outcome): The AI generated a massive, hard-coded if-else tree to match IDs to files. This was unmaintainable and would break as soon as more locations were added.
  • A (Action): [Architecture Refactoring] Discarded the hard-coded logic. Designed a dynamic path mapping scheme (${id}-model.glb) and established a location.ts configuration dictionary as a single source of truth.

Case E: AR Interaction & MapPin States (3/31)​

View P-O-A Details
  • P (Prompt): "Design ARContainer, MapPin (Locked/Available/Captured states), and CaptureShutter. Break down into small reusable components with TS."
  • O (Outcome): AI used hard-coded hex colors and inconsistent padding, ignoring the previously established design system variables.
  • A (Action): [Design System Enforcement] Replaced all inline styles with CSS variables (var(--color-primary), var(--color-accent)). Abstracted the state logic into a PinState type to ensure type safety across the AR scene.

3. Additional Modular Logs (Collapsed)​

View Full History
  • [3/30] Collection Components:
    • O: Progress bar width transition was jerky.
    • A: Added transition: width 0.5s ease-in-out and synchronized with state-batching.
  • [4/01] Polaroid Wall (Memory Page):
    • O: Masonry layout collapsed when images were loading.
    • A: Introduced aspect-ratio placeholders to reserve vertical space before image bytes arrived.
  • [4/05] Discovery Accordion Clues:
    • O: Unlocked items didn't auto-expand, requiring redundant clicks.
    • A: Implemented "Linked Expansion" logic where Panel 2 auto-expands upon Panel 1 completion.
  • [4/05] Echo Drawer (Location Messaging):
    • O: Map pins became unresponsive while the drawer was open.
    • A: Adjusted z-index layering and added a partial backdrop filter to maintain map interactivity.
  • [Profile] Stats Dashboard:
    • O: Stats used emojis which looked unprofessional.
    • A: Replaced with Lucide-React SVG icons and added a "Purple Glow" status indicator for the user avatar.
  • [Fitting Room] 3D Wardrobe Stage:
    • O: Coin balance didn't update visually during purchases.
    • A: Added a Framer Motion count-up animation and a "Pill" bounce effect on balance changes.