Design Prompts
Discover curated AI design prompts for creating beautiful websites. Copy-paste ready style guides that help LLMs understand and recreate design patterns from leading brands.
What is Developer Website Design?
Web design prompts provide structured instructions for AI models to generate consistent, professional designs. These prompts capture the essence of successful designs - from color palettes and typography to layout principles and interaction patterns.
Common Use Cases
- Website redesigns and refreshes
- New product landing pages
- Brand-consistent marketing sites
- Prototype and mockup generation
- Design system documentation
Design Characteristics
- Detailed color specifications
- Typography hierarchies
- Layout and spacing guidelines
- Component styling rules
- Interaction patterns
Developer Design Prompts
GitHub
Developer## Color Palette - Primary: #238636 (Green), #1F6FEB (Blue) - Background: #0D1117, #161B22, #21262D - Text: #C9D1D9, #8B949E - Accent: #F78166 (Orange), #A371F7 (Purple) ## Typography - Font: -apple-system, Segoe UI, monospace for code - Headings: 600 weight - Body: 400 weight, 14-16px - Code: 12-14px monospace ## Layout Principles - Repository-centric navigation - Tab-based content switching - Sidebar for file trees - Inline code review ## UI Components - Rounded corners (6px) - Label/badge system - Diff viewers - Markdown rendering ## Visual Style - Developer-focused density - Syntax highlighting - Contribution graphs - Monospace aesthetics
Vercel
Developer## Color Palette - Primary: #000000, #FFFFFF - Background: #000000, #111111, #1A1A1A - Text: #FFFFFF, #888888 - Accent: #0070F3 (Blue), #50E3C2 (Teal) ## Typography - Font: Inter, system sans-serif - Headings: 700 weight, large sizes - Body: 400 weight, 16px ## Layout Principles - Hero-focused landing pages - Terminal/code aesthetics - Grid-based dashboards - Generous whitespace ## UI Components - Sharp to slightly rounded (4px) - Gradient borders - Terminal windows - Deployment status indicators ## Visual Style - Stark black and white - Code-centric visuals - Subtle gradient accents - Performance-focused messaging
Frequently Asked Questions
How do I use these design prompts?
Copy the design prompt and paste it into your preferred AI tool (ChatGPT, Claude, v0, etc.) along with your specific requirements. The AI will use the style guide to generate designs that match the aesthetic.
Can I modify the prompts?
Absolutely! These prompts are starting points. Customize colors, fonts, and layout preferences to match your brand while keeping the overall design philosophy.
What AI tools work with these prompts?
These prompts work with any LLM that can generate code or designs - ChatGPT, Claude, Gemini, v0, and more. They're especially effective with tools that understand web technologies.