Skip to content
cccskills
FreePublished on GitHub

stitch-mcp-create-design-system-from-design-md

Creates a Stitch Design System from a DESIGN.md that was already uploaded with stitch-mcp-upload-design-md. Second half of a two-step pair — the upload must happen first.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md3.7 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Stitch MCP — Create Design System from DESIGN.md

Turns an uploaded DESIGN.md into a real Stitch Design System and displays it in the UI. This is step two of a pair — stitch-mcp-upload-design-md must have run first, because this tool consumes the screen instance that upload created.

Calling it without a prior upload fails: there's no screen instance to point at.

Critical prerequisite

Only use this skill when the user explicitly mentions "Stitch" in their request. Never trigger Stitch operations silently during regular conversation.

When to use

  • Immediately after stitch-mcp-upload-design-md returns — always, as a pair
  • Never on its own

Step 1: Confirm you have the screen instance

You need two values from the upload step. If you didn't capture them, fetch them now with get_project (note: this one takes the projects/ prefix):

{
  "name": "get_project",
  "arguments": { "name": "projects/3780309359108792857" }
}

Take the newest entry in screenInstances and read off both id and sourceScreen.

Step 2: Call the MCP tool

{
  "name": "create_design_system_from_design_md",
  "arguments": {
    "projectId": "3780309359108792857",
    "selectedScreenInstance": {
      "id": "a1b2c3d4e5f6",
      "sourceScreen": "projects/3780309359108792857/screens/98b50e2ddc9943efb387052637738f61"
    },
    "deviceType": "DESKTOP"
  }
}

Three different ID formats in one call. This is the single easiest place to get it wrong:

FieldFormatExample
projectIdnumeric only, no prefix3780309359108792857
selectedScreenInstance.idscreen instance id — not the source screen ida1b2c3d4e5f6
selectedScreenInstance.sourceScreenfull resource path, both prefixesprojects/.../screens/...

deviceType is optional: MOBILE, DESKTOP, TABLET, or AGNOSTIC. Omit it and Stitch decides.

Step 3: Confirm and capture the asset id

On success you get back a design system with an asset id in assets/NUMERIC_ID form. Store both forms: apply_design_system wants the bare numeric part, generate_screen_from_text's designSystem param wants the full assets/NUMERIC_ID string.

Announce it:

"Design system created from your DESIGN.md (asset 15996705518239280238). Want me to apply it to existing screens, or use it for the next generation?"

Step 4: Put it to work

  • Apply to existing screens → stitch-mcp-apply-design-system
  • Use for new screens → pass designSystem: "assets/15996705518239280238" to generate_screen_from_text

ID format rules (critical — different tools need different formats)

ToolID format required
create_design_system_from_design_mdNumeric projectId + the screen-instance pair above
upload_design_mdNumeric only: 3780309359108792857
apply_design_systemNumeric assetId, no assets/ prefix
generate_screen_from_textdesignSystem does take the assets/ prefix
get_projectFull path: projects/3780309359108792857

Yes — apply_design_system wants the bare asset id while generate_screen_from_text wants it prefixed. Same identifier, two formats, depending on which tool you hand it to.

Integration

  • Preceded by stitch-mcp-upload-design-md, always
  • Followed by stitch-mcp-apply-design-system or a generation call
  • List what already exists with stitch-mcp-list-design-systems

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus management, and screen reader support.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte transitions. Always respects prefers-reduced-motion.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and Stitch-ready prompt snippets. Use this before stitch-loop or any multi-page build to establish design consistency.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom properties for theming, dark mode via prefers-color-scheme, mobile-first responsive, zero framework dependencies. Works in browsers, WebViews, Capacitor, and Ionic. Only the Stitch route needs an API key.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

See all skills by gabelul

Report a problem with this skill