Ir a la guía de uso
create-design-mdpor Julien Thibeaut

Create Design MD Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: crea o actualiza un DESIGN.md desde un repositorio de producto existente o sitio web público.

  • Marca y sistemas de diseño
  • DESIGN.md
ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md
--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document
Encabezados y materia preliminar leídos del archivo original el 14 de septiembre de 2026 · 16 176 caracteres completos

01 Qué hace

Qué hace el skill create-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

Convierte un producto existente en un contrato de diseño escrito. En el modo de repositorio, audita los tokens, temas, primitivas compartidas y rutas renderizadas de un producto local y escribe DESIGN.md en la raíz de ese producto; en el modo URL, reconstruye un borrador a partir del DOM, los estilos computados y las hojas de estilo cargadas en anchos de escritorio y móvil.

Ambos modos comparten un único pipeline de evidencia — rol, valor, fuente, alcance, recurrencia, confianza — y un único esquema de tokens plano, con destinos de exportación css-tailwind, json-tailwind o dtcg. Los valores solo se conservan si una fuente rectora los nombra o superan una verificación de tres pruebas, y el documento no se publica hasta que el lint y la exportación tengan éxito. No cambia nada excepto DESIGN.md.

Qué produce

  • Un borrador reconstruido de DESIGN.md escrito en el espacio de trabajo actual en modo URL, etiquetado como borrador.
  • Un informe que enumera el modo y el producto o URL auditado, las fuentes rectoras utilizadas, y los conflictos o áreas no respaldadas excluidas del documento.
  • Los resultados finales de lint y exportación, que deben aprobarse ambos antes de que se devuelva el documento.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Elegir el Modo

    Modo de repositorio cuando hay disponible un repositorio de producto local, escribiendo DESIGN.md en la raíz de ese producto; modo URL cuando solo se proporciona una URL pública, produciendo un borrador reconstruido en el espacio de trabajo actual.

  2. 02
    Recopilar Evidencia y Registrar la Procedencia

    Cada candidato se registra con su fuente, alcance y recurrencia antes de normalizar nada, de modo que ambos modos alimentan el mismo pipeline de registro.

  3. 03
    Normalizar dentro del Esquema DESIGN.md

    Los candidatos que son inciertos, locales sin un contrato, o no relevantes para la implementación se descartan; el resto se mapea al esquema de tokens plano canónico.

  4. 04
    Bloquear el Borrador Detrás de la Validación

    El markdown solo se escribe después de que el frontmatter analizado pase las verificaciones de forma, de modo que la prosa nunca se redacta primero y se adapta al YAML después.

  5. 05
    Lint y Exportación

    Primero se ejecuta el linting estructural, luego una exportación de compatibilidad en el destino seleccionado, y cada categoría poblada debe aparecer en la salida.

  6. 06
    Informar el Modo, las Fuentes y las Brechas

    El informe indica el modo y el producto o URL auditado, las fuentes rectoras utilizadas, cualquier elemento omitido por falta de respaldo, y los resultados de lint y exportación.

02 Encuentra tu caso de uso

Cuándo Usar el Skill create-design-md

Usa el skill create-design-md en Claude Code o Codex cuando el trabajo sea de marca y sistema de diseño de este tipo. El ajuste y los límites que siguen están tomados del archivo propio del skill.

Buen caso de uso

  • Documentar el lenguaje de diseño de una interfaz y reconstruir su sistema visual a partir de la evidencia actual en el código base.
  • Dar a los agentes de código un contexto de UI persistente en lugar de repetir decisiones de diseño en cada tarea.
  • Un sitio público sin fuente disponible, donde un borrador reconstruido a partir del DOM, los estilos computados y el CSS cargado es aceptable.

Conozca los límites

  • Editar el código fuente del producto, las dependencias o la configuración para que coincidan con el diseño documentado — solo el archivo DESIGN.md está dentro del alcance.
  • Leer nombres de tokens internos, propiedad de componentes o intención no documentada a partir de un sitio web en vivo: la evidencia de la URL no puede establecer eso.
  • Trabajar sin inspección de navegador renderizada; se deben solicitar capturas de pantalla o archivos fuente en lugar de inferir a partir del copy o el HTML.
  • Volcar cada token o componente descubierto — los inventarios exhaustivos están explícitamente fuera del alcance.

Qué proporcionar

  • Qué producto, si el repositorio incluye variosEl usuario debe indicar el producto desplegable que se está documentando; si la titularidad es ambigua, el skill pregunta antes de escribir.
  • Una URL pública más acceso al navegador renderizadoEl modo URL inspecciona el DOM, los estilos calculados y las hojas de estilo cargadas públicamente en anchos de escritorio y móvil; las capturas de pantalla por sí solas no permiten establecer valores exactos.
  • Un destino de exportación no predeterminado, si lo hayLa salida de URL usa css-tailwind por defecto salvo que el usuario especifique otro destino, ya que los nombres de token deben seguir siendo válidos para ese destino.

