skills.rest
TranVanTienDat
TranVanTienDatCOMMUNITY
Explore all skills by this author →
GitHub

stitch-design

Generates and edits high-fidelity UI screens through Stitch MCP with prompt enhancement and design system synthesis.

Updated Mar 26, 2026
Search Tags:#design system#mcp#ui design#ux#stitch#prompt enhancement#screen generation
One-click install
npx skills add https://github.com/TranVanTienDat/Milkyway --skill stitch-design-tranvantiendat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-design
Source: https://github.com/TranVanTienDat/Milkyway/tree/main/apps/storefront/.agents/skills/stitch-design
Command: npx skills add https://github.com/TranVanTienDat/Milkyway --skill stitch-design-tranvantiendat

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 enhancing prompts with UI/UX terminology and maintaining a .stitch/DESIGN.md source of truth for design consistency. ## Core Features & Use Cases - Prompt Enhancement Pipeline: Transforms rough requests into structured prompts with hex colors, typography, atmosphere descriptors, and page structure before calling Stitch MCP tools. - Design System Synthesis: Analyzes existing Stitch projects via get_screen and generates a .stitch/DESIGN.md documenting palette, typography, and component styles. - Generation & Editing Workflows: Routes requests to generate_screen_from_text for new screens or edit_screens for targeted refinements, then downloads HTML and screenshots to .stitch/designs. - Use Case: Ask for a premium landing page for a mountain resort with glassmorphism, and receive a Stitch-generated screen whose colors and components match your project's existing design system. ## Quick Start Ask the agent to design a landing page for your app using Stitch, mentioning the desired mood, colors, and page sections.

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?▼

Use the text-to-design workflow: enhance your prompt with design system tokens, hex colors, and a numbered page structure, then call generate_screen_from_text with your projectId and deviceType. Download the resulting HTML and screenshot to the .stitch/designs directory.

How do I edit an existing Stitch design screen?▼

Use the edit-design workflow: locate the screen with list_screens or get_screen, write a specific edit prompt naming the component, location, and target values like hex colors, then call edit_screens with the selected screen IDs. Download the updated assets afterward.

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

It is a design system source of truth generated by analyzing an existing Stitch project. It documents the color palette with hex codes, typography rules, component stylings, and layout principles so all future screens stay visually consistent.

Does stitch-design work without a Stitch MCP server?▼

No. The Skill depends on Stitch MCP tools such as generate_screen_from_text, edit_screens, list_projects, and get_screen. You need Stitch MCP server access and a projectId, which can be discovered via list_projects.

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.

Related Skills

Explore More Design & Creative Skills→
lagarcesslagarcess
1

stitch-design

Enhance design prompts into structured UI specifications for Stitch MCP workflows.

Community
Advanced
aws-solutions-library-samplesaws-solutions-library-samples
392

frontend-design

Generate production-grade frontend interfaces from design briefs.

Official
Advanced
vikingokftvikingokft

design-md

Extract Stitch project design metadata and generate a structured DESIGN.md file.

Official
Intermediate
reason-machinesreason-machines
4

figma-to-ai-prompter

Converts Figma design structures into token-optimized prompts for AI prototyping tools.

Official
Intermediate