83.3K+Descargar
Ir a la guía de uso
frontend-designpor Anthropic

Frontend Design Skill.

Una skill para Claude Code y Codex que aplica diseño UI distintivo: tipografía, color y disposición elegidos con criterio.

  • Web y UI
  • Websites
  • Rediseño UI
  • Typography
Descargar OpenDesignVer guía de uso
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.

A considered space for your next project, from the first quote to the final yes.

Create your quote ↗
YOUR NEXT PROJECTBrand &
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT

“A quoting tool for freelance designers.
Make the next step feel clear.”

Illustrative composition · not a recorded skill output

01 Del briefing a la interfaz

Una tarea de diseño frontend, del briefing a la interfaz.

Dale a Claude Code o Codex el producto, la audiencia y el contenido; el skill frontend-design toma las decisiones visuales.

Briefing de ejemploFlujo de trabajo ilustrativo · no es una ejecución registrada

Una página de inicio para una herramienta de cotización

Ayuda a diseñadores freelance a entender cómo crear cotizaciones, acordar cambios de alcance y obtener la aprobación del cliente.

Recursos de marcaPreciosTexto de FAQ
Ver el prompt completo ↗

Lo que guía el skill

  1. 01
    Encontrar la dirección visual

    Una paleta, jerarquía tipográfica y maquetación vinculadas al producto.

  2. 02
    Revisar el plan

    Verificar la dirección contra el briefing antes de construir.

  3. 03
    Construir y refinar

    Una interfaz responsiva con acciones claras y estados accesibles.

02 Encuentra tu caso de uso

Cuándo usar el skill frontend-design

Usa el skill frontend-design cuando las decisiones visuales sean parte del trabajo: una nueva página construida en Claude Code o Codex, o un rediseño de una interfaz que parece plantilla.

Buen caso de uso

  • Una página o sitio nuevo desde un briefingPáginas de inicio, sitios de producto, portafolios, aplicaciones pequeñas: cualquier cosa donde la primera pregunta sea "¿cómo debería verse esto?"
  • Un rediseño visual de una interfaz existenteTienes una UI funcional que parece plantilla y quieres una dirección arraigada en la materia del producto.
  • Corregir tipografía y jerarquíaEscala tipográfica, longitud de línea, peso y espaciado definidos con intención en lugar de los valores predeterminados del framework.
  • Briefings que incluyen contenido realEl skill construye con el texto y el tema reales del briefing; cuanto más material real le proporciones, más específico será el resultado.

Conozca los límites

  • Ya tienes un design systemProporciona sus reglas y componentes. El skill debe seguir tu briefing y trabajar dentro de las decisiones visuales que permanezcan abiertas.
  • El trabajo es lógica, datos o backendSu enfoque es el diseño visual. La lógica de aplicación, las API y las pruebas funcionales necesitan su propio trabajo de implementación.
  • Quieres una librería de componentes o plantillasProporciona instrucciones de diseño, en lugar de una librería de componentes o plantilla de página prefabricada.
  • Necesita una revisión de una UI terminadaSu autocrítica está dirigida a su propio plan. Para auditar la interfaz de otra persona, consulte los skills relacionados más abajo.

Qué proporcionar

  • Tema del productoQué es el producto y en qué industria se encuentra. Si omite esto, el skill propondrá uno y le pedirá que lo confirme.
  • Usuarios objetivoPara quién es la página. Esto determina el registro visual más que cualquier otra cosa.
  • Objetivo de la páginaEl único trabajo que la página debe hacer y la acción principal.
  • Contenido realTitulares, copy, precios, respuestas de FAQ. El texto de relleno produce diseño con aspecto de relleno.
  • Activos de marca y restriccionesLogo, paleta, fuentes y cualquier cosa ya decidida. Las propias palabras del briefing siempre prevalecen.

03 Diseñe con intención

Qué aporta el skill al diseño de UI

