stitch-ui-design-spec-generator
Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.
Best use case
stitch-ui-design-spec-generator is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.
Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "stitch-ui-design-spec-generator" skill to help with this workflow task. Context: Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/stitch-ui-design-spec-generator/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How stitch-ui-design-spec-generator Compares
| Feature / Agent | stitch-ui-design-spec-generator | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Design 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](../../docs/prd-to-stitch-workflow.md).
## Output Format (JSON)
The skill must produce a JSON block like this:
```json
{
"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
1. **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.
2. **Determine Device**:
* "Dashboard/Admin" -> DESKTOP.
* "App/Instagram-like" -> MOBILE.
* "Watch Face" -> SMART_WATCH.
* Default to MOBILE if unspecified.
3. **Determine Mode**:
* "Sketch/Blueprint/Draft" -> WIREFRAME.
* Default to HIGH_FIDELITY.
## Example
**User request**: "A cyberpunk login page"
**Output**:
```json
{
"theme": "DARK",
"primaryColor": "#00FFFF",
"font": "Orbitron",
"roundness": "Low",
"density": "COMFORTABLE",
"designMode": "HIGH_FIDELITY",
"styleKeywords": ["Cyberpunk", "Neon", "High Contrast", "Glitch"],
"deviceType": "MOBILE"
}
```
## Usage
Call this skill internally before creating a project or generating a prompt. The output JSON feeds into `stitch-ui-prompt-architect` (Path B) for final prompt assembly.Related Skills
teaching-resource-generator
Generate teaching resources including slide deck outlines, progressive exercises, hands-on case studies, and learning guides with self-assessment checkpoints. Use when the user asks to create courseware, design practice exercises, build teaching materials, develop lesson content, or generate educational resources.
course-designer
Design structured courses including syllabi, learning objectives using Bloom's taxonomy, lesson plans, and assessment rubrics. Use when the user asks about course design, needs to create a curriculum, write learning objectives, structure educational modules, or build assessment plans.
stitch-vue-vant-components
Convert Stitch designs into modular Vite + Vue 3 + Vant 4 mobile components. Use when the user mentions Vant or Vue Mobile conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Vant tokens (mobile-first 375px, safe area), enforces Vue SFC structure with Vant 4 components (van-button, van-field, van-nav-bar, van-tabbar).
stitch-vue-layui-components
Convert Stitch designs into modular Vite + Vue 3 + Layui-Vue components. Use when the user mentions Layui conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Layui tokens (2px/4px radius), enforces Vue SFC structure with Layui-Vue components (layui-btn, layui-input, lay-card, lay-page-header).
stitch-vue-element-components
Convert Stitch designs into modular Vite + Vue 3 + Element Plus components. Use when the user mentions Element Plus, element-ui, or Vue Desktop conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Element Plus tokens, enforces Vue SFC structure with el-* components (el-button, el-form, el-table, el-card, el-menu).
stitch-vue-bootstrap-components
Convert Stitch designs into modular Vite + Vue 3 + BootstrapVue/BootstrapVueNext components. Use when the user mentions Bootstrap or BootstrapVue conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Bootstrap utilities, enforces Vue SFC structure with Bootstrap components (b-container, b-row, b-col, b-button, b-card).
stitch-uviewpro-components
Convert Stitch designs into uni-app + Vue 3 + uView Pro pages and components. Use when the user mentions uView Pro, uviewpro, or uni-app Vue 3 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces u-* component contracts (u-tabs, u-form, u-picker, u-card) with script setup.
stitch-uview-components
Convert Stitch designs into uni-app + Vue 2 + uView 2.0 pages and components. Use when the user mentions uView, uView 2, or uni-app Vue 2 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces uni-app page structure with uView 2 u-* components (u-navbar, u-form, u-button, u-cell-group).
stitch-ui-prompt-architect
Build Stitch-ready prompts from vague UI ideas (Path A) or from a Design Spec plus user request (Path B). Use when polishing a UI prompt before Stitch generation, improving a prompt that produced poor results, or merging a Design Spec with framework contracts (uView, Element Plus, Layui, Bootstrap, Vant) into a sectioned Context/Layout/Components prompt.
stitch-ui-designer
Master orchestrator for end-to-end Stitch UI design and generation. Use when the user asks to design, create, or make a UI screen using Stitch. Coordinates design spec generation, framework contract injection, prompt assembly, and MCP execution (create_project, generate_screen_from_text, get_screen) in a single workflow.
stitch-ui-design-variants
Generate alternative Stitch design variant prompts for A/B testing and creative exploration. Use when the user wants multiple style, layout, or content options for a Stitch screen. Takes a base Design Spec or prompt and produces 3 distinct variants (layout, style, or content variations).
stitch-ui-design-spec-vant
Vant 4 (Vue 3/Mobile) design spec for Stitch screen generation. Use when the user mentions Vant, vant4, or vant-ui in a Stitch design request. Outputs a hard-constraints prefix with Vant tokens (Primary #1989fa, van-button/van-field/van-nav-bar components, mobile-first 375px) or a CONTRACT_SELECTION_JSON_V1 selector.