83.3K+Descargar
Ir a la guía de uso
design-mdpor Google Labs

Design MD Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: analiza proyectos Stitch y escribe un DESIGN.md semántico.

  • Marca y sistemas de diseño
  • DESIGN.md
Descargar OpenDesignVer guía de uso
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
Encabezados de sección y metadatos leídos del archivo original el 14/09/2026 · 7.644 caracteres completos

01 Qué hace

Qué hace el skill design-md en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill convierte un proyecto de Stitch existente en un DESIGN.md que sirve como fuente de verdad para indicarle a Stitch que genere nuevas pantallas en el mismo lenguaje de diseño. Está pensado para diseñadores y desarrolladores con acceso a Stitch MCP y al menos una pantalla diseñada: el skill descubre el namespace de MCP, resuelve los IDs de proyecto y pantalla, obtiene el objeto de la pantalla junto con su HTML y captura de pantalla, y lee el designTheme del proyecto.

Luego documenta el tema visual y la atmósfera, los colores como nombres descriptivos con códigos hex y roles funcionales, la tipografía, los estilos de los componentes y los principios de layout, en un lenguaje de diseño evocador en lugar de valores técnicos crudos.

Qué produce

  • Un sistema de diseño en cinco partes que abarca el tema visual y la atmósfera, la paleta de colores con sus roles, las reglas de tipografía, los estilos de componentes para botones, tarjetas y campos de entrada, y los principios de layout.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Descubrir el Namespace de MCP

    Ejecute list_tools para encontrar el prefijo de Stitch MCP y luego reutilice ese prefijo en cada llamada posterior al servidor.

  2. 02
    Resolver Proyecto y Pantalla

    Liste los proyectos propios cuando no se proporcione un Project ID, luego liste las pantallas del ID de proyecto numérico y haga coincidir un título de pantalla como Home o Landing Page.

  3. 03
    Obtener el Objeto de la Pantalla y los Assets

    get_screen devuelve la captura de pantalla y las URL de descarga del HTML, las dimensiones de la pantalla, el tipo de dispositivo y el designTheme; después se descarga el HTML y se analiza para detectar clases de Tailwind y patrones de componentes.

  4. 04
    Leer el Design Theme a nivel de proyecto

    Una llamada a get_project con la ruta completa projects/{id} devuelve el objeto designTheme con el modo de color, las fuentes, la redondez y los colores personalizados.

  5. 05
    Sintetizar el Sistema Semántico

    Extraiga tokens de diseño de la pantalla, capture el ambiente general con adjetivos evocadores y traduzca los valores técnicos a un lenguaje descriptivo.

  6. 06
    Escribir DESIGN.md

    Cree DESIGN.md en el directorio del proyecto siguiendo exactamente el formato prescrito de cinco secciones.

02 Encuentra tu caso de uso

Cuándo usar el skill design-md

Usa el skill design-md en Claude Code o Codex cuando el trabajo sea de brand y design-system de este tipo. El alcance y límites abajo se toman del archivo propio del skill.

Buen caso de uso

  • Ya tiene un proyecto de Stitch que contiene al menos una pantalla diseñada y desea un sistema de diseño escrito extraído de ella.
  • Desea una fuente de verdad para indicarle a Stitch que genere nuevas pantallas que coincidan con un lenguaje de diseño existente.
  • Conoce el proyecto solo por su título o URL y desea que el skill encuentre el Project ID entre sus proyectos propios.
  • Desea que el ambiente se nombre mediante adjetivos evocadores en lugar de una repetición del CSS.

Conozca los límites

  • No puede ejecutarse sin el Stitch MCP Server y un proyecto de Stitch que ya tenga una pantalla diseñada.
  • Produce un sistema de diseño en Markdown, no pantallas nuevas; el DESIGN.md es la entrada para el prompting posterior en Stitch.
  • La jerga técnica sin traducir, como rounded-xl, se menciona explícitamente como un error que se debe evitar.
  • Omitir los códigos hexadecimales y conservar solo nombres de color descriptivos se señala como un fallo.

Qué proporcionar

  • Project ID (opcional)Si no se proporciona, el skill lista los proyectos propios y hace coincidir el objetivo por título o patrón de URL.
  • Screen ID (opcional)Si no se proporciona, el skill revisa los títulos de las pantallas para identificar la pantalla objetivo.
  • Stitch Effective Prompting GuideReferencia sobre el lenguaje y los patrones que debe usar el informe de diseño.

03 Dentro del skill

