Ir a la guía de uso
design-systempor Alireza Rezvani

Design System Skill.

Una skill de Claude Code y Codex para marca y sistemas de diseño: captura la identidad de marca mediante un asistente de 10 preguntas para documentos y presentaciones posteriores.

  • Marca y sistemas de diseño
  • Sistema de diseño
alirezarezvani/claude-skills · markdown-html/skills/design-system/SKILL.mdSKILL.md
--- name: design-system description: Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output directory + syntax theme + TOC behavior + optional logo/company), validates body-text and link contrast against WCAG 2.2 AA, derives 12 CSS custom properties in HSL space, and stores the result for every markdown-html … --- ## When to invoke ## Onboarding question set (10 questions) ## Hard rules ## Derived 12-token palette ## Forcing-question library (Matt Pocock grill-with-docs pattern) ## Customization in use (worked example)
Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 11.234 caracteres completos

01 Qué hace

Qué hace el Skill design-system 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

El skill design-system es el propietario compartido de la marca dentro del plugin markdown-html. Captura la identidad de marca una sola vez mediante un asistente de incorporación de 10 preguntas —valores HEX primarios y de acento, Google Fonts para títulos y cuerpo, un estilo de diseño (editorial, técnico, minimalista o lúdico), directorio de salida predeterminado, tema de código, comportamiento del TOC y, de forma opcional, nombre de empresa y logotipo— y después valida el contraste del texto de cuerpo y de los enlaces conforme a WCAG 2.2 AA y deriva 12 propiedades personalizadas de CSS en el espacio HSL.

Tres herramientas de Python que solo usan la biblioteca estándar se encargan de la incorporación, la carga de la configuración y la validación de la paleta; la precedencia es proyecto sobre global sobre los valores predeterminados integrados. Todos los conversores (md-document, md-review, md-slides) leen la configuración guardada, así que cambiar un token cambia todos los documentos renderizados.

Qué produce

  • Un archivo de configuración que contiene la marca y la paleta derivada, escrito de forma global o dentro del proyecto.
  • Doce propiedades CSS personalizadas insertadas en el bloque de estilos de cada conversor, como --md-surface, --md-border, --md-link y --md-warn.
  • Un esquema JSON para la configuración, distribuido como un activo para validación.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Ejecutar la incorporación una vez

    El skill es el propietario de marca compartido para el plugin markdown-html: md-document, md-review y md-slides consumen todos la config que escribe, de modo que una sola ejecución aplica la marca a cada conversión.

  2. 02
    Responda las diez preguntas

    El asistente registra default_output_dir, el HEX primario y de acento, las fuentes de encabezado y cuerpo, design_style, code_theme, toc.behavior y, opcionalmente, company_name y logo_url.

  3. 03
    Deje que la validación controle el guardado

    brand_palette_validator.validate() se ejecuta después de cada cambio, por lo que el par se vuelve a comprobar en cada edición de campo en lugar de solo al final del asistente.

  4. 04
    Derivar los doce tokens

    derive_palette() calcula tokens como --md-surface en bg más o menos 4-6% de luminancia y --md-text-muted como rgba(text, 0.68), y los almacena en derived_palette dentro del mismo archivo de configuración.

  5. 05
    Resolver la configuración por precedencia

    config_loader.py es el loader importable que llama cada conversor antes de renderizar; combina los valores del proyecto, luego los globales y, por último, los predeterminados integrados, y respeta la variable de entorno de bypass.

  6. 06
    Anular o restablecer de forma no interactiva

    Más allá del asistente, onboard.py acepta --defaults, --set key=value, --scope project, --show y --reset, de modo que los campos de marca puedan modificarse o eliminarse sin volver a recorrer las preguntas.

02 Encuentra tu caso de uso

Cuándo usar el Skill design-system

Usa la skill design-system en Claude Code o Codex cuando el trabajo sea de marca y sistema de diseño de este tipo. La adecuación y los límites a continuación provienen del propio archivo de la skill.

Buen caso de uso

  • Un espacio de trabajo donde alguien pide convertir markdown a HTML por primera vez, por lo que la incorporación nunca se ha ejecutado.
  • Un repositorio que necesita una marca diferente al resto de su trabajo y no debe heredar la configuración global.
  • CI o una sesión efímera que necesita valores predeterminados sin intervención en lugar de diez preguntas interactivas.
  • Ya cuenta con al menos un HEX de marca que desea aplicar de forma coherente en las conversiones a HTML.
  • Quiere probar un color primario y de acento candidatos frente a WCAG antes de incorporarlos al config.

