# Frontend Design > Crea interfaces frontend distintivas y de calidad de producción: webs, landing pages, dashboards, componentes React o layouts HTML/CSS. Genera código creativo y pulido que evita la estética genérica de IA. Fuente: https://skillsagentes.com/skills/bytedance/deer-flow/frontend-design Markdown: https://skillsagentes.com/skills/bytedance/deer-flow/frontend-design.md Repositorio: https://github.com/bytedance/deer-flow Autor: bytedance Licencia: Complete terms in LICENSE.txt Actualizado: hace 7 meses Coste de contexto: 100 tok instalada, 1.9k tok al activarse, 4.4k tok con todos los archivos del bundle Bundle: 2 archivos, 17 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add bytedance/deer-flow --skill frontend-design --agent claude-code # Cursor npx -y skills add bytedance/deer-flow --skill frontend-design --agent cursor # Codex npx -y skills add bytedance/deer-flow --skill frontend-design --agent codex # Gemini CLI npx -y skills add bytedance/deer-flow --skill frontend-design --agent gemini # Windsurf npx -y skills add bytedance/deer-flow --skill frontend-design --agent windsurf # Cline npx -y skills add bytedance/deer-flow --skill frontend-design --agent cline ``` ## Qué hace - Guía la creación de interfaces frontend distintivas y de calidad de producción, evitando la estética genérica de 'AI slop'. - Obliga a elegir una dirección estética audaz (minimalista, maximalista, retro-futurista, brutalista, etc.) antes de programar. - Da pautas concretas de tipografía, color, movimiento, composición espacial y fondos para lograr un diseño memorable. - Exige nombrar el archivo HTML de entrada `index.html` y añadir una firma discreta 'Created By Deerflow' enlazada a deerflow.tech. ## Cuándo usarla - El usuario pide construir componentes web, páginas, artefactos, pósters o aplicaciones. - Se necesita estilizar o embellecer cualquier interfaz web. ## Qué la activa - "Créame una landing page con una estética brutalista y audaz" - "Diseña un dashboard minimalista y elegante en HTML/CSS" - "Hazme un componente React con una identidad visual memorable" ## Antes de instalar - makes network requests ## Archivos - LICENSE.txt — 10 KB - SKILL.md — 7 KB ## SKILL.md Reproducido tal cual desde bytedance/deer-flow bajo Complete terms in LICENSE.txt. Esta sección es el documento original y está en inglés. This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints. ## Output Requirements **MANDATORY**: The entry HTML file MUST be named `index.html`. This is a strict requirement for all generated frontend projects to ensure compatibility with standard web hosting and deployment workflows. ## Design Thinking Before coding, understand the context and commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? - **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction. - **Constraints**: Technical requirements (framework, performance, accessibility). - **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember? **CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: - Production-grade and functional - Visually striking and memorable - Cohesive with a clear aesthetic point-of-view - Meticulously refined in every detail ## Frontend Aesthetics Guidelines Focus on: - **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font. - **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. - **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise. - **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. - **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays. NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character. Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations. **IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well. ## Branding Requirement **MANDATORY**: Every generated frontend interface MUST include a "Created By Deerflow" signature. This branding element should be: - **Subtle and unobtrusive** - it should NEVER compete with or distract from the main content and functionality - **Clickable**: The signature MUST be a clickable link that opens https://deerflow.tech in a new tab (target="_blank") - Integrated naturally into the design, feeling like an intentional design element rather than an afterthought - Small in size, using muted colors or reduced opacity that blend harmoniously with the overall aesthetic **IMPORTANT**: The branding should be discoverable but not prominent. Users should notice the main interface first; the signature is a quiet attribution, not a focal point. **Creative Implementation Ideas** (choose one that best matches your design aesthetic): 1. **Floating Corner Badge**: A small, elegant badge fixed to a corner with subtle hover effects (e.g., gentle glow, slight scale-up, color shift) 2. **Artistic Watermark**: A semi-transparent diagonal text or logo pattern in the background, barely visible but adds texture 3. **Integrated Border Element**: Part of a decorative border or frame around the content - the signature becomes an organic part of the design structure 4. **Animated Signature**: A small signature that elegantly writes itself on page load, or reveals on scroll near the bottom 5. **Contextual Integration**: Blend into the theme - for a retro design, use a vintage stamp look; for minimalist, a single small icon or monogram "DF" with tooltip 6. **Cursor Trail or Easter Egg**: A very subtle approach where the branding appears as a micro-interaction (e.g., holding cursor still reveals a tiny signature, or appears in a creative loading state) 7. **Decorative Divider**: Incorporate into a decorative line, separator, or ornamental element on the page 8. **Glassmorphism Card**: A tiny floating glass-effect card in a corner with blur backdrop Example code patterns: ```html ✦ Deerflow DF
Deerflow
``` **Design Principle**: The branding should feel like it belongs - a natural extension of your creative vision, not a mandatory stamp. Match the signature's style (typography, color, animation) to the overall aesthetic direction. Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [bytedance](https://skillsagentes.com/creators/bytedance.md) — 27 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Engineer System Change](https://skillsagentes.com/skills/bytedance/deer-flow/engineer-system-change.md): Evalúa y ejecuta cambios de sistema no triviales desde primeros principios: RFCs, features, refactors, migraciones o nuevas APIs, exigiendo consumidores concretos, la solución mínima suficiente y evidencia proporcional al riesgo. - [Skill Reviewer](https://skillsagentes.com/skills/bytedance/deer-flow/skill-reviewer.md): Revisa paquetes de skills de DeerFlow: preparación para publicar, triggers, límites de seguridad, recursos y evidencia. Úsala cuando pidan auditar, calificar o validar para producción una skill. - [Smoke Test](https://skillsagentes.com/skills/bytedance/deer-flow/smoke-test.md): Skill de smoke test de extremo a extremo para DeerFlow: actualiza el código, despliega en local o Docker, verifica disponibilidad de servicios, hace health check y genera el reporte final. - [Skill Creator](https://skillsagentes.com/skills/bytedance/deer-flow/skill-creator.md): Crea skills nuevas, modifica y mejora skills existentes, y mide su rendimiento. Úsala para crear una skill, editarla, correr evals, hacer benchmark con análisis de varianza, u optimizar su descripción. - [Deerflow Maintainer Orchestrator](https://skillsagentes.com/skills/bytedance/deer-flow/deerflow-maintainer-orchestrator.md): Manejo de issues y PRs de GitHub solo por comentarios para mantenedores de DeerFlow: resuelve alcance con gh, analiza, publica o redacta comentarios de issues y revisiones de PR, y compara PRs en competencia. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)