Ir a la guía de uso
design-systempor Anthropic

Design System Skill.

Un skill de Claude Code y Codex para marca y sistemas de diseño: audita, documenta o amplía un sistema de diseño existente.

  • Marca y sistemas de diseño
  • Sistema de diseño
anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md
--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document
Encabezado y títulos de sección leídos del archivo original el 14 de septiembre de 2026 · 5552 caracteres en total

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

Un skill de comando de barra para trabajar en un sistema de diseño existente en tres modos: auditoría, documentación o extensión. La pasada de auditoría informa sobre la consistencia de nomenclatura, la cobertura de tokens y la integridad de los componentes, y puntúa el sistema sobre 100. El modo de documentación produce una especificación de componente con descripción, variantes, props, estados, accesibilidad y qué hacer y qué no hacer.

El modo de extensión propone un nuevo componente o patrón en relación con los existentes del sistema, enumerando los tokens que utilizaría y las preguntas abiertas que plantea. Cubre tokens de diseño, componentes y patrones, y puede acceder a una herramienta de diseño o base de conocimiento cuando estén conectadas. Los lectores son diseñadores y desarrolladores que mantienen un sistema coherente.

Qué produce

  • Un informe de auditoría de sistema de diseño que termina en acciones prioritarias clasificadas
  • Documentación de componente con una tabla de props con propiedad, tipo, valor predeterminado y descripción
  • Una propuesta de nuevo componente que se abre con el problema que resuelve
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Elegir el Modo a Partir del Argumento

    El comando toma un modo más un objetivo: auditar todo el sistema, o pasar un solo componente o patrón por documentación o extensión.

  2. 02
    Ejecutar la Auditoría en Tres Ejes

    La auditoría verifica la consistencia de nomenclatura, la cobertura de tokens contabilizada frente a valores codificados de forma fija, y el grado de integridad de cada componente, y luego nombra las acciones prioritarias.

  3. 03
    Redactar la Especificación del Componente

    El modo de documentación completa una plantilla de descripción, variantes, props con tipos y valores predeterminados, estados, accesibilidad y una tabla de qué hacer y qué no hacer.

  4. 04
    Proponer la Extensión en Relación con lo Existente

    El modo de extensión compara la nueva idea con componentes relacionados, y luego propone una API, variantes, estados y los tokens exactos que consumiría el componente.

  5. 05
    Extraer de las Herramientas Conectadas Cuando Estén Presentes

    Con una herramienta de diseño conectada, el skill puede extraer propiedades de componentes y la estructura de capas para la documentación, y verificar la nomenclatura, las variantes y el uso de tokens en Figma.

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

  • Sospecha que se han introducido inconsistencias de nomenclatura o valores codificados de forma fija en sus componentes.
  • Necesita documentación para un componente que cubra sus variantes, estados y notas de accesibilidad.
  • Está diseñando un nuevo componente o patrón y quiere que se ajuste al sistema que ya tiene.
  • Quieres que el skill compruebe lo que ya está documentado antes de escribir más, usando una base de conocimiento conectada.

Conozca los límites

  • Los componentes puntuales que duplican lo que el sistema ya ofrece anulan el sentido de tener el sistema.
  • Una propuesta de extensión no resuelve las decisiones difíciles: puede terminar con decisiones que aún necesitan revisión de diseño.
  • Leer componentes directamente desde Figma solo ocurre cuando hay un conector de herramienta de diseño disponible.