Conozca los límites

  • No es un sistema completo de design tokens como Style Dictionary o Theo; incluye doce tokens, no cien.
  • No aloja fuentes personalizadas: Google Fonts a través de CDN es la única fuente de tipografía.
  • No es un conjunto de auditoría de accesibilidad; axe-core o pa11y cubren eso, y el skill solo aplica el contraste.
  • No transforma el CSS existente: la paleta derivada se inyecta únicamente en el HTML recién generado.

Qué proporcionar

  • Directorio de salida predeterminadoUna ruta que debe permitir escritura; el valor predeterminado es ./markdown-html-out/ y un valor vacío o sin permiso de escritura bloquea el guardado.
  • HEX principal de marcaValidado con ^#?[0-9a-fA-F]{6}$; valor predeterminado #0A1628. La biblioteca de preguntas forzadas recomienda un HEX que ya utiliza, no un azul genérico.
  • HEX de acento, o en blancoDéjelo en blanco en una primera ejecución para que la derivación produzca un color complementario; especifíquelo solo si un kit de marca indica uno.
  • Nombres de fuentes para títulos y cuerpo de textoNombres de Google Font elegidos entre 12 opciones seguras predeterminadas, con Inter como predeterminada para ambos roles.
  • Nombre de empresa y URL de logotipo opcionalesAmbos toman por defecto cadenas vacías; la URL del logotipo puede quedar en blanco y se incorpora en base64 en el momento de renderizar.

03 Dentro del skill

Reglas que el skill design-system 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. El contraste debe pasar, o nada se guarda

    El texto del cuerpo sobre el fondo y los enlaces sobre el fondo deben alcanzar ambos 4.5:1 según WCAG 2.2 §1.4.3.

  2. El directorio de salida debe tener permisos de escritura

    El asistente sube hasta un ancestro existente y comprueba os.access(parent, os.W_OK); una ruta vacía o sin permisos de escritura finaliza con el código 3, y output_path_resolver.py aplica la misma regla en cada conversión.

  3. La personalización debe cambiar el resultado

    Los campos meramente decorativos no cumplen con la disciplina de diseño: cada consumidor tiene que leer la configuración y renderizar de forma diferente cuando cambian design_style, brand.primary, code_theme o toc.behavior.

  4. La precedencia es fija

    La configuración del proyecto prevalece sobre la configuración global, que a su vez prevalece sobre los valores predeterminados integrados, y la fusión profunda conserva las claves anidadas, de modo que sobrescribir brand.primary en un proyecto no elimina typography.heading_font de la configuración global.

  5. El bypass es solo para ejecuciones sin interfaz

    MARKDOWN_HTML_NO_CONFIG=1 se usa en CI, contenedores de prueba efímeros y bucles de evaluación; nunca lo active silenciosamente para un usuario interactivo, que se preguntará adónde fueron sus tokens.

  6. Nunca use un color primario vibrante como fondo

    Un color primario de marca saturado usado directamente como brand.bg produce un contraste de texto bajo; pertenece al slot de acento en su lugar.

  7. Manténgase Dentro de la Taxonomía de 12 tokens

    La semántica de marca no se codifica en derived_palette fuera de esos doce tokens; añadir uno requiere un nombre, un propósito y una regla de derivación deliberados.

04 Ponlo a trabajar

Instalar design-system 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 design-system a Claude Code, Codex o tu agente

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

Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill design-system

Forma genérica de la CLI de skills para markdown-html/skills/design-system/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
Set up the brand for this repo: primary #FF6B35, Inter for headings and body, editorial style, sticky-sidebar TOC, and save it per-project. Point the default output at [output directory] and then convert [document.md] with md-document so it comes out branded.

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:

  • Inspeccione la configuración efectiva con config_loader.py --show, que resuelve proyecto sobre global sobre valores predeterminados.
  • Confirme que el archivo de configuración existe y que setup_completed_at está definido; si falta o es null, el conversor se niega y muestra el onboarding en su lugar.
  • Compruebe el contraste de un par candidato con brand_palette_validator.py --primary y --accent antes de decidirse por una marca.
  • Verifique que el bypass se comporte como está documentado ejecutándolo con MARKDOWN_HTML_NO_CONFIG=1, que devuelve únicamente los DEFAULTS.

