stitch-design

Generate UI screens from design briefs and route Stitch MCP workflows.

Updated Nov 7, 2025
One-click install
npx skills add https://github.com/phoenicisf/forex-analyzer --skill stitch-design-phoenicisf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-design
Source: https://github.com/phoenicisf/forex-analyzer/tree/main/.agents/skills/stitch-design
Command: npx skills add https://github.com/phoenicisf/forex-analyzer --skill stitch-design-phoenicisf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Stitch design teams often struggle to translate vague client briefs into precise, token-driven prompts and consistent design-system outputs. This skill provides an end-to-end workflow to translate loose ideas into structured prompts, synthesize tokens into a .stitch/DESIGN.md, and route tasks to the appropriate Stitch MCP pipelines to maintain consistency across screens.

Core Features & Use Cases

  • Prompt Enhancement: transforms vague intents into structured prompts with UI/UX terminology and design-system context.
  • Design System Synthesis: analyzes existing Stitch projects to create a .stitch/DESIGN.md "source of truth" for tokens, colors, and typography.
  • Workflow Routing: intelligently route requests to specialized generation or editing workflows (text-to-design, edit-design) based on intent.
  • Asset Management: automatically download generated HTML and screenshots to the project's .stitch/designs directory for versioning and reference.

Quick Start

Describe your design goal in a sentence to generate a new Stitch screen.

Frequently Asked Questions about stitch-design

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

FAQPage Schema
How do I generate high-fidelity UI screens from vague design briefs?

To generate UI screens from vague briefs, use prompt enhancement to restructure loose ideas into structured prompts with UI/UX terminology. This process synthesizes design tokens and routes tasks to text-to-design workflows, producing consistent, high-fidelity outputs.

What is a design-system source of truth and how does it manage tokens?

A design-system source of truth, stored as a .stitch/DESIGN.md file, centralizes project tokens, colors, and typography. It synthesizes existing project elements to maintain strict visual consistency across multiple generated UI screens.

How do I route design intents to different Stitch MCP workflows?

Workflow routing analyzes your design intent and automatically directs the task to specialized text-to-design generation or edit-design pipelines. This intelligent routing ensures requests match the correct processing workflow for optimal results.

Can I automatically download generated HTML and screenshots into a specific directory?

Yes, asset management automatically downloads generated HTML and screenshots directly into the project's .stitch/designs directory. This ensures deterministic asset storage for reliable versioning and visual reference.

Does this workflow routing approach require existing design tokens to function?

No, it can synthesize a design system from existing Stitch projects or generate token-driven prompts from scratch. It transforms vague intents into structured contexts, making it suitable for new and existing UI projects.