# Stitch::manage Design System

> Gestiona design systems en Stitch usando herramientas MCP: recupera assets, crea/actualiza design systems y los aplica a pantallas.

Fuente: https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-manage-design-system
Markdown: https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-manage-design-system.md

Repositorio: https://github.com/google-labs-code/stitch-skills
Autor: google-labs-code
Licencia: Apache-2.0
Actualizado: hace 3 meses
Coste de contexto: 38 tok instalada, 1.4k tok al activarse, 3.2k tok con todos los archivos del bundle
Bundle: 3 archivos, 13 KB
Permisos que pide: stitch*:*, bash, read, write, web_fetch

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add google-labs-code/stitch-skills --skill manage-design-system --agent claude-code
# Cursor
npx -y skills add google-labs-code/stitch-skills --skill manage-design-system --agent cursor
# Codex
npx -y skills add google-labs-code/stitch-skills --skill manage-design-system --agent codex
# Gemini CLI
npx -y skills add google-labs-code/stitch-skills --skill manage-design-system --agent gemini
# Windsurf
npx -y skills add google-labs-code/stitch-skills --skill manage-design-system --agent windsurf
# Cline
npx -y skills add google-labs-code/stitch-skills --skill manage-design-system --agent cline
```

## Qué hace

- Recupera metadatos y assets de pantallas Stitch via list_projects, list_screens y get_screen
- Genera el archivo DESIGN.md a partir de pantallas existentes o de una descripción del usuario
- Sube DESIGN.md a Stitch con upload_to_stitch.py o el MCP tool upload_design_md
- Crea el design system con create_design_system_from_design_md y lo aplica a pantallas con apply_design_system
- Actualiza .stitch/metadata.json con projectId, título, pantallas y resumen del design system

## Cuándo usarla

- Necesitas crear una fuente de verdad del lenguaje de diseño de un proyecto Stitch
- Quieres extraer un design system a partir de pantallas existentes o de una descripción del usuario
- Necesitas aplicar un design system ya creado a pantallas de un proyecto Stitch

## Qué la activa

- "Crea un design system para mi proyecto Stitch a partir de la pantalla Home"
- "Genera un DESIGN.md con tema oscuro, azul y morado, bordes redondeados, fuente Inter"
- "Aplica el design system existente a todas las pantallas del proyecto"

## Antes de instalar

- Requiere acceso a las herramientas MCP de Stitch y, para la opción de subida por script, Python 3 con una API key válida.
- runs shell commands
- writes to your files

## Archivos

- SKILL.md — 6 KB
- examples/metadata.json — 546 B
- reference/tool-schema.md — 6 KB

## SKILL.md

Reproducido tal cual desde google-labs-code/stitch-skills bajo Apache-2.0. Esta sección es el documento original y está en inglés.

# Design-System

Create a "source of truth" for your project's design language to ensure
consistency across all future screens.

> [!NOTE]
> Refer to your system prompt for instruction on handling MCP tool prefixes for
> all tools mentioned in this skill (e.g., `get_screen`,
> `create_design_system_from_design_md`, `apply_design_system`).

## 📥 Retrieval

To analyze a Stitch project, you must retrieve metadata and assets using the
Stitch MCP tools:

1. **Project lookup**: Use `list_projects` to find the target `projectId`.
2. **Screen lookup**: Use `list_screens` for that `projectId` to find
   representative screens (e.g., "Home", "Main Dashboard").
3. **Metadata fetch**: Call `get_screen` for the target screen to get
   `screenshot.downloadUrl` and `htmlCode.downloadUrl`.
4. **Asset download**: Use `read_url_content` to fetch the HTML code.

## 🧠 Synthesis from Description

If you need to extract a design system from existing screens, use the `design-md` skill (in the `stitch-utilities` plugin).

If there are no existing screens (new project), or the user provides a direct description (e.g., "dark theme, blue and purple, rounded, Inter font"):

1. Map the user's vague terms to precise values using the design mappings (see `design-md` skill in `stitch-utilities` or `generate-design` skill).
2. Select concrete hex codes, font families, and roundness values.
3. Generate the `DESIGN.md` file (refer to the `design-md` skill in `stitch-utilities` for structure).
4. Proceed to the "Create or Update Design System in Stitch" step below.

## 📝 Output Structure

The `DESIGN.md` file should follow the structure defined in the `design-md` skill (in the `stitch-utilities` plugin).

## 🚀 Create or Update Design System in Stitch

After generating `.stitch/DESIGN.md`, make sure to also create or update the
design system in Stitch.

**Two-step design system creation:**

> [!WARNING]
> **Checkpoint — User Confirmation Required.**
> Before uploading, you **MUST** pause and ask the user for
> confirmation. Present a summary of the design system you are about to create
> (display name, key colors, fonts, and roundness) and wait for explicit approval
> before proceeding. Do **NOT** upload until the user confirms.

1. **Upload `DESIGN.md`**:
   - **Option A (Recommended - Uploader Script)**: Use the modified `upload-to-stitch` Python script which natively handles `.md` files. It base64-encodes the markdown file in-process and sends it to the `/v1/projects/{projectId}/screens:batchCreate` endpoint, bypassing output token limits.
     ```bash
     python3 stitch-skills/plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py \
       --project-id <PROJECT_ID> \
       --file-path /path/to/DESIGN.md \
       --api-key <API_KEY> \
       --generated-by <GENERATED_BY>
     ```
     Set `<GENERATED_BY>` to identify the skill or tool that produced the
     `DESIGN.md`. Use the calling skill name when invoked from another skill
     (e.g. `stitch::code-to-design`), or the agent/tool name for standalone
     use (e.g. `Gemini`, `Claude Code`). If omitted, the script defaults to
     `UserUploadedDesignMd`.

     This returns the `sourceScreen` ID and the `screenInstance` ID.
   - **Option B (Direct MCP Tool)**: If the `DESIGN.md` is small (under ~5KB), you can call the `upload_design_md` MCP tool directly, passing the base64-encoded design markdown content as `designMdBase64`.
2. **Create Design System**: Call the `create_design_system_from_design_md` tool immediately after the upload, passing the `projectId` and the `selectedScreenInstance` (containing the `id` and `sourceScreen` returned from the upload step).

Once the upload script and `create_design_system_from_design_md` have both completed,
Stitch holds the design tokens at the project level — you do NOT need to repeat
them in generation prompts.

## 🎨 Apply Design System to Screens

Use `apply_design_system` to apply a design system to existing screens.

> [!IMPORTANT]
> `selectedScreenInstances` must contain **only** `id` and `sourceScreen` — do
> NOT include position/dimension fields (`x`, `y`, `width`, `height`) or the
> request will fail with "invalid argument". Get the screen instance IDs from
> `get_project`.

```json
{
  "projectId": "...",
  "assetId": "...",
  "selectedScreenInstances": [
    {
      "id": "...",
      "sourceScreen": "projects/.../screens/..."
    }
  ]
}
```

**How to get the required IDs:**
1. Call `get_project` to retrieve `screenInstances` — each has an `id` and
   `sourceScreen`.
2. Call `list_design_systems` to retrieve the design system `name` (format:
   `assets/{assetId}`) — use the part after `assets/` as the `assetId`.
3. Filter out any instances with `type: "DESIGN_SYSTEM_INSTANCE"` — only pass
   real screens.

## 📋 Update Project Metadata

After writing `.stitch/DESIGN.md`, also create or update `.stitch/metadata.json`
to track the `projectId`, `title`, all known screens, and design system summary.
See [examples/metadata.json](examples/metadata.json) for the format.

## Schema Reference

See [reference/tool-schema.md](reference/tool-schema.md) for the full
`designSystem` object schema with all available options.

## 💡 Best Practices

Refer to the `design-md` skill (in the `stitch-utilities` plugin) for best practices on describing design elements.

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [google-labs-code](https://skillsagentes.com/creators/google-labs-code.md) — 15 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Stitch::react Components](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-components.md): Convierte diseños de Stitch en componentes modulares de Vite y React, o sincroniza/actualiza componentes React existentes con los últimos diseños de Stitch, usando red a nivel de sistema y validación basada en AST.
- [Stitch::react Native](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-native.md): Convierte diseños HTML de Stitch en componentes React Native, o sincroniza/actualiza componentes nativos existentes según los últimos diseños de Stitch, usando StyleSheet.
- [Stitch::extract Static Html](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-extract-static-html.md): Extrae HTML estático autocontenido de una app web o componentes React, inlineando CSS e imágenes, para capturar una vista o subirla a Stitch.
- [Stitch::code To Design](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-code-to-design.md): Convierte código frontend (Vite, React, Angular, Vue, etc.) en un Stitch Design encadenando extracción de HTML estático, extracción del sistema de diseño y subida de archivos.
- [Stitch::upload To Stitch](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-upload-to-stitch.md): Sube assets locales (imágenes, mockups, HTML extraído, markdown de diseño) a un proyecto de Stitch, útil cuando las llamadas MCP fallan o se truncan por límites de tokens en base64.

## Skills relacionadas

- [Design Review](https://skillsagentes.com/skills/garrytan/gstack/design-review.md): Ojo de diseñador para QA: detecta inconsistencias visuales, problemas de espaciado y jerarquía, patrones de "AI slop" e interacciones lentas — y luego los corrige.
- [Slides](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md): Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.
- [Ui Styling](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md): Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas.
- [Brand](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand.md): Voz de marca, identidad visual, frameworks de mensajería y gestión de assets para contenido de marca, tono, materiales de marketing y cumplimiento de estilo.
- [Image Generation](https://skillsagentes.com/skills/bytedance/deer-flow/image-generation.md): Se usa cuando el usuario pide generar, crear, imaginar o visualizar imágenes: personajes, escenas, productos o cualquier contenido visual. Admite prompts estructurados e imágenes de referencia.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)