En OpenDesign, importe design-system desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo 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.

Archivo de skill
markdown-html/skills/design-system/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 19392f7
License
MIT De LICENSE; SKILL.md indica "MIT".
Estrellas del repositorio
25,934 Captura de GitHub tomada el 14-09-2026 para todo el repositorio alirezarezvani/claude-skills, que contiene 5 skills en este catálogo. No es una calificación ni un recuento de uso para design-system.
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. Cuándo invocarloTabla de síntoma a acción: incorporación, rechazo de conversión, alcance de proyecto, ajuste de un solo campo, reinicio, valores predeterminados, omisión.
  2. Conjunto de preguntas de incorporación (10 preguntas)Tabla de las diez claves, validadores y valores predeterminados, desde el directorio de salida hasta la URL del logotipo.
  3. Reglas estrictasCinco reglas numeradas: umbral WCAG AA, directorio con permisos de escritura, personalización real, precedencia fija, omisión deliberada.
  4. Paleta derivada de 12 tokensTabla que asigna cada propiedad personalizada CSS a su propósito y regla de derivación HSL.
  5. Biblioteca de preguntas forzadas (patrón Matt Pocock grill-with-docs)Cinco preguntas de una por turno con respuestas recomendadas y citas del canon.
  6. Personalización en uso (ejemplo práctico)Bloque de Bash que muestra onboarding, defaults, set, project scope, reset, show y bypass.
  7. SupuestosCuatro condiciones previas: un HEX de marca, configuración de uno a dos minutos, Google Fonts, mínimo WCAG AA.
  8. No objetivosLo que no es: sistema de tokens, alojamiento de fuentes, conmutador de modo oscuro, suite de auditoría, transformador de CSS.
  9. Distinto deContrasta este validador y script de incorporación con las versiones de landing y de investigación clínica.
  10. Producto de salidaIndica las rutas JSON globales y del proyecto, además del recurso de esquema.
  11. Antipatrones (no hacer)Cuatro errores que evitar: omitir la incorporación, fondo vibrante, bypass silencioso, tokens fuera de la taxonomía.
  12. ReferenciasCláusulas WCAG, libros de tipografía y color, guía de TOC, scripts hermanos.
La descripción propia del Skill
"Captura la identidad de marca del usuario una vez mediante un asistente de incorporación de 10 preguntas (HEX primario/acento + encabezado + cuerpo Google Fonts + estilo de diseño editorial/técnico/mínimo/lúdico + directorio de salida predeterminado + tema de sintaxis + comportamiento de TOC + logo/empresa opcional), valida el contraste del texto del cuerpo y los enlaces contra WCAG 2.2 AA, deriva 12 propiedades personalizadas CSS en espacio HSL y almacena el resultado para que lo consuma cada conversor markdown-html. Usar antes de cualquier conversión markdown-html. Se activa en la incorporación de primera ejecución ("configurar la marca", "configurar markdown-html", "ejecutar incorporación"), en el restablecimiento explícito ("restablecer el sistema de diseño", "volver a incorporar"), y es verificado por cada conversor a través de config_loader.py antes de renderizar. Se niega a guardar si el contraste del texto del cuerpo falla AA 4.5:1 o el directorio de salida no es escribible. La precedencia es proyecto (./.markdown-html/) > global (~/.config/markdown-html/) > valores predeterminados integrados; MARKDOWN_HTML_NO_CONFIG=1 omite."

Descripción del front-matter de SKILL.md. El archivo completo tiene alrededor de 11,234 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill design-system

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

¿Tengo que terminar el onboarding antes de convertir algo?

Los conversores verifican la configuración a través de config_loader.py, y si falta o setup_completed_at es null, la conversión se rechaza y se muestra el onboarding. Hasta que complete la configuración, el resultado se renderiza con valores predeterminados de marcador de posición: técnicamente funcional pero sin marca.

Design System

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

Descargue OpenDesign, importe design-system desde su enlace SKILL.md, pegue el prompt anterior y lea el plan antes del resultado.

Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill design-system

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