Start or continue a design project. Manages the full workflow from brief to visual direction — analyzes requirements, gathers inspiration, creates wireframes, and applies styling. Entry point for the design pipeline. Triggers on "start design project", "new design", "continue design", "design status", "/design".
Start or continue a design project. Manages the full workflow from brief to visual direction — analyzes requirements, gathers inspiration, creates wireframes, and applies styling. Entry point for the design pipeline. Triggers on "start design project", "new design", "continue design", "design status", "/design".
Manage the end-to-end design workflow: Analyze → Inspire → Wireframe → Style. This skill is the single entry point for all design projects. It maintains project state, displays progress, and delegates work to phase-specific sub-skills.
See skills/design/references/workspace-schema.md for the full state.json schema and directory structure.
On Invocation — Find Existing Project
Look for .design-workspace/*/state.json in the current working directory using Glob.
If no project found → go to New Project Flow.
If one project found → Read its state.json → go to Resume Flow.
If multiple projects found → go to Multiple Projects Flow.
New Project Flow
1. Gather Project Name
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:
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").
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:
Continue with the recommended action
Jump to a specific phase
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:
Read the current state.json.
Set the completed phase's status to "complete".
Set the completed phase's completedAt to the current ISO 8601 timestamp.
Advance currentPhase to the next phase in order: analyze → inspire → wireframe → style.
If the next phase exists, set its status to "not-started" (it remains not-started until the sub-skill begins work).
Write the updated state.json.
Display the updated dashboard using the Resume Flow format.
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:
Check that {designSystemPath}/design-system.css exists.
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.
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.