Qué proporcionar

  • El modo y su destinoDale al comando un modo y el componente, patrón o sistema al que se aplica, para que el skill sepa qué plantilla rellenar.
  • Tus componentes existentes para compararUna propuesta de extensión compara componentes relacionados en lo que comparten y por qué eso no es suficiente, así que hay que conocer a esos vecinos.

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. Informar de desviaciones de nomenclatura frente a un estándar

    Las inconsistencias de nomenclatura no solo se marcan: cada fila nombra los componentes implicados y el estándar que hay que adoptar.

  2. Cuenta los valores fijos en el código, no los estimes a ojo

    La cobertura de tokens compara un recuento definido con el número de instancias encontradas, como valores hexadecimales fijos, valores de espaciado arbitrarios o fuentes y tamaños personalizados.

  3. Documenta todo

    Si un componente, variante o regla no está escrito, el skill lo trata como si no existiera.

  4. Mantén la flexibilidad dentro de las restricciones

    Los componentes están pensados para ser componibles en lugar de rígidos, de modo que el conjunto de patrones se adapta sin ser abandonado.

  5. Versiona los cambios disruptivos

    Cualquier cambio disruptivo tiene que venir con una ruta de migración, no solo con un componente de reemplazo.

  6. Empieza con una auditoría

    El punto de entrada predeterminado es una auditoría del estado del sistema antes de documentar o extender nada.

  7. La cobertura vence a la perfección

    Documentar el ochenta por ciento de los componentes se considera mejor que hacer 10 componentes a la perfección.

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/anthropics/knowledge-work-plugins --skill design-system

Forma genérica de la CLI de skills para design/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
Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

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:

  • Lee el resumen de la auditoría: componentes revisados, problemas encontrados y una puntuación sobre 100.
  • Revisa la tabla de completitud por componente, ya que los estados, variantes y documentación se marcan por separado y se puntúan.
  • Confirma que el bloque de accesibilidad esté completado para el componente documentado.
  • En una extensión, verifica que la tabla de estados cubra el comportamiento por defecto, hover y deshabilitado antes de enviarla a revisión.

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.

Author
Anthropic
Archivo de skill
design/skills/design-system/SKILL.md Checksum de contenido registrado en la verificación; commit 8f877b6
License
Apache-2.0 De LICENSE.
Estrellas del repositorio
24.012 Instantánea de GitHub tomada el 14/09/2026 para todo el repositorio anthropics/knowledge-work-plugins, que contiene 7 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. UsoLas tres formas de invocación: auditar el sistema, documentar un componente, extender un patrón.
  2. Componentes de un Design SystemDefine tokens de diseño, componentes y patrones con sus subpartes, estados y consideraciones de ARIA.
  3. PrincipiosConsistencia por encima de creatividad, flexibilidad dentro de las restricciones, documentar todo, versionar y migrar.
  4. Salida — AuditoríaPlantilla de auditoría: puntuación resumen, consistencia de nomenclatura, cobertura de tokens, completitud, acciones prioritarias.
  5. Salida — DocumentarPlantilla de componente: descripción, variantes, props, estados, accesibilidad, qué hacer y qué no, ejemplo de código.
  6. Salida — ExtenderPlantilla de componente nuevo: problema, patrones relacionados, API, variantes, estados, tokens, preguntas abiertas.
  7. Si Hay Conectores DisponiblesPasos opcionales de herramienta de diseño y base de conocimiento para auditar, documentar y publicar.
  8. ConsejosEmpieza con una auditoría, documenta a medida que construyes, prioriza la cobertura sobre la perfección.
La descripción propia del Skill
«Audita, documenta o extiende tu sistema de diseño. Úsala al verificar inconsistencias de nomenclatura o valores codificados directamente en los componentes, escribir documentación para las variantes, estados y notas de accesibilidad de un componente, o diseñar un nuevo patrón que encaje en el sistema existente.»

Descripción de encabezado de SKILL.md. El archivo completo tiene aproximadamente 5.552 caracteres. Leer 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.

¿Dónde termina realmente la documentación?

El trabajo se devuelve como plantillas markdown en la conversación. Si hay una base de conocimiento conectada, el skill también puede publicar la documentación actualizada en tu wiki.

¿Puedo usarlo para diseñar algo completamente nuevo?

El modo Extender sirve para un componente o patrón nuevo que se ajusta al sistema que ya tienes. Parte del problema y del vacío en los patrones existentes, propone API, variantes, estados y tokens, y cierra con las decisiones y casos límite que aún necesitan revisión de diseño.

¿Cómo invoco los distintos modos?

Escribe el comando de barra con un modo y un objetivo. Auditoría se ejecuta sobre todo el sistema, mientras que documentar y extender toman un componente o patrón específico, por ejemplo el formulario extender para un patrón que quieres añadir.

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/anthropics/knowledge-work-plugins --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