Vibes.design
Show HN: Vibes.design – Launch AI Apps with Vibe-Coding
Last verified:
What is Vibes.design?
Vibes.design is an AI-powered design spec generator that creates pixel-perfect design specifications for AI coding tools like Bolt, Cursor, and Lovable. Instead of writing vague prompts that produce generic results, users pick from 10 page types and 18 research-backed design styles, customize colors, fonts, and layouts, then generate a complete design spec with 200+ lines of precise details including CSS tokens, component rules, spacing, hover states, and accessibility information.
The tool offers 49 billion+ unique design combinations through its selection of 10 page types (Landing Page, SaaS, E-commerce, Blog, Portfolio, Dashboard, Agency, Restaurant, Corporate, Startup) and 18 design styles (Minimal, Dark Aurora, Neobrutalism, Glassmorphism, Luxury, Corporate, Playful, Terminal, Editorial, Brutalism, Liquid Glass, Neumorphism, Organic, Cyberpunk, Retro Y2K, Maximalism, Flat Design, Material Design). It includes 126 WCAG contrast-validated color palettes with 7 palettes per style, plus a custom palette builder.
VibeDesigner is designed for developers using vibe coding workflows, indie hackers building MVPs, SaaS founders creating landing pages, and anyone using AI coding tools who wants professional results without Figma or design skills. The tool provides live React preview as you customize, and Pro features include AI Preview with Claude to see pixel-accurate site generation before building.
Output formats include free AI Prompt (paste directly into Bolt/Cursor/Lovable), and Pro features like VD.md design specification files that drop into project root for auto-detection, plus Claude Skill packages for single-command site generation.
Vibes.design pricing
Pricing model: Freemium
Free tier includes AI Prompt output format with complete design spec containing CSS tokens, component rules, and accessibility information that can be pasted into Bolt, Cursor, or Lovable. Pro tier includes VD.md design specification file export (drops into project root for AI auto-detection), AI Preview with Claude to see pixel-accurate site generation before building, and Claude Skill downloadable package for single-command site generation. Specific Pro pricing amounts not disclosed on the website.
Vibes.design pros
- Generates 200+ lines of precise design specs instead of vague prompts
- 49 billion+ unique design combinations from 10 page types × 18 styles
- 126 WCAG contrast-validated color palettes included
- Live React preview updates in real-time as you customize
- No Figma or design skills required
- Complete CSS custom properties for colors, typography, spacing, radius, shadows, motion
- Fluid typography with clamp() for responsive design
- 4px base grid spacing system for consistency
- Hover states and interactions explicitly defined
- Responsive breakpoints included in all specs
- 18 research-backed design styles mapped to specific industries
- AI Preview (Pro) shows pixel-accurate Claude-generated site before building
- VD.md (Pro) auto-detects in AI coding tools when dropped in project root
- Custom palette builder for brand-specific colors
- Under 60 seconds from design to production prompt
- 9 scroll animations and effects included
- Custom radius, shadow depth, button style, and hover effect controls
Vibes.design cons
- VD.md export requires Pro subscription
- Claude Skill output requires Pro subscription
- AI Preview feature requires Pro subscription
- Mobile app design support coming soon (not yet available)
- Only works with Bolt, Cursor, and Lovable AI coding tools
- Limited to 10 page types (no custom page structures)
- 18 design styles may not cover niche aesthetic preferences
- No native Figma integration
Frequently asked questions about Vibes.design
What is Vibe Coding Design?
Vibe coding changed how we build websites but not how we design them. AI coding tools like Cursor, Bolt, and Lovable are powerful builders but can't read your mind. Without a design spec, you get generic output that looks like every other AI-built site. VibeDesigner bridges this gap: you define the design—colors, typography, spacing, components, interactions—and AI builds it perfectly. No Figma, no design skills, just professional results from your first prompt.
Why do vague prompts get vague results?
AI coding tools are powerful but can't read your mind. Without precise design specs, you get generic output and endless revision cycles. Prompts like 'Build me a modern SaaS landing page' produce generic layout, wrong colors, inconsistent spacing. 'Make it look like Linear but with blue accents' gets interpreted differently every time. VibeDesigner generates 200+ lines of precise specs with colors, spacing, components, hover states, and accessibility so AI builds exactly what you envisioned first try.
What page types are available?
There are 10 page types with pixel-accurate specs: Landing Page (SaaS, products), SaaS (software platforms), E-commerce (online stores), Blog (content, media), Portfolio (personal, freelance), Dashboard (admin, analytics), Agency (studios, services), Restaurant (food, hospitality), Corporate (enterprise, finance), and Startup (MVPs, launches). Each page type has its own section structure, component rules, and layout patterns tailored for its industry.
What design styles can I choose from?
There are 18 research-backed design styles: Minimal (Stripe, Linear, Vercel), Neubrutalism (Web3, indie brands), Dark Aurora (AI, developer tools), Glassmorphism (Apple, finance apps), Corporate (enterprise, banking), Luxury (fashion, jewelry), Playful (EdTech, food delivery), Terminal (DevOps, CLI tools), Editorial (news, publishing), Brutalism (art, culture), Liquid Glass (iOS apps, premium SaaS), Neumorphism (dashboards, settings), Organic (health, wellness), Cyberpunk (gaming, crypto), Retro Y2K (music, GenZ brands), Maximalism (fashion, art), Flat Design (mobile apps, Google), and Material Design (Android, enterprise). Each maps to specific industries.
What output formats are available?
There are 3 output formats. Free: AI Prompt with complete design spec containing CSS tokens, component rules, and accessibility—paste directly into Bolt, Cursor, or Lovable. Pro: VD.md design specification file that drops into your project root where AI coding tools auto-detect and follow it. Pro: Claude Skill downloadable package for Claude Code that runs a single command to generate matching sites.
What design tokens are included?
Complete Design Tokens include colors, typography, spacing, radius, shadows, and motion—all as CSS custom properties so your AI tool gets exact values not guesses. Features include WCAG contrast-validated colors, fluid typography with clamp(), 4px base grid spacing system, and custom palette with 7 token colors.
How many color palettes are available?
There are 126 curated color palettes with 7 palettes per style, all WCAG contrast validated. Examples include Notion Warm, Cosmic Purple, Yellow Pop, Blue Frost, Black & Gold, and Earth Tones. You can also create your own with the custom palette builder.
What does the Pro tier include?
Pro tier includes VD.md design specification file export that drops into your project root for AI coding tool auto-detection, AI Preview with Claude that generates a pixel-accurate site so you see exactly what you'll get before building, and Claude Skill downloadable package for single-command site generation in Claude Code.
Do I need Figma or design skills?
No. VibeDesigner requires no Figma and no design skills. You choose from 10 page types, 18 design styles, custom colors, fonts, radius, shadows, and animations. Smart defaults recommend the best options for your page. The tool generates everything AI needs to build it right, giving you professional results without any design background.
How fast can I go from design to production?
Less than 60 seconds to production. You choose your page type, style, colors, and layout, see live React preview as you customize, then copy the AI Prompt and paste it into Bolt, Cursor, or Lovable. The complete design spec with 200+ lines of precise details lets AI build exactly what you envisioned on the first try.