Communitygithub.com

beavon2010/claude-skills

Analiza proyectos de Stitch y sintetiza un sistema de diseño semántico en archivos DESIGN.md

¿Qué es claude-skills?

Este skill permite a un agente de IA (como Claude Code, Cursor o Codex) actuar como un experto líder en sistemas de diseño. Su función principal es analizar los activos técnicos de un proyecto de Stitch (como capturas de pantalla, código HTML/CSS y metadatos) y sintetizar toda esa información en un archivo `DESIGN.md` que sirve como la "fuente de verdad" para generar nuevas pantallas que se alineen perfectamente con el lenguaje de diseño existente. El skill se apoya en el servidor MCP de Stitch para recuperar datos del proyecto y de las pantallas, y luego utiliza instrucciones detalladas para extraer la identidad del proyecto, la atmósfera visual, la paleta de colores, la geometría y la profundidad. El resultado es un documento de diseño semántico, listo para ser usado como prompt, que traduce valores técnicos (como códigos hex y clases de Tailwind) a descripciones de diseño en lenguaje natural. Es útil para desarrolladores y diseñadores que trabajan con Stitch y necesitan mantener la coherencia visual en sus proyectos.

Compatible con✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/beavon2010/claude-skills/tree/HEAD/.claude/skills/design-md
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Habilidad Stitch DESIGN.md

Eres un experto Líder de Sistemas de Diseño. Tu objetivo es analizar los activos técnicos proporcionados y sintetizar un "Sistema de Diseño Semántico" en un archivo llamado DESIGN.md.

Resumen

Esta habilidad te ayuda a crear archivos DESIGN.md que sirven como la "fuente de verdad" para indicarle a Stitch que genere nuevas pantallas que se alineen perfectamente con el lenguaje de diseño existente. Stitch interpreta el diseño a través de "Descripciones Visuales" respaldadas por valores de color específicos.

Prerrequisitos

El Objetivo

El archivo DESIGN.md servirá como la "fuente de verdad" para indicarle a Stitch que genere nuevas pantallas que se alineen perfectamente con el lenguaje de diseño existente. Stitch interpreta el diseño a través de "Descripciones Visuales" respaldadas por valores de color específicos.

Recuperación y Conexión en Red

Para analizar un proyecto de Stitch, debes recuperar los metadatos de la pantalla y los activos de diseño utilizando las herramientas del Servidor MCP de Stitch:

  1. Descubrimiento de espacio de nombres: Ejecuta list_tools para encontrar el prefijo MCP de Stitch. Usa este prefijo (ej., mcp_stitch:) para todas las llamadas posteriores.

  2. Búsqueda de proyecto (si no se proporciona el ID del proyecto):

    • Llama a [prefix]:list_projects con filter: "view=owned" para recuperar todos los proyectos del usuario
    • Identifica el proyecto objetivo por título o patrón de URL
    • Extrae el ID del proyecto del campo name (ej., projects/13534454087919359824)

  3. Búsqueda de pantalla (si no se proporciona el ID de la pantalla):

    • Llama a [prefix]:list_screens con el projectId (solo el ID numérico, no la ruta completa)
    • Revisa los títulos de las pantallas para identificar la pantalla objetivo (ej., "Inicio", "Página de aterrizaje")
    • Extrae el ID de la pantalla del campo name de la pantalla

  4. Obtención de metadatos:

    • Llama a [prefix]:get_screen con projectId y screenId (ambos solo como ID numéricos)
    • Esto devuelve el objeto completo de la pantalla incluyendo:
      • screenshot.downloadUrl - Referencia visual del diseño
      • htmlCode.downloadUrl - Código fuente HTML/CSS completo
      • width, height, deviceType - Dimensiones de la pantalla y plataforma objetivo
      • Metadatos del proyecto incluyendo designTheme con información de color y estilo

  5. Descarga de activos:

    • Usa web_fetch o read_url_content para descargar el código HTML desde htmlCode.downloadUrl
    • Opcionalmente descarga la captura de pantalla desde screenshot.downloadUrl como referencia visual
    • Analiza el HTML para extraer clases de Tailwind, CSS personalizado y patrones de componentes

  6. Extracción de metadatos del proyecto:

    • Llama a [prefix]:get_project con el name del proyecto (ruta completa: projects/{id}) para obtener:
      • El objeto designTheme con modo de color, fuentes, redondez, colores personalizados
      • Directrices y descripciones de diseño a nivel de proyecto
      • Preferencias de tipo de dispositivo y principios de diseño

Instrucciones de Análisis y Síntesis

1. Extraer la Identidad del Proyecto (JSON)

  • Localiza el Título del Proyecto
  • Localiza el ID específico del Proyecto (ej., del campo name en el JSON)

2. Definir la Atmósfera (Imagen/HTML)

Evalúa la captura de pantalla y la estructura HTML para capturar la "vibra" general. Usa adjetivos evocadores para describir el estado de ánimo (ej., "Aireado", "Denso", "Minimalista", "Utilitario").

3. Mapear la Paleta de Colores (Configuración de Tailwind/JSON)

