Frontend design

What this layer solves

You don’t need to be a designer or use Figma to ship something that looks good. The gap between “ugly prototype” and “professional-looking app” is mostly knowing the patterns and having a system. AI-native tools are moving design from prototyping into direct implementation.

The shift: design is moving into code

Traditional workflow: Figma mockup → handoff → developer builds it. This works for big teams but adds friction and lag.

Modern reality for solo builders and small teams: describe what you want → AI builds the real UI → iterate on the actual app. Prototyping in a design tool is optional when you can get a working version faster by going straight to code with good instructions.

This doesn’t mean design skills are irrelevant — it means the skills that matter are taste, layout sense, and knowing what good looks like, not pixel-pushing in a specific tool.

The design.md approach

Instead of a Figma file, create a design.md (or DESIGN.md) in your repo that tells both you and your AI assistant what the app should look and feel like:


# Design system
 
## Brand
- Primary color: #2563eb (blue)
- Neutral: slate scale
- Radius: 8px (cards), 6px (buttons)
- Font: Inter (headings), system-ui (body)
 
## Layout
- Max content width: 1200px, centered
- Sidebar: 240px fixed on desktop, drawer on mobile
- Standard spacing: 4/8/16/24/32px scale
 
## Components
- Buttons: filled primary, outline secondary, ghost for tertiary
- Cards: subtle border, slight shadow on hover
- Forms: label above input, inline validation
 
## Tone
- Clean, minimal, professional
- No gradients except on CTAs
- Dark mode: true blacks (#0a0a0a) not gray

This becomes a contract that keeps AI-generated UI consistent across pages.

Tools that help

Tool	What it does	Cost
Google Stitch	AI-powered UI design tool — describe a screen and get a working prototype	Free
v0.dev	Vercel’s AI UI generator — produces React + Tailwind components from prompts	Free tier
Variant.com	Browse design variations and get ideas for layouts and components	Free
shadcn/ui	Copy-paste React components — not a dependency, you own the code	Free
Tailwind UI	Premium Tailwind component library (paid, but excellent reference for free browsing)	Paid

Principles for non-designers

Steal structure, not pixels — Look at apps you admire. Note their spacing, how many colors they use, where they put CTAs. Copy the structure, not the exact design.
Limit your palette — One primary color, one neutral scale, one accent. That’s it. More colors = more chances to look amateur.
Spacing is the cheat code — Consistent padding and margins make almost anything look professional. Use a spacing scale (4, 8, 16, 24, 32, 48px) and stick to it.
Typography hierarchy — Three levels max: heading, subheading, body. Make the heading obviously bigger. Use weight (bold vs regular) more than size changes.
White space is not wasted space — Cramped layouts look cheap. Give elements room to breathe.
Mobile first — Start with the mobile layout, then expand. It forces you to prioritize what matters.

Getting inspiration without Figma

Browse Dribbble for visual direction (search your app type)
Check Mobbin for real app screenshots organized by pattern
Use v0.dev to generate starting points from a description
Look at shadcn/ui examples for component patterns

Styling — Tailwind CSS setup and utility-first approach
Planning & specification — where design decisions start
Stacks & boilerplates — pre-configured starting points with styling included

Last reviewed: April 2026.