Cuatro cosas que el skill frontend-design instruye a Claude Code o Codex a hacer, y en qué convierte cada una su entrada.

  1. Una dirección visual fundamentada en el tema

    El agente determina qué es el producto, a quién sirve y cómo es su mundo antes de elegir nada. Un juguete para niños de ocho años y un panel de control para analistas no deben compartir una apariencia.

    Usted proporciona
    tema del producto, audiencia
    Usted obtiene
    una dirección que puede aceptar o redirigir antes de que se escriba el código

  2. Tipo, color y layout elegidos con propósito

    Una o dos tipografías con una escala real, una paleta de 4–6 colores nombrados en hex, y un concepto de layout con reglas de alineación. Los dispositivos estructurales — reglas, numeración, etiquetas — se usan solo donde transmiten información.

    Usted proporciona
    recursos de marca, restricciones
    Usted obtiene
    un sistema de tokens compacto sobre el que se construye la página

  3. Un plan, revisado contra el briefing, antes de construir

    El skill trabaja en dos pasadas. Redacta el plan, luego verifica cada parte contra la pregunta «¿produciría esto para cualquier página similar?» y revisa lo que suena genérico, indicando qué cambió y por qué. El código viene después.

    Usted proporciona
    el briefing
    Usted obtiene
    un plan escrito y una breve autoevaluación que puedes leer en la transcripción

  4. Calidad base sin pedirlo

    Responsivo hasta móvil, foco de teclado visible, movimiento reducido respetado, color accesible y texto redactado desde el punto de vista del usuario en lenguaje claro y activo.

    Usted proporciona
    sus requisitos de accesibilidad
    Usted obtiene
    orientación para uso móvil y con teclado

04 Ponlo a trabajar

Instala frontend-design en Claude Code o Codex

Un comando npx skills add, luego un briefing en tu agente y una lista de comprobación para el primer resultado.

Añade frontend-design a Claude Code, Codex o tu agente

Ejecuta el comando en tu proyecto, sigue la selección de agente del instalador y verifica que tu agente pueda descubrir frontend-design.

Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design

Origen del comando: entrada de skills.sh para frontend-design. Sigue el instalador y confirma que el skill aparece en tu agente.

Dale al skill una primera tarea de diseño de interfaz

Adapte este briefing con los detalles de su producto, adjunte los recursos de marca y el copy al que hace referencia, y ejecútelo en Claude Code o Codex.

Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.

Revisa el primer resultado

Una buena primera ejecución es fácil de reconocer. Antes de aceptar la página, busca esto en la transcripción y el resultado:

  • El plan llegó antes del código, con valores de paleta nombrados y roles tipográficos.
  • La autoevaluación nombra al menos un elemento genérico que reemplazó, y por qué.
  • Su copy, precios y recursos de marca reales aparecen sin cambios.
  • Un elemento es memorable; el resto de la página permanece discreto.
  • La página funciona a 390px, tabular muestra un anillo de foco visible y el movimiento respeta la configuración del sistema operativo.
  • Si algo suena genérico, indica qué parte — el skill está diseñado para recibir esa crítica y revisarse.

¿Usas OpenDesign? frontend-design viene incluido en OpenDesign: abre Plugins → Skills, selecciónalo en la barra superior y su SKILL.md se compone en el prompt junto con tu DESIGN.md. Claude Code, Codex, Cursor u OpenCode hacen el trabajo.

Descargar OpenDesignLeer la guía rápida

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
Repository
github.com/anthropics/skills Rama main
Archivo de skill
skills/frontend-design/SKILL.md Checksum del contenido registrado en la verificación; commit 34040c9
License
Apache-2.0 De skills/frontend-design/LICENSE.txt; SKILL.md dice "Términos completos en LICENSE.txt". La raíz del repositorio no declara una licencia separada.
Estrellas del repositorio
176.183 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio anthropics/skills, que contiene muchas skills. No es una valoración ni un recuento de uso de frontend-design.
Verificado por OpenDesign
2026-09-14 Archivo fuente, ruta, texto de licencia y contador de estrellas verificados. Incluido en OpenDesign principal (verificado 2026-08-28); aún no se ha registrado en esta página una ejecución real en OpenDesign.
La descripción propia del Skill
Orientación para un diseño visual distintivo e intencional al construir una interfaz nueva o reformar una existente. Ayuda con la dirección estética, la tipografía y la toma de decisiones que no parezcan plantillas por defecto.

Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. Lee el archivo completo en GitHub.

Frontend Design

Dale a tu agente un briefing que valga la pena diseñar.

El skill frontend-design viene incluido en OpenDesign. Descarga la aplicación, selecciona el skill en Plugins → Skills, pega el prompt de ejemplo y lee el plan antes del código.

Descargar OpenDesignVer todos los skills
Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design