Codex nativo
OK
👍 0 · Votar
web-design-engineer
Un skill de diseño front-end cuya salida es siempre HTML (páginas, paneles, prototipos, diapositivas, visualización de datos). Empieza con un paso de dirección de diseño e incluye 25 recetas de estilo. Solo instrucciones, sin scripts.
- Origen
- ConardLi/garden-skills
- Ruta
skills/web-design-engineer· SKILL.md- Commit fijado
2b9a89340b- Licencia
- MIT
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.
- Piezas visuales pulidas renderizadas en el navegador con HTML/CSS/JavaScript, incluidas páginas, paneles y visualizaciones de datos fuente
- Busca lo “impresionante”, no solo lo “funcional” fuente
- Declara un sistema de diseño antes de construir, con una lista contra los clichés y 25 recetas de estilo 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 nombra los tres tipos 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/web-design-engineer/.
git clone https://github.com/ConardLi/garden-skills.git /tmp/web-design-engineer-src
git -C /tmp/web-design-engineer-src checkout 2b9a89340b70f632d31c0f1c69fce94a7912423e
mkdir -p .claude/skills
cp -R /tmp/web-design-engineer-src/skills/web-design-engineer .claude/skills/web-design-engineerUsar
# interactivo
/web-design-engineer <tu tarea>
# o termina cualquier solicitud con
Use the web-design-engineer skill.
# no interactivo, como en las ejecuciones de la galería
claude -p '<tu tarea> Use the web-design-engineer skill.'Para tenerlo disponible en todos los proyectos, coloca la carpeta en ~/.claude/skills/web-design-engineer/. 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/web-design-engineer/.
git clone https://github.com/ConardLi/garden-skills.git /tmp/web-design-engineer-src
git -C /tmp/web-design-engineer-src checkout 2b9a89340b70f632d31c0f1c69fce94a7912423e
mkdir -p .agents/skills
cp -R /tmp/web-design-engineer-src/skills/web-design-engineer .agents/skills/web-design-engineerUsar
# interactivo: menciónalo o elígelo en /skills
$web-design-engineer <tu tarea>
# no interactivo, como en las ejecuciones de la galería
codex exec -s workspace-write '<tu tarea> Use the $web-design-engineer skill.'Para tenerlo disponible en todos los proyectos, coloca la carpeta en ~/.agents/skills/web-design-engineer/. Codex también puede elegir el skill por sí solo, según su descripción.
Notas
- Ocupa en v0 el lugar del frontend-skill de OpenAI, porque ese skill se retiró del catálogo oficial de OpenAI y los lectores ya no pueden instalarlo.
- Su modo React carga React y Babel desde una CDN; el modo predeterminado, con CSS escrito a mano, no necesita red.
Metadatos: skills/web-design-engineer/meta.yaml · Copyright (c) 2026 (no name given; attribute to ConardLi/garden-skills)