stitch-design

Generates and edits UI screens via Stitch MCP with prompt enhancement and design system synthesis.

Updated Jun 22, 2026
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill stitch-design-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design
Source: https://github.com/aashahin/ai-skills/tree/main/stitch-design
Command: npx skills add https://github.com/aashahin/ai-skills --skill stitch-design-aashahin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning vague design ideas into consistent, high-fidelity UI screens is hard: prompts lack professional terminology, and new screens drift away from the project's established visual language. This Skill bridges that gap by structuring prompts, maintaining a design system source of truth, and routing requests to the right Stitch MCP workflow. ## Core Features & Use Cases - Prompt Enhancement Pipeline: Transforms rough intent into structured prompts with professional UI/UX terminology, hex color codes, typography rules, and page structure before calling Stitch generation tools. - Design System Synthesis: Analyzes existing Stitch projects and generates a .stitch/DESIGN.md source-of-truth document capturing colors, typography, components, and layout principles. - Workflow Routing & Asset Management: Routes requests to text-to-design, edit-design, or design-md workflows, then downloads generated HTML and screenshots to .stitch/designs. - Use Case: Ask for a premium landing page for a mountain resort with glassmorphism; the Skill enhances the prompt with palette and structure, generates the screen via Stitch MCP, and saves the assets locally. ## Quick Start Ask the agent to design a landing page for your app using Stitch, and it will enhance your prompt, generate the screen, and download the design assets.

Frequently Asked Questions about stitch-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a UI screen from a text prompt with Stitch?▼

Describe the page you want, and the Skill enhances your prompt with design system tokens, hex colors, and page structure before calling the Stitch MCP generate_screen_from_text tool. The resulting HTML and screenshot are downloaded to the .stitch/designs directory.

How do I edit an existing Stitch design screen?▼

Use the edit-design workflow: identify the screen with list_screens or get_screen, then write a specific edit prompt describing location, visuals, and structure. The Skill calls edit_screens and downloads the updated assets, overwriting previous versions.

What is the .stitch/DESIGN.md file used for?▼

It is a design system source of truth synthesized from an existing Stitch project, capturing color palette, typography, component styles, and layout principles. Future screen generations incorporate these tokens to keep new designs visually consistent.

Does Stitch design generation require any prerequisites?▼

Yes, you need access to a Stitch MCP server and a projectId, which can be discovered via the list_projects tool. Without an existing project, a new one must be created before generating screens.

When should I edit a screen instead of regenerating it?▼

Prefer edit_screens for targeted adjustments like changing a button color or adding an element, since it preserves the existing layout. Only regenerate from scratch when the fundamental page structure is wrong.