Design

Ask the designer: "What are we designing? Give me a name for this project."

2. Create Workspace

Convert the project name to a kebab-case slug. Create this directory structure:

.design-workspace/{slug}/
  analyze/
  inspire/
  wireframe/screens/
  style/

3. Detect Design System Path

Check these locations in order for design-system.css:

1. ~/.claude/plugins/design-workflow/design-system/design-system.css (bundled with plugin)
2. ./design-system.css (current working directory)
3. ../HTML Template/design-system.css
4. ~/Documents/GitHub/HTML Template/design-system.css

If none found, ask the designer to provide the path. Also verify manifest.json exists alongside design-system.css. Store the resolved absolute path.

4. Write Initial state.json

Write .design-workspace/{slug}/state.json with this structure:

{
  "project": "{Project Name}",
  "slug": "{slug}",
  "created": "{ISO 8601 timestamp}",
  "designSystemPath": "{resolved absolute path to HTML Template directory}",
  "currentPhase": "analyze",
  "phases": {
    "analyze": { "status": "not-started", "output": null, "completedAt": null },
    "inspire": { "status": "not-started", "output": null, "completedAt": null },
    "wireframe": { "status": "not-started", "output": null, "completedAt": null, "screens": [], "locked": [] },
    "style": { "status": "not-started", "output": null, "completedAt": null, "directions": [], "selectedDirection": null }
  },
  "decisions": []
}

5. Start Analysis

Invoke the Analyze skill: Skill("design-analyze").

Resume Flow

Display Dashboard

Read state.json and display a text dashboard:

┌─────────────────────────────────────────┐
│  {Project Name}                         │
│  Created: {date}                        │
├─────────────────────────────────────────┤
│  {icon} Analyze    {summary}            │
│  {icon} Inspire    {summary}            │
│  {icon} Wireframe  {summary}            │
│  {icon} Style      {summary}            │
├─────────────────────────────────────────┤
│  → {recommended next action}            │
└─────────────────────────────────────────┘

Icons:

• ✅ — complete
• ◑ — in-progress
• ○ — not-started

Summary Rules

Generate a short summary for each phase based on its status:

• Analyze complete: Read analyze/decomposition.json. Show the number of flows and pages (e.g., "3 flows, 7 pages").
• Inspire complete: Read inspire/references.json. Show the reference count (e.g., "12 references collected").
• Wireframe in-progress: Show locked vs total screen count (e.g., "2/5 screens locked").
• Wireframe complete: Show total screen count (e.g., "5 screens").
• Style in-progress: Show direction count or selected direction (e.g., "3 directions" or "Direction 2 selected").
• Style complete: Show "Final direction applied".
• not-started phases: Show "—".

Recommended Action Rules

Determine the recommended next action:

• Current phase status is in-progress → "Continue {phase name}"
• Current phase status is complete → "Ready for {next phase name}?"
• All four phases complete → "All phases complete!"

Ask the Designer

Present options:

1. Continue with the recommended action
2. Jump to a specific phase
3. Start a new project

Then invoke the appropriate sub-skill:

• Analyze → Skill("design-analyze")
• Inspire → Skill("design-inspire")
• Wireframe → Skill("design-wireframe")
• Style → Skill("design-style")

Multiple Projects Flow

List all projects found in .design-workspace/ with their names and last-modified dates (from state.json). Ask the designer which project to continue, or whether to start a new one.

If continuing an existing project, read its state.json and proceed to the Resume Flow.

Phase Transitions

When a sub-skill returns (indicating phase completion), perform these updates:

1. Read the current state.json.
2. Set the completed phase's status to "complete".
3. Set the completed phase's completedAt to the current ISO 8601 timestamp.
4. Advance currentPhase to the next phase in order: analyze → inspire → wireframe → style.
5. If the next phase exists, set its status to "not-started" (it remains not-started until the sub-skill begins work).
6. Write the updated state.json.
7. Display the updated dashboard using the Resume Flow format.
8. Recommend the next phase and ask the designer if they want to proceed.

Phase order is fixed: analyze → inspire → wireframe → style.

Design System Validation

On every invocation (both new and resume), verify the designSystemPath from state.json:

1. Check that {designSystemPath}/design-system.css exists.
2. Check that {designSystemPath}/manifest.json exists.

If either file is missing, warn the designer: "The design system at {path} is no longer accessible. Please provide the updated path." Update state.json with the corrected path once provided.

State Update Helpers

Use these patterns when modifying project state throughout the workflow.

Record a Decision

Append to the decisions array in state.json:

{
  "phase": "{current phase}",
  "key": "{decision identifier}",
  "value": "{decision value}",
  "timestamp": "{ISO 8601}"
}

Decisions capture important choices made during the workflow (e.g., selected app type, chosen style direction, screen prioritization).

Update Phase Status

Read state.json, modify the target phase's status field to one of "not-started", "in-progress", or "complete", and write back. Always preserve all other fields.

Safe Read/Write Pattern

Always read state.json immediately before writing to avoid stale data. Use the Read tool to get current contents, modify in memory, then Write the complete updated object. Never partially update the file.