Design Preferences

Gather user preferences for visual design before building. Creates docs/DESIGN.md with selected choices.

When to Use

Applies to project types with UI:

Web App (SaaS)
Mobile App
Browser Extension
Telegram Bot (if inline keyboards / web app)

Skip for:

REST API (no UI)
GraphQL API (no UI)
CLI Tool (terminal only)
Data Pipeline
Library/SDK

Question Flow

Step 1: Design Priority

question: "Насколько важен дизайн для этого проекта?"
header: "Design"
options:
  - label: "Профессиональный"
    description: "Уникальный стиль, впечатляет пользователей"
  - label: "Функциональный"
    description: "Чистый и понятный, без лишнего"
  - label: "Минимальный MVP"
    description: "Работает -> достаточно, стиль потом"

If "Минимальный MVP" -> Skip remaining questions, use defaults.

Step 2: Aesthetic Direction

question: "Какой визуальный стиль ближе?"
header: "Style"
options:
  - label: "Minimalist"
    description: "Много пространства, чистые линии"
  - label: "Bold & Modern"
    description: "Яркие акценты, современный"
  - label: "Soft & Friendly"
    description: "Округлые формы, мягкие тона"
  - label: "Dark & Professional"
    description: "Тёмная тема, серьёзный"
  - label: "Colorful & Playful"
    description: "Яркие цвета, игривый"

Step 3: Theme Selection

Based on aesthetic direction, offer matching themes from theme-factory:

Direction	Matching Themes
Minimalist	Modern Minimalist, Arctic Frost
Bold & Modern	Tech Innovation, Sunset Boulevard
Soft & Friendly	Desert Rose, Botanical Garden
Dark & Professional	Ocean Depths, Midnight Galaxy
Colorful & Playful	Golden Hour, Sunset Boulevard

question: "Какая цветовая схема?"
header: "Theme"
options:
  - label: "{Theme 1}"
    description: "{Primary colors}"
  - label: "{Theme 2}"
    description: "{Primary colors}"
  - label: "Custom"
    description: "Опишу свои цвета"

If "Custom" -> Ask follow-up: "Опиши желаемые цвета или бренд"

Step 4: Typography Style

question: "Какой стиль текста?"
header: "Fonts"
options:
  - label: "Sans-Serif (современный)"
    description: "Чистый, технологичный"
  - label: "Serif (классический)"
    description: "Традиционный, солидный"
  - label: "Mixed (заголовки/текст)"
    description: "Display + body fonts"

Step 5: Animation Level

question: "Сколько анимации?"
header: "Motion"
options:
  - label: "Subtle"
    description: "Только hover эффекты"
  - label: "Moderate"
    description: "Переходы, hover, scroll"
  - label: "Rich"
    description: "Page transitions, stagger, parallax"
  - label: "None"
    description: "Без анимации"

Output: docs/DESIGN.md

# Design Specification

## Priority
{Professional / Functional / MVP}

## Aesthetic Direction
{Selected style}

## Theme
**Name:** {theme name}
**Colors:**
- Primary: {hex}
- Secondary: {hex}
- Accent: {hex}
- Background: {hex}
- Text: {hex}

**Fonts:**
- Headers: {font name}
- Body: {font name}

## Motion
**Level:** {Subtle / Moderate / Rich / None}
**Patterns:**
- Hover: {yes/no}
- Page transitions: {yes/no}
- Scroll animations: {yes/no}
- Loading states: {yes/no}

## Implementation Notes
- Use CSS variables for theme colors
- Follow frontend-design skill principles
- Avoid generic fonts (Inter, Roboto, Arial)
- {Additional notes based on choices}

Default Values (MVP mode)

If user chooses "Минимальный MVP":

Theme: Modern Minimalist
Fonts: System sans-serif
Motion: None
Priority: Ship fast, style later

Integration with /ship

Place this step between Phase 1 (Idea Validation) and Phase 2 (Project Setup):

Phase 1: Idea Validation
  -> Step 1.6: Create PRD

Phase 1.5: Design Preferences   <-- NEW
  -> Ask design questions
  -> Create DESIGN.md

Phase 2: Project Setup
  -> Read PRD.md + DESIGN.md
  -> Apply theme to templates

Theme Details Reference

Ocean Depths

Primary: #1a2332 (Deep Navy)
Secondary: #2d8b8b (Teal)
Accent: #a8dadc (Seafoam)
Background: #f1faee (Cream)
Use: Corporate, finance, trust

Sunset Boulevard

Primary: #e76f51 (Burnt Orange)
Secondary: #f4a261 (Coral)
Accent: #e9c46a (Warm Sand)
Background: #264653 (Deep Purple)
Use: Creative, marketing, lifestyle

Forest Canopy

Primary: #2d4a2b (Forest Green)
Secondary: #7d8471 (Sage)
Accent: #a4ac86 (Olive)
Background: #faf9f6 (Ivory)
Use: Eco, wellness, organic

Modern Minimalist

Primary: #36454f (Charcoal)
Secondary: #708090 (Slate Gray)
Accent: #d3d3d3 (Light Gray)
Background: #ffffff (White)
Use: Tech, architecture, data

Golden Hour

Primary: #f4a900 (Mustard)
Secondary: #c1666b (Terracotta)
Accent: #d4b896 (Warm Beige)
Background: #4a403a (Chocolate)
Use: Food, hospitality, artisan

Arctic Frost

Primary: #d4e4f7 (Ice Blue)
Secondary: #4a6fa5 (Steel Blue)
Accent: #c0c0c0 (Silver)
Background: #fafafa (Crisp White)
Use: Healthcare, tech, clean

Desert Rose

Primary: #d4a5a5 (Dusty Rose)
Secondary: #b87d6d (Clay)
Accent: #e8d5c4 (Sand)
Background: #5d2e46 (Burgundy)
Use: Fashion, beauty, boutique

Tech Innovation

Primary: #0066ff (Electric Blue)
Secondary: #00ffff (Neon Cyan)
Accent: #ffffff (White)
Background: #1e1e1e (Dark Gray)
Use: Startups, AI/ML, digital

Botanical Garden

Primary: #4a7c59 (Fern Green)
Secondary: #f9a620 (Marigold)
Accent: #b7472a (Terracotta)
Background: #f5f3ed (Cream)
Use: Garden, food, natural

Midnight Galaxy

Primary: #2b1e3e (Deep Purple)
Secondary: #4a4e8f (Cosmic Blue)
Accent: #a490c2 (Lavender)
Background: #e6e6fa (Silver)
Use: Entertainment, gaming, creative

design-preferences