por Juanjo LunaDiseñar interfaces frontend
Crea interfaces web, componentes y páginas con un acabado visual cuidado y apto para producción. Te sirve cuando quieres construir o mejorar una web, app o dashboard con buen diseño.
Descripción original (inglés)
frontend-design: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta frontend-design en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/bytedance/deer-flow.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/skills/public/frontend-design" ~/.claude/skills/frontend-design
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de bytedance/deer-flow
- Revisar artículo académico academic-paper-review
- Proteger IO bloqueante en asyncio blocking-io-guard
- Crear SOUL.md personalizado bootstrap
- Crear gráficos de datos chart-visualization
- Hablar con DeerFlow por API claude-to-deerflow
- Crear documentación de código code-documentation
- Generar informe de consultoría consulting-analysis
- Analizar datos en Excel y CSV data-analysis
Explicación redactada con ayuda de IA a partir de la descripción original.