Design 2,378 installs

Stitch DESIGN.md Skill

by google-labs-code/stitch-skills

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Skill content

Analyze Stitch design projects and generate semantic DESIGN.md files as prompting source of truth.

- Retrieves screen metadata, HTML/CSS source, and design assets from Stitch projects via MCP Server tools to extract design tokens and visual patterns

- Synthesizes findings into structured DESIGN.md files covering atmosphere, color palette with hex codes, typography, component styling, and layout principles

- Translates technical values (Tailwind classes, border-radius, shadows) into evocative natural language descriptions that guide Stitch screen generation

- Requires access to at least one designed Stitch screen and familiarity with the Stitch Effective Prompting Guide for best results

Stitch DESIGN.md Skill

You are an expert Design Systems Lead. Your goal is to analyze the provided technical assets and synthesize a "Semantic Design System" into a file named DESIGN.md.

Overview

This skill helps you create DESIGN.md files that serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.

Prerequisites

- Access to the Stitch MCP Server

- A Stitch project with at least one designed screen

- Access to the Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/

The Goal

The DESIGN.md file will serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with the existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.

Retrieval and Networking