1. Vibe Intake
Extract key emotional descriptors from user:
- Primary vibe (main feeling to evoke)
- Secondary vibes (supporting emotions)
- Domain context (portfolio, e-commerce, SaaS, etc.)
- Target audience (technical, general, enterprise, creative)
- Constraints (brand colors, accessibility needs, technical limits)
2. Domain-Aware Translation
The same vibe word translates differently across domains:
#### "Edgy" Translations
| Domain | Colors | Typography | Layout | Interactions |
|--------|--------|------------|--------|--------------|
| Professional Portfolio | Dark bg (#1a1a1a), bold accents (#ff3366) | Heavy sans-serif (800+ weight) | Asymmetric, unexpected | Sharp, quick animations |
| SaaS Product | High contrast, neon accents | Angular geometric fonts | Grid-chaos (broken grid) | Glitch effects, distortion |
| E-commerce | Black/red, metallic accents | All-caps, tight tracking | Diagonal layouts | Aggressive hover effects |
#### "Trustworthy" Translations
| Domain | Colors | Typography | Layout | Interactions |
|--------|--------|------------|--------|--------------|
| Financial Services | Navy blues, conservative grays | Serif for body, clean sans headers | Traditional grid, generous spacing | Smooth, predictable |
| Healthcare | Soft blues, whites, accent greens | Readable serif, professional | Clear hierarchy, whitespace | Gentle, reassuring |
| Legal Services | Deep blues, burgundy accents | Traditional serif (Garamond-style) | Formal layouts, centered | Minimal, dignified |
#### "Premium" Translations
| Domain | Colors | Typography | Layout | Interactions |
|--------|--------|------------|--------|--------------|
| Luxury Goods | Black/white/gold, minimal palette | Elegant serif + thin sans | Generous whitespace, elegant | Slow, luxurious |
| Tech Products | Deep blacks, metallic accents | Modern geometric sans | Sleek, minimal | Smooth, polished |
| Creative Services | Monochrome + single bold accent | Mix of elegant serif + modern sans | Sophisticated asymmetry | Subtle, refined |
3. Visual DNA Assembly
Generate complete visual specification:
```typescript
interface VisualDNA {
colors: {
primary: string; // Dominant color, hex code
secondary: string; // Supporting color
accent: string; // Highlight color
neutrals: string[]; // Grays/backgrounds
rationale: string; // Why these colors evoke the vibe
};
typography: {
headings: {
family: string;
weight: number;
characteristics: string; // "Bold, geometric, attention-grabbing"
};
body: {
family: string;
weight: number;
size: string; // "16-18px for readability"
};
rationale: string; // How fonts convey the vibe
};
layout: {
system: string; // "12-column grid" | "freeform" | "asymmetric"
spacing: string; // "tight" | "balanced" | "generous"
hierarchy: string; // How elements are prioritized
rationale: string; // Layout psychology
};
interactions: {
speed: string; // "instant" | "snappy" | "smooth" | "luxurious"
patterns: string[]; // ["hover-lift", "fade-in", "parallax"]
rationale: string; // Interaction personality
};
moodBoard: {
references: string[]; // URLs to inspirational examples
takeaways: string[]; // What to learn from each reference
};
}
```
4. Medium Adaptations
Same vibe may translate differently across mediums:
Web β Mobile
- Touch targets vs hover states
- Thumb-friendly layouts
- Reduced motion for battery
Web β Print
- CMYK vs RGB color adjustment
- Resolution and bleed considerations
- Static hierarchy without interaction
Web β VR
- Spatial depth and 3D typography
- Gaze-based interaction patterns
- Comfort and accessibility in 3D space
|