I've tried everything. Bolt, v0, Lovable, Webflow, Framer. Same wall every time — fast at first, then you need one specific thing and you're fighting the tool for hours.
What actually works for me:
Start in Figma. High fidelity, full layout. I use open source component libraries — shadcn, Preline, Relume — so I'm not building from scratch. Can get through a solid design in an hour.
For simple sites: Figma to Cursor plugin, export the JSON, give it to Cursor with screenshots if the design is complex. Ask it to build from the spec. Small CSS adjustments after.
For complex projects: Claude Code. It reads your entire codebase, understands context, writes changes that actually fit. Not autocomplete — more like a senior engineer who knows the whole project. Add a CLAUDE.md file with basic instructions upfront. It changes the output quality significantly. Tried Gemini CLI — not worth it for serious work. Codex is okay as a fallback when Claude limits hit.
GitHub → Vercel. Every time.
One thing I'll be honest about: it's not actually an hour if you're building something end-to-end with real polish and integrations. You spend time figuring out what to build, forming a taste on how it should feel, then finding the right references to feed Claude — because generic explanations give you generic output. The specificity of your input directly determines the specificity of the result.
The design starts in Figma. The thinking starts before that.
Tooling cost: Figma free, Cursor $20/month, GitHub free, Vercel free.
Tools referenced
- Figma — figma.com. Starting point for design. Free plan works for most solo projects.
- shadcn/ui — ui.shadcn.com. Open source, copy-paste component library for React. Best Figma-to-code component system I've found.
- Preline UI — preline.co. Tailwind-based component library. Good for layout patterns.
- Relume — relume.io. Component library built for marketing sites. Fast for landing pages.
- Cursor — cursor.com. AI-native code editor. $20/month. The Figma-to-Cursor plugin workflow is described in this note.
- Claude Code — Anthropic's CLI for coding with Claude. Better than Cursor for complex, whole-codebase tasks. claude.ai/code
- Vercel — vercel.com. Free tier handles most personal and small-scale projects. GitHub-connected deploys.
- Bolt — bolt.new. Good for quick prototypes; hits a wall fast on complex projects.
- v0 — v0.dev. Vercel's AI component generator. Useful for generating initial component code quickly.