03 Dentro del skill

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

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Tocar Solo el Documento

    El modo repositorio no debe cambiar el código fuente del producto, las dependencias, la configuración ni los archivos generados, y no debe promover patrones de implementación accidentales a decisiones de diseño.

  2. Preferir la Evidencia del Repositorio

    El modo repositorio se elige siempre que haya código fuente disponible; una URL proporcionada puede verificar la presentación renderizada, pero nunca sustituye la evidencia del repositorio.

  3. Un Esquema, Solo Formas de Mapeo

    Los grupos de tokens son mapeos, nunca secuencias, y ambos modos deben usar los mismos nombres de token planos, sin introducir un segundo esquema.

  4. Elegir el Destino de Exportación Antes de Escribir

    css-tailwind para Tailwind v4, json-tailwind para Tailwind v3 y dtcg en cualquier otro caso; los nombres de token deben ser válidos para el destino elegido.

  5. Tres Pruebas para las Afirmaciones en Modo URL

    Una afirmación en modo URL necesita observación, fundamento y consecuencia; si falta alguna prueba, la afirmación se omite en lugar de suponerla.

  6. Emitir Solo Nombres de Token Válidos para regex

    Todo nombre de token emitido debe coincidir con ^[a-zA-Z0-9][a-zA-Z0-9-]*$; cualquier clave que no lo cumpla se rechaza y se reescribe.

  7. Normalizar un Único Token de Nivel de Grupo

    Un token de origen aislado como --radius se convierte en rounded.base; sm, md, lg y xl nunca se derivan de clases de utilidad ni de valores repetidos.

  8. Sin Publicación tras una Validación Fallida

    El documento nunca se devuelve mientras el lint o la exportación fallen, y una categoría poblada que falte en la exportación se trata como un fallo del esquema.

04 Ponlo a trabajar

Instalar create-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.

Agregar create-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/ibelick/ui-skills --skill create-design-md

Forma genérica de la CLI skills para skills/create-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

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

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

  • Ejecute exactamente una exportación de compatibilidad en el destino seleccionado anteriormente e inspeccione la salida.
  • Para css-tailwind, confirme que los colores se asignan a --color-, la familia a --font-, el tamaño a --text-, el redondeo a --radius- y el espaciado a --spacing-; un bloque de tipografía poblado que no emita ni --font- ni --text-* significa que el documento debe reescribirse.
  • Antes de guardar, vuelva a leer el frontmatter analizado y autorrechace los elementos hijos de tipografía escalares o las claves rounded que no estén presentes en la fuente que rige.
  • Al actualizar un documento existente, conserva el contenido original temporalmente y compáralo con el archivo nuevo, restaurando cualquier decisión aceptada que se haya eliminado.
  • Comprueba la especificación instalada antes de codificar los modos de tema, y recurre a una tabla de Temas solo si los modos no son compatibles.

En OpenDesign importa create-design-md desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónalo en la barra superior.

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.

Repository
github.com/ibelick/ui-skills Rama main
Archivo de skill
skills/create-design-md/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 79081ab
License
MIT De LICENSE.
Estrellas del repositorio
8.402 Instantánea de GitHub tomada el 14/09/2026 para el repositorio completo ibelick/ui-skills, que contiene 5 skills en este catálogo. No es una calificación ni un recuento de uso para create-design-md.
Verificado por OpenDesign
14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

  1. LímitesSolo cambios en DESIGN.md; sin esquemas en competencia, sin volcar todos los tokens descubiertos.
  2. 1. Elige el modoModo de repositorio frente a modo de URL, qué puede demostrar cada uno y cuándo preguntar primero.
  3. Canal de evidencia compartidoCanal de registro de seis pasos y filtros de omisión que ambos modos deben respetar.
  4. 2. Rastrea la evidenciaOrden de inspección para repositorios; lista de muestreo, pruebas y libro de evidencia para URL.
  5. 3. Decide qué correspondeDefinición del esquema, elección del destino de exportación, gestión de temas y qué puede afirmar el texto.
  6. 4. Redacta el documentoFrontmatter mínimo, orden permitido de secciones y qué eliminar antes de guardar.
  7. 5. ValidaLint, una exportación, comprobaciones de categoría y comparación de un documento actualizado.
  8. 6. InformaQué devolver: modo, objetivo auditado, fuentes, omisiones, resultados de validación.
La descripción propia del Skill
"Crea o actualiza un DESIGN.md desde un repositorio de producto existente o sitio web público. Úsalo cuando se pida documentar el lenguaje de diseño de una interfaz, reconstruir su sistema visual, extraer tokens de diseño y orientación de la evidencia actual, o dar a los agentes de código contexto de UI persistente. No modifiques el código fuente del producto ni promuevas patrones de implementación accidentales a decisiones de diseño."

Descripción de front-matter desde SKILL.md. El archivo completo tiene aproximadamente 16.176 caracteres. Lea el archivo completo en GitHub.

Create Design MD

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

Descarga OpenDesign, importa create-design-md desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows