stitch-design

Convert vague UI intent into Stitch screens and design systems.

2|Updated Apr 2, 2026

Search Tags:#ui/ux #mcp #design-system #stitch #prompt-enhancement #screen-generation #screen-editing

Ready to run

npx skills add https://github.com/cassioalexandre/agf --skill stitch-design-cassioalexandre

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: stitch-design
Source: https://github.com/cassioalexandre/agf/tree/main/.agents/skills/stitch/stitch-design
Command: npx skills add https://github.com/cassioalexandre/agf --skill stitch-design-cassioalexandre

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Users often struggle to translate vague UI ideas into consistent, high-fidelity screens that match an existing design system.

Core Features & Use Cases

Prompt Enhancement: Converts rough intent into structured, Stitch-optimized UI/UX prompts using design-system context.
Design System Synthesis: Creates and updates a project source of truth at .stitch/DESIGN.md by analyzing Stitch screens.
Workflow Routing: Selects the right generation/edit path for new designs vs targeted edits vs design-system updates.
Asset Management: Downloads generated HTML and screenshots into .stitch/designs for local inspection and iteration.

Quick Start

Generate a premium screen by asking your agent: "Design a premium landing page for a mountain resort with a focus on serene luxury and glassmorphism, and keep it consistent with my .stitch/DESIGN.md."

Frequently Asked Questions about stitch-design

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

FAQPage Schema

How do I turn vague UI ideas into consistent design system screens?▼

To turn vague UI ideas into consistent design system screens, this Skill enhances your rough prompts using design-system context, routing them through Stitch MCP to generate high-fidelity HTML and screenshots locally. It ensures new designs match existing project standards.

How do I maintain a design system source of truth for Stitch screens?▼

To maintain a design system source of truth for Stitch screens, this Skill synthesizes and updates a `.stitch/DESIGN.md` file by analyzing your generated screens. This creates a consistent reference for future UI generation and targeted edits.

Can I edit specific parts of an existing Stitch screen without regenerating the whole layout?▼

Yes, you can edit specific parts of an existing Stitch screen without regenerating the whole layout. The Skill uses workflow routing to distinguish between new prompt-to-design generation and targeted screen editing, applying changes only where needed.

Do I need the Stitch MCP tool to generate UI from prompts?▼

Yes, you need the Stitch MCP tool to generate UI from prompts. The Skill requires Stitch MCP tool routing to process design-system-aware prompt enhancements, generate screens, and download the resulting HTML and screenshots to your local `.stitch/designs` directory.

What is the best way to download generated Stitch HTML and screenshots locally?▼

The best way to download generated Stitch HTML and screenshots locally is through this Skill's asset management feature, which automatically saves output files into a local `.stitch/designs` directory for immediate inspection and iteration.

Why are my generated UI designs inconsistent with my existing project style?▼

Generated UI designs become inconsistent with existing project style when lacking a centralized design reference. This Skill solves this by applying design-system-aware prompt enhancement and synthesizing a `.stitch/DESIGN.md` file to guide all future Stitch screen generation.