stitch-design

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

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/Ayoub-ouederni/SENTINEL --skill stitch-design-ayoub-ouederni
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-design
Source: https://github.com/Ayoub-ouederni/SENTINEL/tree/main/.claude/skills/stitch-design
Command: npx skills add https://github.com/Ayoub-ouederni/SENTINEL --skill stitch-design-ayoub-ouederni

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 project-level design system source of truth. ## 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 project screens and generates a .stitch/DESIGN.md file documenting palette, typography, components, and layout principles. - Generation & Editing Workflows: Routes requests to generate_screen_from_text for new screens or edit_screens for targeted adjustments, then downloads HTML and screenshots to .stitch/designs. - Use Case: Ask for a landing page for a fitness app, and the Skill produces a structured Stitch prompt with brand colors, generates the screen, and saves the assets locally for implementation. ## Quick Start Ask the agent to design a landing page for your app using Stitch, mentioning your preferred 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?

Describe the page you want, and the Skill enhances your prompt with professional UI/UX terminology, 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?

The edit-design workflow locates the screen via list_screens or get_screen, then calls edit_screens with a specific prompt describing the change, such as a new button color or added component. Updated assets are downloaded to overwrite previous local versions.

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

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

Does Stitch design generation require an existing project?

Yes, a Stitch projectId is required for generation and editing calls. The Skill can discover it using the list_projects tool, or a new project can be created with create_project if none exists.

When should I edit a screen instead of regenerating it?

Use edit_screens for targeted adjustments like color changes or adding a component, since it preserves the existing layout. Only regenerate from scratch when the fundamental page structure is wrong.