Interactive HTML/CSS/JS mockups for a vibe-coding companion tool.
A clickable prototype for a product that guides non-technical people through building real, production-grade software using AI coding tools (Claude Code, Cursor, Windsurf, etc.).
The product doesn't do the coding. It sits alongside whatever coding tool the user has and walks them through the entire process — from idea to deployed product — in plain English, generating expert-level prompts so the user never has to write one themselves.
/
├── index.html Landing page
├── onboarding/
│ ├── welcome.html Step 1: Name input
│ ├── experience.html Step 2: Experience level selector
│ └── tool-select.html Step 3: Coding tool selection
├── app/
│ ├── dashboard.html Project dashboard
│ ├── discovery.html New project — discovery chat
│ ├── plan-review.html Plan review before building
│ ├── build.html Active build step screen
│ └── error-help.html Error diagnosis and fix screen
├── css/styles.css Shared design system
├── js/main.js ELI5 tooltips, page transitions, shared utilities
└── assets/ Images and icons
Open index.html in a browser. All screens are linked together for click-through flow.
Warm editorial design system — Playfair Display headlines, Inter body, prestige green accents on a warm cream background. Inspired by happycapy, Figr, and Linear.