stitch-ui-design-spec-generator
npx machina-cli add skill partme-ai/stitch-skills/stitch-ui-design-spec-generator --openclawDesign Spec Generator
Constraint: Only use this skill when the user explicitly mentions "Stitch" or when orchestrating a Stitch design task.
This skill acts as a Creative Director. It takes a high-level user request and outputs a structured Design Specification.
Input
Input may be either:
- User Request (one-shot): e.g., "A cyberpunk login page" or "A clean medical dashboard".
- PRD document or PRD summary: When the user provides a PRD file path or pasted PRD content, first extract function overview and page/screen list (and any visual/theme preferences from non-functional requirements), then apply the Logic Rules below to produce the design spec. For the full PRD-driven workflow (spec-generator → framework spec → prompt-architect → MCP), see docs/prd-to-stitch-workflow.md.
Output Format (JSON)
The skill must produce a JSON block like this:
{
"theme": "DARK" | "LIGHT",
"primaryColor": "Hex Code",
"font": "Font Name",
"roundness": "High" | "Medium" | "Low",
"density": "COMPACT" | "COMFORTABLE" | "SPACIOUS",
"designMode": "WIREFRAME" | "HIGH_FIDELITY",
"styleKeywords": ["Keyword1", "Keyword2"],
"deviceType": "MOBILE" | "TABLET" | "DESKTOP" | "SMART_WATCH"
}
Logic Rules
- Analyze Tone:
- "Corporate/Medical/Finance" -> Clean, Blue/Grey, Low Roundness, Inter font.
- "Creative/Gaming" -> Dark Mode, Neon colors, High Contrast.
- "Lifestyle/Food" -> Warm colors, High Roundness, Serif fonts.
- Determine Device:
- "Dashboard/Admin" -> DESKTOP.
- "App/Instagram-like" -> MOBILE.
- "Watch Face" -> SMART_WATCH.
- Default to MOBILE if unspecified.
- Determine Mode:
- "Sketch/Blueprint/Draft" -> WIREFRAME.
- Default to HIGH_FIDELITY.
Usage
Call this skill internally (by thinking) before creating a project or generating a prompt.
Source
git clone https://github.com/partme-ai/stitch-skills/blob/main/skills/stitch-ui-design-spec-generator/SKILL.mdView on GitHub Overview
This skill acts as a Creative Director for Stitch tasks, converting high-level user requests or PRD summaries into a structured Design Specification. It outputs the key UI attributes—theme, color, typography, roundness, density, designMode, and device target—to guide downstream design and development. The result is a consistent, ready-to-implement spec aligned to the Stitch workflow.
How This Skill Works
It analyzes the input using the defined Logic Rules (tone, device, and mode) to select theme, deviceType, and designMode, then emits a JSON block with fields: theme, primaryColor, font, roundness, density, designMode, styleKeywords, deviceType. The output follows the required Output Format and can be used as the starting point for prompts or UI frameworks.
When to Use It
- When a user requests a Stitch UI dashboard or admin panel (e.g., 'design me a dashboard'), the tool determines DESKTOP and the appropriate theme.
- When the user mentions a mobile-centric or 'Instagram-like' interface, the device is MOBILE and the design is compact.
- When the input conveys a tone from Creative/Gaming (neon, dark mode) or Lifestyle/Food (warm colors, high roundness), apply the corresponding Tone Rules.
- When a PRD or PRD summary is provided, extract function overview and screen list to shape the spec.
- When you need a starting spec before wireframes, prompts, or MCP steps.
Quick Start
- Step 1: Provide a Stitch user request or paste a PRD summary.
- Step 2: Note the desired tone, target device, and whether a WIREFRAME or HIGH_FIDELITY spec is needed.
- Step 3: Run the Stitch UI Design Spec Generator to output the design spec JSON.
Best Practices
- Provide a clear tone and device intent in the user request.
- Prefer explicit PRD content to guide theme and typography.
- Ensure the designMode matches the tonal intent (WIREFRAME vs HIGH_FIDELITY).
- Keep styleKeywords focused on brand terms rather than generic adjectives.
- Validate color and typography choices against accessibility and contrast guidelines.
Example Use Cases
- Input: 'A cyberpunk login page' → DARK theme with neon accents on MOBILE and HIGH_FIDELITY mode.
- Input: 'Clean admin dashboard' → LIGHT theme, DESKTOP device, LOW roundness, HIGH_FIDELITY mode.
- Input: 'Lifestyle shopping app' → WARM colors, HIGH roundness, COMFORTABLE density, MOBILE or DESKTOP as appropriate.
- Input: PRD for a medical app → corporate tone, BLUE/GREY palette, Inter font, LOW to MEDIUM roundness.
- Input: 'Watch-friendly fitness tracker' → SMART_WATCH device, HIGH_CONTRAST colors, HIGH_FIDELITY.
