TL;DR

Have you seen those viral SBTI Tests with highly relatable labels like "ATM-er" or "CTRL" flooding social media? As a developer or indie hacker, you might wonder: How long would it take to build something like this? What used to take a week of full-stack development can now be compressed into half a day using Vibe Coding and Spec Coding. This article provides a hardcore post-mortem on how we used AI coding agents (like Trae or Cursor) to build a high-aesthetic SBTI test platform from scratch.

Table of Contents

Key Takeaways

  • Paradigm Shift: Transitioning from "writing code" to "writing clear Prompts and Specs".
  • Architecture: Utilizing Next.js independent routing (/quiz/[slug]) paired with a robust i18n system.
  • Animation Optimization: Leveraging requestAnimationFrame to eliminate visual flickering during quiz transitions.
  • Bug Squashing: Bypassing html2canvas rendering bugs with rgba colors and CSS shadows.

🔧 Experience the Result: You can check out the final product we built with AI by visiting the SBTI Online Test.

Vibe Coding vs Spec Coding

Before diving in, let's clarify the two main paradigms of AI-assisted development:

  1. Vibe Coding: Going with the flow. You tell the AI "what kind of page you want" in natural language, and tweak as you go. Perfect for rapid MVPs and visual inspiration.
  2. Spec Coding: An engineering mindset. You first have the AI produce a spec.md (Requirements), tasks.md (Task breakdown), and checklist.md. Once reviewed, the Agent executes the plan in batches. Perfect for complex state management and long-term projects.

For the SBTI test site, we used a hybrid approach: "Early-stage Spec Coding + Late-stage Vibe Coding for details."

Step 1: Requirements Breakdown & Spec Generation (1 Hour)

An SBTI test seems simple, but involves complex state flows: Home (Intro) → Quiz Flow → Calculation → Result Poster → Personality Gallery.

SBTI Personality: JOKE-R When generating the Spec, we first broke down the core visual elements (like the character card design of JOKE-R)

We started by entering Spec Mode in an AI IDE (like Trae or Cursor) with a high-level Prompt:

Example Prompt: "I want to build a 15-dimensional personality test site similar to SBTI. Stack: Next.js (Pages Router) + CSS Modules. Core requirements:

  1. Data: Read 30 questions and 15 personality mapping dimensions from a single quiz-definitions.ts.
  2. Routing: Independent /quiz/sbti structure, supporting SSR.
  3. UI: High-fidelity clone, responsive for mobile, must include frosted glass effects.
  4. Feature: Generate a 15-dimensional radar chart poster upon completion, supporting long-press to save. Please generate spec.md and tasks.md first."

The AI instantly maps out clean data structures and component hierarchies. Only when the Spec is rigorous (e.g., clarifying whether state lives in the parent or child component) will the subsequent execution avoid infinite loops of hallucinated bugs.

Step 2: Core Architecture & Component Generation (2 Hours)

After approving the Spec, we authorized the AI Agent to execute the tasks. This is where the AI's explosive productivity shines:

1. Dynamic Routing System

The AI automatically scaffolded /pages/quiz/[slug]/index.tsx and /pages/quiz/[slug]/result/[code].tsx. This decoupled architecture means the system can host not just SBTI, but MBTI, Enneagram, or any other quiz in the future with zero routing overhead.

2. State Machine Flow

The AI generated useState-based view switching logic, enabling seamless, SPA-like transitions between IntroView → QuizView → ResultView without page reloads, while maintaining the answer array context.

3. Multilingual i18n

By providing just a base Chinese JSON file, the AI Agent auto-translated the English JSON and injected the useTranslation('sbti-test') hooks across all React components perfectly.

Step 3: Polishing High-Fidelity UX (1.5 Hours)

The skeleton was up, but the devil is in the details. Here we switched back to Vibe Coding mode to tackle specific UI/UX bugs interactively:

Pain Point 1: Flickering Quiz Cards

When a user clicked an option, the transition to the next question had a brief, jarring flicker.

  • Vibe Prompt: "The current setTimeout animation feels flickering. Refactor it using pure CSS transitions."
  • AI Solution: The AI introduced a Double requestAnimationFrame (rAF) pattern. It sets the card opacity to 0, waits one frame, updates the question index, and restores opacity: 1 on the next frame. The result? Buttery smooth fade-ins.

Pain Point 2: Red Borders on Generated Posters

The result page uses html2canvas to capture the DOM into an image. However, the generated poster had weird red borders and broken layouts.

Generated Poster Example This is the perfectly rendered poster after fixing the canvas bugs
- **Vibe Prompt**: "`html2canvas` is rendering `box-shadow` incorrectly, and rgba backgrounds turn black." - **AI Solution**: The AI quickly identified this as a known limitation of `html2canvas`. It bulk-converted `rgba()` to equivalent Hex colors in the CSS, removed complex shadows from the screenshot target, and wrapped it in a fixed-width container. Problem solved.

Pain Point 3: WeChat Browser Download Blocking

  • Vibe Prompt: "Clicking 'Save Image' does nothing inside the WeChat in-app browser."
  • AI Solution: The AI added a navigator.userAgent sniffer. If it detects MicroMessenger, it hides the download button and displays a toast notification: "Please long-press the image to save."

Best Practices for Indie Hackers

  1. CSS Modules > Tailwind for Micro-adjustments: While Tailwind is fast, when you need the AI to make pixel-perfect UI tweaks (like removing negative margins that cause mobile whitespace), isolated CSS Modules drastically reduce style contamination.
  2. Single Source of Truth: Never let the AI hardcode quiz questions inside UI components. Force it to write a quiz-definitions.ts first, and have all components read from it.
  3. Commit Often: AI will break things. Whenever a major module (like quiz logic) works perfectly, commit it immediately. If the AI gets stuck in a bug-fixing loop, roll back and rewrite your prompt.

FAQ

Q1: Can Vibe Coding completely replace writing code?

Not yet. Vibe Coding is great for "velocity," but for complex animation timing (like rAF) or platform-specific edge cases (like WeChat browsers), you still need debugging intuition to guide the AI toward the right fix.

Q2: What kind of projects is Spec Coding best for?

It's ideal for projects with explicit data flows and multiple interconnected files (e.g., Web Apps with state management and user systems). If you're building a simple single-page calculator, pure Vibe Coding is usually enough.

Q3: Why use independent routing for quiz results?

For SEO and social virality. If you only have /quiz/sbti, anyone clicking a shared link just sees the homepage. By using /quiz/sbti/result/ATM-er coupled with Open Graph tags, you enable true virality: users click a link and immediately see their friend's specific personality result.

Summary

From requirement breakdown to final deployment, leveraging Spec Coding and Vibe Coding compressed what used to be days of full-stack, multilingual web development into a single afternoon.

In this era, pure coding execution is depreciating, while product definition and AI orchestration skills are skyrocketing. Master this new development paradigm, and you can operate as a one-person army.

👉 See the result of Vibe Coding: Take the SBTI Test