Reglas que el Skill design-md le da a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

  1. Solo IDs Numéricos

    Pase projectId y screenId como IDs numéricos, nunca como la ruta completa projects/{id}, excepto para get_project, que toma el nombre completo.

  2. Nunca un Color Desnudo

    Cada color recibe un nombre descriptivo en lenguaje natural, el código hexadecimal exacto entre paréntesis y su función, como Deep Muted Teal-Navy (#294056) usado para acciones primarias.

  3. Traduzca la Geometría, No la Cite

    Convierta los valores de border-radius y de diseño en descripciones físicas: rounded-full se convierte en Con forma de píldora, rounded-lg se convierte en Esquinas ligeramente redondeadas, rounded-none se convierte en Bordes afilados y cuadrados.

  4. Prohibir Vocabulario Genérico

    Evite términos como azul o redondeado; prefiera Cerúleo Azul Profundo (#0077B6) o Bordes suavemente curvados.

  5. Mantener la Estructura Prescrita

    El archivo comienza con el título del proyecto y el Project ID, seguido de cinco secciones numeradas: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles.

  6. Explicar el Por Qué, No Solo el Qué

    Incluya los valores exactos entre paréntesis después de la descripción, e indique siempre para qué se usa cada elemento de diseño.

  7. Mantener la Terminología Coherente

    Use la misma terminología en todo el documento para que el sistema de diseño se lea como un solo sistema.

04 Ponlo a trabajar

Instale design-md en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregue design-md a Claude Code, Codex o Su Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md

Formulario genérico de la CLI de skills para plugins/stitch-utilities/skills/design-md/SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de trabajo de marca y sistema de diseño

Adapta esta instrucción con tu propio contenido y restricciones, luego ejecútala en Claude Code o Codex.

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

Fuente: ejemplo de SKILL.md (textual).

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Confirme que el formato coincide exactamente con la estructura prescrita de DESIGN.md en lugar de una disposición improvisada.
  • Verifique que cada código de color sea correcto y que cada color conserve tanto un nombre descriptivo como su valor hexadecimal.
  • Verifique que se indique el rol funcional de cada elemento, no solo su apariencia.
  • Verifique que la sección de atmósfera sea específica y no vaga, y que no se hayan omitido las sombras ni el espaciado.

En OpenDesign design-md viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Rama main
Archivo de skill
plugins/stitch-utilities/skills/design-md/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 0337446
License
Apache-2.0 De LICENSE.
Estrellas del repositorio
8,304 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio google-labs-code/stitch-skills, que contiene 12 skills en este catálogo. No es una calificación ni un recuento de uso para design-md.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Descripción generalDefine DESIGN.md como la fuente única de verdad para dar prompts a nuevas pantallas de Stitch.
  2. Requisitos previosNecesita acceso a Stitch MCP, una pantalla diseñada y la guía de prompting.
  3. El ObjetivoReitera que Stitch lee descripciones visuales respaldadas por valores de color específicos.
  4. Recuperación y RedesSeis pasos: namespace, proyecto, pantalla, metadatos, descarga de assets, designTheme del proyecto.
  5. Instrucciones de Análisis y SíntesisExtraiga identidad, atmósfera, paleta de colores, geometría y elevación.
  6. Directrices de SalidaSolo lenguaje descriptivo, Markdown limpio, códigos hexadecimales exactos, explicar el por qué.
  7. Formato de Salida (Estructura de DESIGN.md)Esqueleto de Markdown de cinco secciones con plantilla para completar textualmente.
  8. Ejemplo de UsoRecorrido usando el proyecto Furniture Collection y su página Home.
  9. Buenas PrácticasSea descriptivo, funcional, coherente, visual y preciso.
  10. Consejos para el éxitoPrimero la visión general, buscar patrones, nombrar semánticamente, documentar la jerarquía.
  11. Errores comunes que evitarSin jerga sin traducir, sin códigos faltantes, sin descripciones vagas o incompletas.
La descripción propia del Skill
"Analiza proyectos de Stitch y sintetiza un sistema de diseño semántico en archivos DESIGN.md"

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 7,644 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill design-md

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué herramientas usa el skill para llegar a Stitch?

Declara las herramientas de stitch además de Read, Write y web_fetch. En la práctica, ejecuta list_tools primero para encontrar el prefijo MCP, y luego llama a list_projects, list_screens, get_screen y get_project con ese prefijo.

¿Qué obtengo exactamente al final?

Un archivo DESIGN.md creado en el directorio del proyecto, estructurado como título e ID del proyecto seguidos de secciones sobre tema visual y atmósfera, paleta de colores y roles, reglas de tipografía, estilos de componentes y principios de diseño. Está pensado para reutilizarse como fuente única de verdad al indicarle a Stitch nuevas pantallas.

¿Reemplaza hacer esto a mano?

Realiza la extracción y el borrador por usted, pero con un requisito de vocabulario específico: los colores obtienen nombres evocadores además de códigos hexadecimales exactos y roles funcionales, y los valores de radio se convierten en frases como Con forma de píldora o Bordes afilados y rectos en lugar de nombres de clases sin procesar. También le pide que explique el motivo detrás de cada decisión.

Design MD

Ejecute design-md en una marca real y una tarea de trabajo de design-system.

El skill design-md viene incluido dentro de OpenDesign. Descargue la aplicación, seleccione el skill en Plugins → Skills, pegue el prompt anterior y lea el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md