Vibe Code — Idea to Polished App

Overview

You describe an idea. We deliver a polished, deployed app. Three agents collaborate automatically:

• PM — breaks down requirements, reviews UX, enforces design system
• Builder (you, main agent) — writes code, deploys via SkillBoss
• QA — tests everything, finds bugs, checks performance

The Pipeline

When the user describes an app idea, execute these steps IN ORDER:

Step 1: PM Requirements

Message the PM agent to break down the idea:

sessions_send pm "New project request: [user's idea]. Break this down into user stories, core features (3-5 max for v1), acceptance criteria, and UX flow. Keep it tight — we're shipping fast."

Wait for PM's response. Share it with the user for quick approval. If user says "go" or "looks good", proceed.

Step 2: Build

As the Builder agent, write the full app:

MANDATORY defaults (do not ask the user):

• React + Vite + Tailwind CSS v4
• Hono backend on Cloudflare Workers (if needs server)
• claude-design-system colors/components (warm beige #FAF9F7, accent #A85D3A, rounded-2xl)
• @tailwindcss/vite plugin with @theme tokens
• SkillBoss for any AI API calls
• @hey-boss/users-service for auth (if needed)

Build order:

1. Scaffold project (npm create vite@latest)

2. Install deps (tailwindcss, @tailwindcss/vite, hono if needed)

3. Set up app.css with @theme design tokens

4. Build all components

5. Build backend routes (if needed)

6. Test locally

Step 3: Deploy Preview

Deploy to SkillBoss for a live preview URL:

npm run build
node ~/.openclaw/workspace/skills/skillboss/scripts/serve-build.js publish-worker . --name [app-name]

Capture the preview URL.

Step 4: QA Testing

Message the QA agent with the preview URL:

sessions_send qa "Test this app: [preview URL]. Run smoke test, functional test, responsive test. Take screenshots and report bugs."

Wait for QA's test report.

Step 5: PM Review

Message the PM agent with the preview URL and QA screenshots:

sessions_send pm "Review this app: [preview URL]. QA report: [summary]. Check UX, design system compliance, and overall polish. Give your verdict."

Wait for PM's review.

Step 6: Fix Loop

If PM or QA found issues:

1. Read their reports

2. Fix all P0 (blocker) and P1 (major) issues

3. Redeploy

4. If needed, run quick re-test via QA

Skip this step if both PM and QA say PASS/SHIP.

Step 7: Ship

Final deploy and summary to user:

Shipped: [App Name]
Live URL: [URL]
What was built:
Feature 1
Feature 2
Feature 3
Tech stack: React + Vite + Tailwind v4 + Hono + Cloudflare Workers
Quality checks passed:
PM review: [score]/10
QA: [PASS/PASS WITH ISSUES]
Responsive: [mobile + desktop]
Design system: [compliant]

Speed vs Quality

• Default: Run full pipeline (Steps 1-7)
• If user says "quick" or "fast": Skip Step 1 (PM requirements), go straight to build with your best judgment. Still do QA + PM review.
• If user says "just build it": Skip PM and QA entirely. Build and deploy. Mention that it wasn't reviewed.

Design System Enforcement

The claude-design-system skill is ALWAYS active. Every component must use:

• Warm cream background (#FAF9F7)
• Terracotta accent (#A85D3A)
• rounded-2xl cards, shadow-sm
• Tailwind v4 @theme tokens
• System font stack

If you catch yourself writing bg-white, bg-gray-, bg-blue-, sharp corners, or heavy shadows — STOP and fix it.

Project Structure

Every new app should follow this structure:

project-name/
├── src/
│   ├── index.tsx          # React entry
│   ├── App.tsx            # Main app component
│   ├── app.css            # @theme design tokens + Tailwind import
│   ├── components/        # Reusable components
│   └── pages/             # Page components (if multi-page)
├── src/server/
│   └── index.ts           # Hono backend (if needed)
├── index.html
├── vite.config.ts
├── package.json
├── tsconfig.json
└── wrangler.toml          # Cloudflare Workers config

When NOT to Use This Pipeline

• Bug fixes — just fix the bug, no pipeline needed
• Small tweaks — "change the button color" doesn't need PM + QA
• Research tasks — "what's the best auth library" isn't a build task

Skills Used

• claude-design-system — mandatory design tokens and component patterns
• skillboss — deployment and AI API gateway
• playwright-cli-2 — screenshots and browser testing (via QA)
• ui-audit — UX audit framework (via PM)
• web-design-guidelines — Vercel interface guidelines (via PM)
• test-master — test strategy (via QA)
• web-perf — performance testing (via QA)