Codex nativo
OK
👍 0 · Votar
frontend-design
El skill oficial de Anthropic para diseño front-end. Pide al agente que se comprometa con una dirección de diseño (paleta, tipografía, maquetación, principios) y que la contraste con los valores por defecto habituales de la IA antes de escribir código. Solo instrucciones, sin scripts.
- Origen
- anthropics/skills
- Ruta
skills/frontend-design· SKILL.md- Commit fijado
dbd4588f9e- Licencia
- Apache-2.0
Cada prompt muestra una matriz 2×2 fija: Codex nativo, Codex + skill, Claude Code nativo, Claude Code + skill. Haz clic en una captura para ver la página completa. Instalar y usar ↓
Puntos fuertes
Lo que la propia documentación del skill dice que hace bien, con un enlace a donde lo dice. Son afirmaciones, no resultados: compáralas con las páginas de abajo.
- Diseño visual distintivo e intencionado que no parece valores por defecto de plantilla fuente
- Decisiones deliberadas y con criterio sobre paleta, tipografía y maquetación, específicas del encargo, que dan a cada cliente una identidad visual propia fuente
- La tipografía lleva la personalidad de la página fuente
Alcance de la prueba: Landing page de SaaS, Panel de datos, Blog y portafolio personal. Los prompts que no están en esta lista aparecen como “Fuera de alcance”, no como pendientes.
Comprobado con el texto del skill después de las ejecuciones v0 (no decidido de antemano); el texto no excluye ningún tipo de página.
Landing page de SaaS
landing-saas
Panel de datos
dashboard
Blog y portafolio personal
blog-portfolio
Instalar y usar
Instalación a nivel de proyecto: copia la carpeta del skill (la que contiene SKILL.md) en tu proyecto, en el commit fijado. Las ejecuciones de la galería lo instalaron de la misma forma.
Claude Code
Instalar
Copia la carpeta en <project>/.claude/skills/frontend-design/.
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .claude/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .claude/skills/frontend-designUsar
# interactivo
/frontend-design <tu tarea>
# o termina cualquier solicitud con
Use the frontend-design skill.
# no interactivo, como en las ejecuciones de la galería
claude -p '<tu tarea> Use the frontend-design skill.'Para tenerlo disponible en todos los proyectos, coloca la carpeta en ~/.claude/skills/frontend-design/. Claude Code también puede cargar el skill por sí solo cuando una solicitud coincide con la descripción del skill.
Codex
Instalar
Copia la carpeta en <project>/.agents/skills/frontend-design/.
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .agents/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .agents/skills/frontend-designUsar
# interactivo: menciónalo o elígelo en /skills
$frontend-design <tu tarea>
# no interactivo, como en las ejecuciones de la galería
codex exec -s workspace-write '<tu tarea> Use the $frontend-design skill.'Para tenerlo disponible en todos los proyectos, coloca la carpeta en ~/.agents/skills/frontend-design/. Codex también puede elegir el skill por sí solo, según su descripción.
Notas
- El mismo SKILL.md también se publica en anthropics/claude-plugins-official y anthropics/claude-code; esta galería usa anthropics/skills.
- Este skill se reescribió varias veces en upstream durante 2026, así que usa siempre el commit fijado.
Metadatos: skills/frontend-design/meta.yaml