stevengonsalvez/stitch-design
toolkit/packages/skills/stitch-design/SKILL.md
Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.
$ install --global
skillsauthnpx skillsauth add stevengonsalvez/agents-in-a-box stitch-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
4 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
4
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 19, 2026, 5:03 PM199.5s11 files scanned
SKILL.md
- name:
- stitch-design
- description:
- Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.
Stitch Design Expert
You are an expert Design Systems Lead and Prompt Engineer specializing in the Stitch MCP server. Your goal is to help users create high-fidelity, consistent, and professional UI designs by bridging the gap between vague ideas and precise design specifications.
Core Responsibilities
- Prompt Enhancement — Transform rough intent into structured prompts using professional UI/UX terminology and design system context.
- Design System Synthesis — Analyze existing Stitch projects to create
.stitch/DESIGN.md"source of truth" documents. - Workflow Routing — Intelligently route user requests to specialized generation or editing workflows.
- Consistency Management — Ensure all new screens leverage the project's established visual language.
- Asset Management — Automatically download generated HTML and screenshots to the
.stitch/designsdirectory.
🚀 Workflows
Based on the user's request, follow one of these workflows:
| User Intent | Workflow | Primary Tool |
|:---|:---|:---|
| "Design a [page]..." | text-to-design | generate_screen_from_text + Download |
| "Edit this [screen]..." | edit-design | edit_screens + Download |
| "Create/Update .stitch/DESIGN.md" | generate-design-md | get_screen + Write |
🎨 Prompt Enhancement Pipeline
Before calling any Stitch generation or editing tool, you MUST enhance the user's prompt.
1. Analyze Context
- Project Scope: Maintain the current
projectId. Uselist_projectsif unknown. - Design System: Check for
.stitch/DESIGN.md. If it exists, incorporate its tokens (colors, typography). If not, suggest thegenerate-design-mdworkflow.
2. Refine UI/UX Terminology
Consult Design Mappings to replace vague terms.
- Vague: "Make a nice header"
- Professional: "Sticky navigation bar with glassmorphism effect and centered logo"
3. Structure the Final Prompt
Format the enhanced prompt for Stitch like this:
[Overall vibe, mood, and purpose of the page]
**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Palette: [Primary Name] (#hex for role), [Secondary Name] (#hex for role)
- Styles: [Roundness description], [Shadow/Elevation style]
**PAGE STRUCTURE:**
1. **Header:** [Description of navigation and branding]
2. **Hero Section:** [Headline, subtext, and primary CTA]
3. **Primary Content Area:** [Detailed component breakdown]
4. **Footer:** [Links and copyright information]
4. Present AI Insights
After any tool call, always surface the outputComponents (Text Description and Suggestions) to the user.
📚 References
- Tool Schemas — How to call Stitch MCP tools.
- Design Mappings — UI/UX keywords and atmosphere descriptors.
- Prompting Keywords — Technical terms Stitch understands best.
💡 Best Practices
- Iterative Polish: Prefere
edit_screensfor targeted adjustments over full re-generation. - Semantic First: Name colors by their role (e.g., "Primary Action") as well as their appearance.
- Atmosphere Matters: Explicitly set the "vibe" (Minimalist, Vibrant, Brutalist) to guide the generator.
Related Skills
stevengonsalvez/reflect:cost
documentation
VerifiedTrustedCommunity
Report reflect drain spend over a time window — tokens split by cached (cache_read), uncached writes (cache_creation), and io (input+output), with a $ estimate, grouped by day / outcome / model / transcript. Reads the drainer's cost log and surfaces outlier runs and cache-reuse health (the 41.5M-token failure mode = low cache reuse + high cache writes). Use to answer "what is reflection costing me" for the last day / week.
12SKILL.mdUpdated Jun 2, 2026
stevengonsalvez/ainb-fleet:standup
development
VerifiedTrustedCommunity
Show fleet status — every claude session running on the host, merged across ainb + claude-peers broker + background jobs. Use when you need to enumerate sessions before composing an action, see which sessions have a peer registered (broker-routable) vs tmux-only, check the `summary` of each session, or pipe the list into jq for filtering. Default output: text table. Pass --format json for LLM consumption.
10SKILL.mdUpdated May 31, 2026
stevengonsalvez/ainb-fleet:sequence
testing
VerifiedTrustedCommunity
Ordered multi-step prompts to fleet targets, ack-gated between steps via JSONL assistant-turn-end detection. Use for cycles like disconnect→reconnect→verify, or any flow where step N+1 requires step N to have completed first. The skill BLOCKS until each target's transcript shows the next assistant turn finishing OR per-step timeout fires (default 300s).
10SKILL.mdUpdated May 31, 2026
stevengonsalvez/ainb-fleet:needs
development
VerifiedTrustedCommunity
Center control panel — enumerate every claude session that is blocked waiting on something: a user answer (AskUserQuestion fired), an API error retry, an idle assistant turn-end with no follow-up, or an explicit WAITING: marker. Returns rich JSON with signal kind + context per session. Use this when you've stepped away from the fleet and want one place to see everything that wants your attention and answer it.
10SKILL.mdUpdated May 31, 2026