Compétences design-md
🎨

design-md

Sûr

Generar DESIGN.md para proyectos Stitch

Également disponible depuis: google-labs-code

Esta habilidad analiza proyectos de Stitch y genera automáticamente documentación de diseño semántica que sirve como fuente de verdad para el desarrollo consistente de UI.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "design-md". Usar habilidad design-md en el proyecto Colección de Muebles

Résultat attendu:

Sistema de Diseño: Colección de Muebles

## 1. Tema Visual y Atmósfera
Cálido, acogedor y minimalista con un toque orgánico. El diseño equilibra el espacio en blanco limpio con elementos naturales.

## 2. Paleta de Colores y Roles
- Arena Cálida (#F5E6D3): Fondo principal para tarjetas
- Bosque Profundo (#2D4739): Acciones principales y encabezados
- Crema Suave (#FAF8F5): Fondo de página

## 3. Reglas de Tipografía
- Encabezados: Sans-serif, semi-bold, generoso espaciado entre letras
- Cuerpo: Sans-serif, peso regular, altura de línea cómoda

Utilisation de "design-md". Generar DESIGN.md para proyecto de Aplicación Móvil

Résultat attendu:

Sistema de Diseño: Aplicación Móvil

## 1. Tema Visual y Atmósfera
Elegante, moderno y funcional. Alto contraste para accesibilidad con profundidad sutil a través de elevación.

## 2. Paleta de Colores y Roles
- Azul Medianoche (#1A237E): Color principal de marca
- Verde Azulado Eléctrico (#00BFA5): Acento para CTAs
- Blanco Puro (#FFFFFF): Fondos limpios

## 4. Estilizado de Componentes
- Botones: Forma de píldora, color principal relleno, sombra sutil al pasar el cursor
- Tarjetas: Esquinas rounded-lg, fondo blanco, sombra muy suave

Audit de sécurité

Sûr
v1 • 2/24/2026

All static findings are false positives. The skill is a legitimate design documentation generator. Backticks detected are markdown code formatting, not shell execution. URLs are documentation references, not network exfiltration. The skill uses MCP tools to read project data and generate design documentation.

1
Fichiers analysés
179
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
100
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Documentación del Sistema de Diseño

Crear documentación de diseño completa para proyectos Stitch existentes para mantener la consistencia entre los miembros del equipo

Documentación de Incorporación

Generar documentos de referencia de diseño claros para nuevos miembros del equipo que se unen a un proyecto basado en Stitch

Preparación de Entrega de Diseño

Preparar especificaciones de diseño detalladas antes de entregar a los desarrolladores para implementación

Essayez ces prompts

Documentación Básica de Diseño 
Usa la habilidad design-md para analizar el proyecto Stitch y generar un archivo DESIGN.md que documente la paleta de colores, tipografía y estilos de componentes.
Sistema de Diseño Completo 
Analiza el proyecto Stitch [PROJECT_NAME] usando la habilidad design-md. Extrae todos los tokens de diseño, documenta la atmósfera y el tema visual, y crea un DESIGN.md completo.
Enfoque en Componentes 
Usa la habilidad design-md para analizar el proyecto Stitch y enfócate en documentar los estilos de los componentes de botón, tarjeta e input. Genera las secciones relevantes para DESIGN.md.
Exportación de Tokens de Diseño 
Aplica la habilidad design-md para extraer todos los valores de color, configuración de tipografía y tokens de espaciado del proyecto Stitch. Salidalos en formato DESIGN.md con nombres semánticos.

Bonnes pratiques

  • Usar nombres descriptivos y evocadores para los colores en lugar de términos genéricos como 'azul' o 'verde'
  • Incluir siempre el rol funcional de cada elemento de diseño en la documentación
  • Referenciar la Guía de Prompting Efectivo de Stitch para terminología consistente

Éviter

  • Usar nombres de clases técnicas sin traducirlos a lenguaje descriptivo
  • Omitir códigos hexadecimales y confiar únicamente en nombres descriptivos
  • No documentar el 'por qué' detrás de las decisiones de diseño

Foire aux questions

¿Qué es Stitch?
Stitch es una herramienta de diseño que te permite crear UI describiendo lo que quieres. Usa Descripciones Visuales respaldadas por valores de color específicos para interpretar diseños.
¿Necesito experiencia en codificación para usar esta habilidad?
No, esta habilidad analiza proyectos Stitch existentes y genera documentación. Necesitas acceso a un proyecto Stitch con pantallas diseñadas.
¿Puede esta habilidad crear nuevos diseños?
No, esta habilidad documenta diseños existentes. No genera nueva UI. Usa Stitch directamente para crear nuevos diseños.
¿Qué formato usa la salida?
La salida es un archivo DESIGN.md en formato Markdown con secciones para tema visual, paleta de colores, tipografía, componentes y principios de diseño.
¿Funciona esta habilidad con cualquier herramienta de diseño?
No, esta habilidad funciona específicamente con proyectos Stitch. Requiere acceso al Servidor MCP de Stitch para recuperar datos del proyecto.
¿Qué tan detallada es la documentación generada?
La documentación incluye códigos de color con nombres semánticos, reglas de tipografía, detalles de estilizado de componentes y principios de diseño. El nivel de detalle depende de la riqueza del proyecto fuente.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/design-md

Réf

main

Structure de fichiers

📄 SKILL.md