stitch-design

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

1|Updated Apr 4, 2026
One-click install
npx skills add https://github.com/lagarcess/argus --skill stitch-design-lagarcess
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-design
Source: https://github.com/lagarcess/argus/tree/main/.agent/skills/stitch-design
Command: npx skills add https://github.com/lagarcess/argus --skill stitch-design-lagarcess

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Bridges vague design intent and inconsistent outputs to produce polished, consistent, production-ready UI screens and a maintainable project design system for Stitch-powered projects.

Core Features & Use Cases

  • Prompt Enhancement: Converts rough user prompts into structured, high-fidelity instructions using UI/UX terminology and design system tokens.
  • Design System Synthesis: Analyzes project screens and generates a .stitch/DESIGN.md "source of truth" documenting palette, typography, components, and layout rules.
  • Screen Generation & Editing: Routes requests to specialized workflows to generate new screens or apply focused edits, then downloads HTML and screenshots to .stitch/designs.
  • Asset & Consistency Management: Ensures new screens follow the project's visual language and automates asset synchronization.

Quick Start

Use the stitch-design skill to enhance a brief landing page prompt, generate a screen in a Stitch project, and save the resulting HTML and screenshot to the project's .stitch/designs directory.

Frequently Asked Questions about stitch-design

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

FAQPage Schema
How do I convert vague prompts into high-fidelity UI screen designs?

To convert vague prompts into high-fidelity UI screen designs, this Skill enhances rough instructions into structured UI specifications using design system terminology and tokens. It bridges inconsistent outputs to generate polished, production-ready screens.

How does a design system synthesis workflow maintain UI consistency?

A design system synthesis workflow maintains UI consistency by analyzing project screens and generating a `.stitch/DESIGN.md` source-of-truth file. This document captures palette, typography, components, and layout rules to ensure new screens follow the established visual language.

Do I need a Stitch MCP server and projectId to generate screens?

Yes, you need Stitch MCP server access and a projectId to generate screens. The workflow invokes tools like generate_screen_from_text and edit_screens to retrieve HTML and screenshots, then writes them directly to the `.stitch/designs` directory.

What is the best way to manage design assets for web and mobile projects?

The best way to manage design assets for web and mobile projects is to automate asset synchronization within a unified design system. This ensures new screens adhere to the project's visual language and maintains a centralized source of truth for components and layouts.

Can I edit existing screens and automatically save HTML and screenshots?

Yes, you can edit existing screens and automatically save HTML and screenshots. By routing requests to focused edit workflows, the system invokes MCP tools to apply changes, retrieves the updated assets, and writes them directly to `.stitch/designs`.