Frontend Design Skills: configurar Claude Code y Codex
Elige un skill según la tarea, instala su carpeta completa y entrega un encargo concreto. Aquí encontrarás la configuración local, un ejemplo comprobado en el navegador y seis recursos de acceso libre.
Por Neruve · Actualizado el
Empieza con una página funcional
Previsualiza una página HTML funcional y aplica estas técnicas con su código y el prompt incluido en tu agente de programación.
Framewise — Plantilla HTML de landing para productos de IA
Practica la explicación del producto, la jerarquía visual y una cabecera adaptable.
Previsualizar plantillaAster Hale — Plantilla HTML de portafolio para diseñadores de producto
Adapta los servicios, los casos de proyectos y el contacto a tu trabajo.
Previsualizar plantillaLas Skills siguen siendo gratuitas y se pueden leer y copiar sin iniciar sesión. Las vistas previas son públicas; descargar el código y su prompt requiere una cuenta y la compra o el plan correspondiente. Ver acceso al código y precios
Elige el skill antes de instalarlo
frontend-design de Anthropic orienta el diseño visual. Taste es otro proyecto comunitario; los skills de Framer y animación tienen otros objetivos. Un README no es un SKILL.md instalable. Comprueba la fuente, licencia y dependencias. Las instrucciones siguientes usan el skill de Anthropic como ejemplo, no como instalador universal.
Instalar en Claude Code
Usa la carpeta del proyecto para limitar el alcance al repositorio. Conserva la estructura, la licencia y los archivos auxiliares. Copiar al Agent copia una petición de instalación; esta web no instala archivos en tu equipo.
- Abre la fuente de frontend-design indicada abajo y revisa SKILL.md, la licencia y los archivos referenciados.
- Copia la carpeta completa en .claude/skills/frontend-design/ dentro de la raíz del proyecto. Compara cualquier carpeta existente antes de sustituir archivos.
- Abre Claude Code en ese proyecto. Escribe / para comprobar que aparece frontend-design y selecciónalo con tu tarea.
.claude/skills/frontend-design/SKILL.mdEn este ejemplo, añade el encargo a /frontend-design. Si no aparece, revisa la ruta, el nombre SKILL.md, el repositorio y las políticas del espacio. Los plugins pueden añadir un prefijo al comando.
Documentación oficial de configuraciónInstalar en Codex
Codex utiliza otro directorio de proyecto. Reutiliza instrucciones compatibles, pero revisa los comandos y dependencias específicos antes de ejecutarlos. Un skill no proporciona un backend ni cuentas de otras herramientas.
- Copia la carpeta revisada en .agents/skills/frontend-design/ en la raíz del proyecto, conservando archivos auxiliares y licencia.
- Comprueba que SKILL.md empieza con YAML que contiene name y description, seguido de las instrucciones. El nombre en este ejemplo es frontend-design.
- En Codex CLI o la extensión IDE, usa /skills o $ para seleccionarlo. En la aplicación, usa el selector de skills. Reinicia Codex si no detecta el cambio.
.agents/skills/frontend-design/SKILL.mdEn CLI/IDE, selecciona $frontend-design y añade el encargo. Confirma que el Agent lea ese archivo; el nombre de la carpeta no demuestra que lo haya usado.
Documentación oficial de configuraciónEjecuta un encargo y revisa la página
Indica la página, el público, la acción principal y los datos que deben mantenerse. Usa el encargo o ejemplo de abajo. Revisa 1280, 390 y 320 px, el enlace principal y el teclado. Guarda código y capturas, incluidos los fallos.
¿El Skill Frontend Design no aparece o no se activa?
Primero identifica cómo se instaló. Una carpeta del proyecto y un plugin de Claude Code usan ubicaciones y nombres de comando distintos.
- Una carpeta Skill en el proyecto
- El ejemplo manual de Claude Code guarda SKILL.md y sus archivos auxiliares en .claude/skills/frontend-design/. Codex usa el ejemplo .agents/skills/ anterior. El README no es el archivo instalable.
- Un Skill incluido en un plugin
- En Claude Code, abre /plugin y comprueba que esté instalado, habilitado y en el ámbito del proyecto o usuario correcto. Usa el comando del menú; puede incluir un espacio de nombres. Sigue las instrucciones del propio plugin.
Comprueba en este orden
- Revisa el proyecto actual, el origen del Skill y su ámbito de instalación. Conserva los archivos necesarios y compara carpetas duplicadas antes de sustituirlas.
- Comprueba el nombre SKILL.md y que YAML empiece en la primera línea. En Claude Code, revisa name, description y los controles de invocación. Un YAML inválido puede impedir la coincidencia automática aunque funcione la llamada manual.
- Confirma que el Skill aparece. Pregunta a Claude Code qué Skills están disponibles y revisa el menú /. Si aparece pero no se usa, invoca el comando mostrado con una tarea acorde a su descripción y revisa disable-model-invocation y user-invocable.
- Confirma que el agente lee el Skill previsto y realiza la tarea. Guarda la ruta o el registro de herramientas con el resultado y revisa la página en un navegador. El nombre de una carpeta o una captura atractiva no confirma su uso.
El caso Codex de abajo leyó manualmente un archivo de versión fija. No verifica el descubrimiento automático ni la instalación de un plugin de Claude Code. Consulta la documentación de tu versión.
Documentación oficial de configuraciónElige un Skill relacionado
Las seis páginas permiten leer y copiar sin iniciar sesión. Revisa sus requisitos: las integraciones de Framer, herramientas de vídeo y módulos auxiliares no equivalen a un skill general de frontend.
Taste Skill — descripción e instalación
Introducción al proyecto y sus flujos. Este README no es el archivo que se instala.
Taste Skill — diseño frontend (v2 experimental)
Flujo comunitario de diseño para landing pages y portfolios. La versión v2 archivada es experimental.
Framer Skills — Convert Prompt
Convierte una petición React/Tailwind en un prompt para Framer. Revisa los requisitos de integración.
Framer Skills — Sync Styles
Sincroniza colores, estilos de texto e iconos indicados con un proyecto Framer. Requiere la integración correspondiente.
Claude Motion — Skill de animación de la comunidad
Flujo comunitario de vídeo para Claude Code/Remotion. No es una función integrada de Anthropic.
Genjutsu Skill — Cast
Usa Cast para animaciones y microinteracciones. Conserva los módulos _jutsu necesarios.
Ejercicios originales para adaptar
Estos ejemplos originales de Neruve se mantienen en inglés. Son entradas propuestas, no resultados comprobados ni prompts de plantillas de pago. Sustituye los datos ficticios antes de usarlos.
Un brief para una skill de diseño frontend
Work in this project's current stack. Read the existing routes, shared components,
styles and the selected frontend-design skill before proposing changes.
Use only the project files and assets I have permission to use.
Task: improve a fictional research-notes landing page for small product teams.
Page goal: explain collect → compare → decide; the primary link targets #workflow.
Design direction: warm paper, ink text, a clear research-note specimen and generous spacing.
Keep the existing API contracts, authentication, prices and route paths unchanged.
Use the skill for the design procedure; use my brief for product facts.
First propose the section order and the shared typography/spacing decisions.
Then implement one coherent pass. Check 1280, 390 and 320 px widths, keyboard focus,
the workflow anchor and reduced motion. Report the checks actually run and defects
still open. Do not invent testimonials, customer logos, metrics or a signup backend.Una revisión de diseño acotada
Review this existing page using the selected design skill.
Before editing, list the three highest-impact defects with a selector or section
name, viewport width and screenshot evidence. Separate styling defects from
broken behavior. Choose one defect, explain the smallest change that addresses it,
and preserve the current copy, prices, forms and navigation contracts.
After the repair, repeat the same browser check and report any regression.
Do not replace the whole page or add another component library for this repair.Ejemplo documentado: Fieldnote con frontend-design
Una página ficticia de notas de investigación con una nota de muestra, el proceso recopilar–comparar–decidir y un enlace interno funcional. Abre el ejemplo o descarga el encargo y el HTML. El ejemplo está en inglés.
Implementado en Codex el 13 de octubre de 2026 tras leer manualmente el skill de Anthropic fijado a una revisión, y comprobado en el navegador. Fuente: Anthropic frontend-design · dbd4588
Para repetirlo, instala el skill revisado como se indica arriba y entrega el encargo descargado. Compara la salida a 1280, 390 y 320 px; verifica el enlace y el foco del teclado. Registra las diferencias.
Es un único ejemplo guiado manualmente. No verifica el descubrimiento automático, Claude Code, Taste ni un servicio de generación de Neruve. No hay comparación de modelos, registro ni pruebas de mayor conversión.
Preguntas frecuentes
¿Una skill de diseño garantiza un sitio mejor?
No. El ejemplo muestra una implementación en Codex tras leer manualmente una versión fija del skill de Anthropic. No incluye una comparación sin skill ni demuestra mejoras universales. El ejemplo anterior de Fieldnote no utilizó un skill de diseño.
Explora diseños y sus prompts
El catálogo público de Neruve ofrece diseños web, prompts asociados disponibles y un directorio de Skills. Las vistas previas interactivas no requieren iniciar sesión; los prompts dependen de las condiciones del recurso y del plan. Este flujo utiliza tu propia herramienta de desarrollo y no requiere un generador público de sitios de Neruve.
Referencias oficiales
Las herramientas y skills externas pertenecen a sus autores. Los enlaces son referencias; no implican colaboración ni acceso incluido.