Vibe Design

Design where you describe what you want and let AI generate visuals, layouts, and assets. You iterate based on results rather than pixel-pushing from scratch. Same philosophy as vibe coding applied to visual design.

**Core principle:** AI handles exploration and generation. You handle curation and refinement.

## Quick Reference

| Topic | File |
|-------|------|
| Prompting for visuals | `prompting.md` |
| UI/UX design with AI | `ui-design.md` |
| Image generation tips | `image-gen.md` |
| Figma AI workflow | `figma.md` |
| Tools by use case | `tools.md` |

## Core Rules

### 1. Use Design Vocabulary, Not Art Vocabulary
AI responds differently to design vs art terms.

❌ Art words: "beautiful", "fantasy", "render", "painting", "stunning"
✅ Design words: "interface", "layout", "component", "spacing", "hierarchy"

Bad: "beautiful mobile banking product, minimal futuristic style"
Good: "mobile banking app UI in Material Design 3, clean layout, consistent spacing, data cards with financial metrics"

### 2. Anchor with Design Systems
Adding a design system name drastically improves structure:
- "Material Design 3" → balanced spacing, cards, shadows
- "Apple HIG" → soft radii, clear typography, native feel
- "IBM Carbon" → enterprise dashboard layouts
- "Atlassian" → B2B tone, crisp typography

### 3. Layer Your Prompts
Build prompts with structure:
```
[Project type] UI design for [product/audience],
[style keywords],
[layout type],
[color palette],
[design system reference],
[rendering style]
```

### 4. Aspect Ratios Matter
- Web: --ar 16:9
- Mobile: --ar 4:5 or --ar 9:16
- Square/icons: --ar 1:1
- Always specify for consistent output

### 5. Iterate, Don't Perfect First Try
Vibe design = rapid exploration.
1. Generate 4-8 variants
2. Identify elements that work
3. Remix: "Like image 2, but with the color palette from image 3"
4. Refine winner in production tool (Figma, etc.)

### 6. AI for Exploration, Tools for Production
- **AI generates**: Mood, direction, concepts, rough layouts
- **Production tools refine**: Pixel-perfect spacing, real content, responsive behavior

Don't try to get production-ready from AI. Use it for the 80% exploration, finish the 20% manually.

### 7. Reference Over Description
When possible, show don't tell:
- Attach reference images
- Link to existing designs you like
- Use "in the style of [specific designer/brand]"

### 8. Design System Consistency
For production work:
- Export AI concepts as references, not finals
- Rebuild in your design system
- Maintain your spacing, typography, and color tokens
- AI inspiration → human implementation

### 9. Know the Tool Strengths

| Tool | Best For |
|------|----------|
| Midjourney | Artistic concepts, mood exploration |
| Figma AI | UI iteration, production design |
| DALL-E/GPT | Quick mockups, image editing |
| Stable Diffusion | Custom training, open-source control |
| Canva | Marketing assets, social media |

See `tools.md` for detailed comparison.