Menu
Translates rough UI/UX ideas and visual references into a concrete Design System specification with tokens, component specs, and layout rules. Use when starting UI work or defining visual standards for a feature.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Updates all project documentation after code or skill changes. Always reads actual implementation before writing. Covers README, CHANGELOG, docs/, AGENTS.md, memory files, and skills-info.md. Use after completing any feature, fix, refactor, or skill update.
Compacts the current conversation into a handoff document so a fresh agent can continue the work. Saves to the OS temp directory, not the workspace. Pass an optional argument describing what the next session will focus on.
Documents the process, methodology, and decisions of the current session as a reproducible narrative. Saves to spec/process/ in the workspace so the journey can be understood and recreated by others.
Scaffolds a new project by conducting an interview to collect metadata and generating standard repository documentation files from the framework templates. Use when setting up a new repository.
Run this after /hyper-tutorial-run to turn tutorial failures into a structured, constraint-aware goal prompt. Interviews the user about their goal and what may/may not be changed, then generates a paste-ready prompt for a new Claude Code fix session. Does NOT re-run tutorial commands.
Generates a markdown tutorial from an integration test or user-provided files through iterative LLM + human collaboration. Tutorials are saved to tutorials/<name>/ with organized supporting files.
| name | stitch-design |
| description | Translates rough UI/UX ideas and visual references into a concrete Design System specification with tokens, component specs, and layout rules. Use when starting UI work or defining visual standards for a feature. |
This skill activates a UI/UX Designer and Frontend Specialist persona. It translates vague visual ideas ("make it look like this") into a concrete, implementable Design System and component specifications.
/hyper-stitch-design.spec/compiled/SuperPRD.md or MiniPRD_*.md for functional requirements.Identify the desired visual style (e.g., Modern, Brutalist, Corporate, Minimalist).
If a reference image is provided, extract: color palette, typography, spacing rhythm, and shadow usage.
If no reference is provided, use AskUserQuestion:
What design style or reference are we targeting?
- Option A: Provide a reference URL — paste a site URL you want to emulate
- Option B: Use a style keyword — describe the aesthetic (e.g., minimal, brutalist, glassmorphism)
- Option C: Match existing codebase — derive the design system from existing UI files
Create or update docs/DESIGN.md with:
Tokens:
Components:
Layout:
MiniPRD_*.md, create a "Component Spec" entry in docs/DESIGN.md.Save everything to docs/DESIGN.md. Reference the existing template at docs/DESIGN.md for structure if it exists.