From planning-plugin
Use when a functional specification is finalized and UI design artifacts (DSL, wireframes) are needed before implementation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/planning-plugin:designThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate designs for: **$ARGUMENTS**
Generate designs for: $ARGUMENTS
Follow these steps in order.
.claude/planning-plugin.json from the current project directory"Planning Plugin is not configured for this project. Run
/planning-plugin:initto set up."
workingLanguage (default: "en" if field is absent)en = English, ko = Korean, vi = VietnameseCommunication language: All user-facing output in this skill (summaries, questions, feedback presentations, next-step guidance) must be in {workingLanguage_name}.
The design pipeline produces better results when a design system exists. Run /planning-plugin:design-system before /planning-plugin:design for best results.
Agent-to-file reference map (design-system/pages/):
| Design System File | dsl-generator | stitch-wireframe | prototype-generator | Purpose |
|---|---|---|---|---|
components.md | O | - | - | Component inventory for type selection |
icons.md | O | - | - | Domain-specific icon mappings |
patterns.md | O | O | - | Layout validation via page_layout + components_used |
MASTER.md | O | O | - | Design principles as DSL/wireframe constraints |
colors.md | - | O | O | Color tokens for wireframe context + Tailwind theme |
typography.md | - | O | O | Font families/sizes for wireframe context + Tailwind theme |
spacing-layout.md | - | - | O | Layout density + spacing for Tailwind theme |
All references are optional — agents fall back to defaults when design-system files are absent.
Stitch output cross-references (stitch-wireframes/):
| Stitch Output File | prototype-generator | Purpose |
|---|---|---|
design-tokens.json | O | Extracted color/font/spacing tokens for Tailwind theme |
DESIGN.md | O | Natural-language design document for styling decisions |
shadcn-mapping.json | O | Stitch HTML → shadcn/ui component mapping hints |
{screen-id}.html | O | Visual layout reference (flex, grid, spacing) |
Parse the arguments to extract:
feature — kebab-case feature name (required)--stage — optional stage filter: dsl or stitch (default: run dsl + stitch, then stop for review)Validate the spec exists:
feature is _shared: Skip progress file validation (shared layouts have no spec lifecycle). Instead, validate only that docs/specs/_shared/en/screens.md exists. If not, stop with:
"No shared layout screens found. Create
docs/specs/_shared/en/screens.mdwith layout screen definitions first."
docs/specs/{feature}/.progress/{feature}.json
"No specification found for '{feature}'. Run
/planning-plugin:spec "{feature}"first."
reviewing or finalized. If drafting or analyzing, stop with:
"The specification for '{feature}' is still in '{status}' status. Complete the spec review process first."
Validate screens.md exists at docs/specs/{feature}/en/screens.md:
docs/specs/{feature}/en/ directory does not exist, stop with:
"English spec not found. Run
/planning-plugin:translate {feature}first to generate the English version."
screens.md is missing inside the en/ directory, stop with:
"No screen definitions found. The spec must include screens.md."
Stage-specific prerequisite checks:
--stage=stitch: verify docs/specs/{feature}/ui-dsl/manifest.json exists. If not:
"UI DSL not found. Run
/planning-plugin:design {feature} --stage=dslfirst."
Based on the --stage argument:
dsl → stitch, then stop with review gate--stage=dsl → run Stage 1 only--stage=stitch → run Stage 2 onlyRead the progress file and initialize the design field if not present:
{
"design": {
"status": "pending",
"stages": {
"dsl": { "status": "pending" },
"stitch": { "status": "pending" }
}
}
}
If the design field already exists, preserve existing stage statuses for stages not being re-run.
Skip if not in the determined stages.
design.stages.dsl.status = "in_progress" (skip for _shared — no progress file)If feature is _shared (layout-only mode):
Task(subagent_type: "dsl-generator", prompt: "Generate UI DSL JSON files for the shared layout feature '_shared'. specDir: docs/specs/_shared/en/. feature: _shared. This is a SHARED LAYOUT feature — enter layout-only mode: only process screens with Slot components, set children=[] in layouts, skip data model inference and cross-referencing. Read screens.md from the spec directory. Read templates/ui-dsl-schema.json as the structural reference. Write output to docs/specs/_shared/ui-dsl/.")
Otherwise (normal feature):
Task(subagent_type: "dsl-generator", prompt: "Generate UI DSL JSON files for the feature '{feature}'. specDir: docs/specs/{feature}/en/. feature: {feature}. Read screens.md (screen definitions, error handling) and {feature}-spec.md (functional requirements) from the spec directory. Read templates/ui-dsl-schema.json as the structural reference. Write output to docs/specs/{feature}/ui-dsl/.")
_shared — no progress file):
{
"design.stages.dsl": {
"status": "completed",
"screenCount": {count from agent result},
"generatedAt": "ISO-8601"
}
}
status: "error", report error, and ask user whether to retry or skipSkip if not in the determined stages.
Check if any Stitch MCP tool is available (e.g., mcp__stitch__list_projects)
{ "design.stages.stitch": { "status": "skipped", "generatedAt": "ISO-8601" } }
"Stitch MCP is not configured. Skipping wireframe generation. Run:
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: <key>" -s user"
Update progress: design.stages.stitch.status = "in_progress"
Launch the stitch-wireframe agent:
Task(subagent_type: "stitch-wireframe", prompt: "Generate Stitch wireframes for the feature '{feature}'. dslDir: docs/specs/{feature}/ui-dsl/. feature: {feature}. Read manifest.json and all screen-*.json files. Generate visual wireframes using Google Stitch MCP, extract design tokens and shadcn/ui mapping hints. Write outputs to docs/specs/{feature}/stitch-wireframes/.")
On success, update progress:
{
"design.stages.stitch": {
"status": "completed",
"projectId": "{stitch project ID from agent result}",
"screenCount": "{count from agent result}",
"outputDir": "docs/specs/{feature}/stitch-wireframes/",
"designDoc": "docs/specs/{feature}/stitch-wireframes/DESIGN.md",
"generatedAt": "ISO-8601"
}
}
Stage 2 outputs now include DESIGN.md — a natural-language design document with 5 dimensions (Visual Theme, Color Palette, Typography, Component Styling, Layout Principles). This document is consumed by the prototype generator in Step 1c for Tailwind theming and component styling decisions.
On failure or if agent returns stitch_mcp_unavailable, update status: "skipped" and continue to Step 6
Review gate (default run only): If no --stage flag was provided (i.e., this is a default dsl+stitch run) and stitch completed successfully, display the review gate message and stop:
Stitch wireframes generated for '{feature}':
{screenCount} screens → docs/specs/{feature}/stitch-wireframes/
Review your wireframes:
1. Open Stitch project to review and edit: https://labs.google/stitch/projects/{projectId}
2. If you made edits on Stitch, sync them:
/planning-plugin:sync-stitch {feature}
3. When satisfied, generate the prototype:
/planning-plugin:prototype {feature}
Then skip to Step 6 (Finalize).
Determine overall design status:
design.status = "reviewing" (stitch complete, awaiting human review before prototype)design.status = "partial"design.status = "pending"Write the updated progress file
Present a summary to the user:
Design Pipeline Results for '{feature}':
Stage 1 — DSL Generation: {status} — {screenCount} screens
Stage 2 — Stitch Wireframes: {status} — {screenCount} screens / {reason for skip}
Next Steps vary based on how the pipeline terminated:
A) Default run (dsl + stitch, stopped at review gate):
Next Steps:
1. Open Stitch project to review and edit: https://labs.google/stitch/projects/{projectId}
2. If you made edits on Stitch, sync them:
/planning-plugin:sync-stitch {feature}
3. When satisfied, generate the prototype:
/planning-plugin:prototype {feature}
B) Single stage run (--stage=dsl or --stage=stitch):
Adjust Next Steps to guide the user to the next logical stage.
If design-system/MASTER.md does not exist, prepend this to the Next Steps:
- Run `/planning-plugin:design-system --domain={domain}` to generate a design system — this enhances DSL icon accuracy, pattern validation, and prototype theming
npx claudepluginhub ohmyhotelco/hare-cc-plugins --plugin planning-pluginOrchestrates Stitch UI design workflows: routes from user request through spec, prompt assembly, screen generation, iteration, design system extraction, and framework conversion (Next.js, Svelte, HTML, React Native, SwiftUI).
Creates Stitch UI screens, design systems, variants, and prototypes from briefs, mockups, or product context. Exports Tailwind HTML, screenshots, and local code artifacts. Use for screen exploration, editing Stitch projects, or multi-screen prototypes.
Creates effective prompts for Google Stitch, an AI UI generator by Google Labs. Covers specific prompting principles, visual style definition, multi-screen flows, and platform targeting for web and mobile app designs.