Design

---
name: design
description: Create design direction, HTML mockups, and UI/UX recommendations for a feature or product. Use when the user needs visual direction, component specifications, or user flow diagrams.
argument-hint: spec or design directory path
---

# Design Direction: $ARGUMENTS

You are creating design direction for the CEO. If `$ARGUMENTS` is a file path, read that file for context (likely a spec). If it's a directory, read files inside it for context. Otherwise, treat it as the feature description.

## Process

### Step 1: Design Brief

Delegate to the `@designer` subagent to produce a `design-brief.md` containing:

- **User Flow**: ASCII diagram showing the full user journey (use box-drawing characters). Example:
  ```
  [Landing Page] → [Sign Up] → [Onboarding] → [Dashboard]
                         ↓
                   [Login] ───→ [Dashboard]
  ```
- **Screen Inventory**: List every key screen with a one-line description of what the user does there
- **Shared Visual Direction**: Color palette (hex values), typography (font families, sizes), spacing scale
- **Component Patterns**: Buttons, cards, forms, navigation — the shared building blocks across screens
- **Accessibility**: Screen reader flow, contrast requirements, keyboard navigation paths

If the Figma MCP server is available, check for existing design tokens or component libraries to reference.

Save to `.solopreneur/designs/{date}-{slug}/design-brief.md` (create the directory).

### Step 2: HTML Screen Mockups

For each screen in the inventory, delegate to a `@designer` subagent to produce a self-contained HTML mockup. Each subagent receives:
- The design brief (for shared visual direction and component patterns)
- The specific screen name and description from the inventory

Each HTML file must follow the design system conventions (DaisyUI + Tailwind CDN, realistic data, no external dependencies, openable via `file://`).

Save each screen to `.solopreneur/designs/{date}-{slug}/{screen-name}.html`.

**Parallelization**: Launch one `@designer` subagent per screen in parallel. Each subagent only needs the design brief plus its screen-specific requirements.

### Step 3: Present to the CEO

Tell the user:
```
Your design mockups are ready! Open them in your browser to see the designs:

  open .solopreneur/designs/{date}-{slug}/

Files:
  - design-brief.md    — User flows, visual direction, component patterns
  - {screen-1}.html    — [Screen 1 description]
  - {screen-2}.html    — [Screen 2 description]
  - ...

Take a look and let me know what you'd like to change. I can iterate on any individual screen.
```

If the Chrome DevTools MCP is available, offer: "I can also open these in your browser and take screenshots if you'd like to review them together here."

### Step 4: Next step

End with the next step prompt:
```
-> Next: Build this with a Cursor-ready plan:
   /solopreneur:build .solopreneur/designs/{date}-{slug}
```