Website Information
💡 Add as much detail as you want. This will be included in the generated prompt.
00
Project Details
Enter your website information, branding, and contact details
01
Choose Your Stack
Select the framework and styling solution for your project
Platform / Framework
Styling Solution
JavaScript Libraries (UI & Effects)
Select animation, slider, grid, and scroll libraries for enhanced interactivity
CSS Libraries & Animation Frameworks
Choose CSS frameworks, animation libraries, loaders, and utility systems
02
Define the Vibe
Choose a visual aesthetic and fine-tune the design feel
Visual Aesthetic
Style Preset
Vibe Statement
Examples:
Live Preview — The Vibe Check
Card Preview
See your design choices in real-time
03
Color Palette
Choose a pre-built palette or create your own custom colors
Pre-built Palettes
Generate Random Palette
Custom Palette Builder
04
Structure Your Layout
Define the page structure, framing, and layout configuration
Page Template Type
Page Layout
Layout Type
Layout Configuration
Framing Style
Visual Hierarchy Pattern
05
Page Sections
Select which sections to include in your page
Sections Checklist Drag to reorder
5B
Inner Pages
Enable multi-page structure and select which pages to include
Enable Inner Pages
When enabled, generates a multi-page structure with routing
5C
Popups & Modals
Configure popup types, triggers, and purposes
Enable Popups
Include popup/modal functionality in your project
06
Add Features
Select the libraries and integrations for your project
07
Configure Content & Copy
Define the tone, voice, and messaging style
Tone of Voice
Brand Voice
Reading Level
Content Length
CTA Style
08
Conversion & Social Proof
Configure trust signals, lead magnets, and conversion elements
Social Proof Types
Lead Magnets
Urgency/Scarcity Patterns
Property Schema (Real Estate)
09
Target Audience & Output
Define who you're building for and where the output goes
Audience Type
Industry
User Awareness Level
Geography
Output Type
Target Tool
Code Preference
10
Performance & SEO
Configure responsive behavior, performance targets, and SEO
Responsive Strategy
Performance Features
Image Handling
SEO Features
Structured Data (Schema)
11
Accessibility & Compliance
Configure WCAG compliance, accessibility features, and legal requirements
WCAG Compliance Level
Accessibility Features
Compliance Requirements
12
Analytics & Experimentation
Configure tracking, analytics tools, and A/B testing
Analytics Tools
Event Tracking
A/B Testing Elements
13
Trust & Legal
Configure legal pages, contact options, and consent requirements
Legal Pages
Contact Options
Consent Requirements
14
Design System Controls
Fine-tune typography, spacing, and component styles
Color Mode
Typography Style
Google Fonts Selection
Heading Preview
Body text preview - The quick brown fox jumps over the lazy dog.
const code = "preview";
Accent Preview
Quick Pairings:
Spacing Density
Border Radius
Shadow Level
Button Styles
Form Types
Menu Style
Card Types
0
selections