/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}