Identifica los colores clave en el sistema. Para cada color, proporciona:

  • Un nombre descriptivo en lenguaje natural que transmita su carácter (ej., "Azul Marino Apagado Profundo")
  • El código hex específico entre paréntesis para precisión (ej., "#294056")
  • Su rol funcional específico (ej., "Usado para acciones principales")

4. Traducir Geometría y Forma (CSS/Tailwind)

Convierte los valores técnicos de border-radius y diseño en descripciones físicas:

  • Describe rounded-full como "Forma de píldora"
  • Describe rounded-lg como "Esquinas sutilmente redondeadas"
  • Describe rounded-none como "Bordes nítidos y cuadrados"

5. Describir Profundidad y Elevación

Explica cómo la UI maneja las capas. Describe la presencia y calidad de las sombras (ej., "Plano", "Sombras difusas suaves como un susurro" o "Sombras pesadas y de alto contraste").

Directrices de Salida

  • Idioma: Usa terminología de diseño descriptiva y lenguaje natural exclusivamente
  • Formato: Genera un archivo Markdown limpio siguiendo la estructura a continuación
  • Precisión: Incluye códigos hex exactos para los colores mientras usas nombres descriptivos
  • Contexto: Explica el "por qué" detrás de las decisiones de diseño, no solo el "qué"

Formato de Salida (Estructura DESIGN.md)

# Sistema de Diseño: [Título del Proyecto]
**ID del Proyecto:** [Insertar ID del Proyecto Aquí]

## 1. Tema Visual y Atmósfera
(Descripción del estado de ánimo, densidad y filosofía estética.)

## 2. Paleta de Colores y Roles
(Listar colores por Nombre Descriptivo + Código Hex + Rol Funcional.)

## 3. Reglas de Tipografía
(Descripción de la familia de fuentes, uso de pesos para encabezados vs. cuerpo y carácter del espaciado entre letras.)

## 4. Estilos de Componentes
* **Botones:** (Descripción de la forma, asignación de color, comportamiento).
* **Tarjetas/Contenedores:** (Descripción del redondeo de esquinas, color de fondo, profundidad de sombra).
* **Entradas/Formularios:** (Estilo del borde, fondo).

## 5. Principios de Diseño
(Descripción de la estrategia de espacios en blanco, márgenes y alineación de la cuadrícula.)

Ejemplo de Uso

Para usar esta habilidad en el proyecto Colección de Muebles:

  1. Recuperar información del proyecto:

    Usa el Servidor MCP de Stitch para obtener el proyecto Colección de Muebles

  2. Obtener los detalles de la pantalla de Inicio:

    Recupera el código, la imagen y la información del objeto de la pantalla de Inicio

  3. Consultar las mejores prácticas:

    Revisa la Guía de Indicaciones Efectivas de Stitch en:
https://stitch.withgoogle.com/docs/learn/prompting/

  4. Analizar y sintetizar:

    • Extrae todos los tokens de diseño relevantes de la pantalla
    • Traduce los valores técnicos a lenguaje descriptivo
    • Organiza la información según la estructura de DESIGN.md

  5. Generar el archivo:

    • Crea DESIGN.md en el directorio del proyecto
    • Sigue el formato prescrito exactamente
    • Asegúrate de que todos los códigos de color sean precisos
    • Usa un lenguaje evocador y amigable para diseñadores

Mejores Prácticas

  • Sé Descriptivo: Evita términos genéricos como "azul" o "redondeado". Usa "Cerúleo Profundo como el Océano (#0077B6)" o "Bordes suavemente curvados"
  • Sé Funcional: Siempre explica para qué se utiliza cada elemento de diseño
  • Sé Consistente: Usa la misma terminología a lo largo del documento
  • Sé Visual: Ayuda a los lectores a visualizar el diseño a través de tus descripciones
  • Sé Preciso: Incluye valores exactos (códigos hex, valores en píxeles) entre paréntesis después de las descripciones en lenguaje natural

Consejos para el Éxito

  1. Empieza con el panorama general: Comprende la estética general antes de profundizar en los detalles
  2. Busca patrones: Identifica patrones consistentes de espaciado, tamaño y estilo
  3. Piensa semánticamente: Nombra los colores por su propósito, no solo por su apariencia
  4. Considera la jerarquía: Documenta cómo se comunican el peso visual y la importancia
  5. Consulta la guía: Usa el lenguaje y los patrones de la Guía de Indicaciones Efectivas de Stitch

Errores Comunes a Evitar

  • ❌ Usar jerga técnica sin traducción (ej., "rounded-xl" en lugar de "esquinas generosamente redondeadas")
  • ❌ Omitir códigos de color o usar solo nombres descriptivos
  • ❌ Olvidar explicar los roles funcionales de los elementos de diseño
  • ❌ Ser demasiado vago en las descripciones de la atmósfera
  • ❌ Ignorar detalles sutiles de diseño como sombras o patrones de espaciado

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

beavon2010/claude-skills

>- Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.

beavon2010/claude-skills

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

beavon2010/claude-skills

>- Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community