# Lavish Design > Genera interfaces y assets con la marca Lavish, para producción o para prototipos desechables, mocks, etc. Incluye guías de diseño esenciales, colores, tipografías, fuentes, assets y componentes de UI kit para prototipar. Fuente: https://skillsagentes.com/skills/kunchenguid/lavish-axi/lavish-design Markdown: https://skillsagentes.com/skills/kunchenguid/lavish-axi/lavish-design.md Repositorio: https://github.com/kunchenguid/lavish-axi Autor: kunchenguid Licencia: MIT Actualizado: hace 2 meses Coste de contexto: 59 tok instalada, 713 tok al activarse, 94.3k tok con todos los archivos del bundle Bundle: 51 archivos, 368 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 kunchenguid/lavish-axi --skill lavish-design --agent claude-code # Cursor npx -y skills add kunchenguid/lavish-axi --skill lavish-design --agent cursor # Codex npx -y skills add kunchenguid/lavish-axi --skill lavish-design --agent codex # Gemini CLI npx -y skills add kunchenguid/lavish-axi --skill lavish-design --agent gemini # Windsurf npx -y skills add kunchenguid/lavish-axi --skill lavish-design --agent windsurf # Cline npx -y skills add kunchenguid/lavish-axi --skill lavish-design --agent cline ``` ## Qué hace - Genera interfaces y assets con la marca Lavish, tanto para producción como para prototipos desechables, mocks o maquetas. - Aplica el sistema de diseño: tinta oscura + crema + un único acento brass, tipografías serif/sans/mono y tokens CSS semánticos, sin hardcodear colores. - Impone reglas de contenido: nada de emojis, exclamaciones ni frases tipo 'powerful seamless'; usa los ejemplos on-brand/off-brand del README. - Distingue los colores semánticos: sage para agente, amber para usuario, rust para peligro, y reserva las sombras solo para superficies flotantes. - Si no hay indicaciones, pregunta al usuario qué quiere construir y actúa como diseñador experto, entregando HTML estático o código de producción. ## Cuándo usarla - Para diseñar interfaces o assets de Lavish, ya sea para producción o para prototipos y mocks desechables. - Para crear artefactos visuales como diapositivas, mocks o prototipos desechables con la marca. - Para trabajar en código de producción de Lavish y seguir las reglas de marca y usar los componentes del UI kit. - Cuando la skill se invoca sin más contexto y hay que preguntar al usuario qué quiere construir. ## Qué la activa - "Haz un mock desechable de la pantalla de inicio de Lavish en HTML." - "Necesito unas diapositivas con la marca Lavish para una demo." - "Diseña un prototipo del editor de Lavish como HTML." - "Ayúdame a aplicar la identidad de Lavish en esta página de producción." - "Quiero ver cómo quedaría un panel de análisis con el estilo de Lavish." ## Archivos - .thumbnail — 4 KB - README.md — 15 KB - SKILL.md — 3 KB - _adherence.oxlintrc.json — 6 KB - _ds_bundle.js — 152 KB - _ds_manifest.json — 14 KB - assets/diagram-flow.svg — 1 KB - assets/lavish-mark.svg — 518 B - assets/lavish-wordmark.svg — 290 B - colors_and_type.css — 8 KB - preview/_base.css — 841 B - preview/brand-wordmark.html — 975 B - preview/colors-brass.html — 2 KB - preview/colors-ink.html — 1 KB - preview/colors-signal.html — 2 KB - preview/colors-steel-cream.html — 2 KB - preview/components-annotation-card.html — 2 KB - preview/components-bubbles.html — 2 KB - preview/components-buttons.html — 2 KB - preview/components-composer.html — 2 KB - preview/components-pills.html — 2 KB - preview/components-topbar.html — 2 KB - preview/content-voice.html — 1 KB - preview/iconography.html — 3 KB - preview/radii.html — 2 KB - preview/shadows.html — 1 KB - preview/spacing-scale.html — 2 KB - preview/states-annotation.html — 1 KB - preview/type-display.html — 651 B - preview/type-families.html — 1 KB - preview/type-pullquote.html — 727 B - preview/type-scale.html — 1 KB - ui_kits/editor/AnnotationCard.jsx — 3 KB - ui_kits/editor/Artifact.jsx — 5 KB - ui_kits/editor/Bubbles.jsx — 2 KB - ui_kits/editor/ChatPanel.jsx — 7 KB - ui_kits/editor/Pills.jsx — 1 KB - ui_kits/editor/README.md — 3 KB - ui_kits/editor/TopBar.jsx — 8 KB - ui_kits/editor/app.jsx — 6 KB - ui_kits/editor/design-canvas.jsx — 49 KB - ui_kits/editor/end-session-discoverability.html — 1 KB - ui_kits/editor/index.html — 2 KB - ui_kits/editor/layout-options-v2.html — 1 KB - ui_kits/editor/layout-options.html — 1 KB - ui_kits/editor/options-app-v2.jsx — 3 KB - ui_kits/editor/options-app-v3.jsx — 3 KB - ui_kits/editor/options-app.jsx — 3 KB - ui_kits/editor/options-chrome-v2.jsx — 11 KB - ui_kits/editor/options-chrome-v3.jsx — 7 KB - ui_kits/editor/options-chrome.jsx — 14 KB ## SKILL.md Reproducido tal cual desde kunchenguid/lavish-axi bajo MIT. Esta sección es el documento original y está en inglés. Read the README.md file within this skill, and explore the other available files. If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand. If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need. ## Where things live - `README.md` — product context, content fundamentals, visual foundations, iconography, caveats - `colors_and_type.css` — drop-in CSS custom properties for the full token system (ink, brass, sage, amber, rust, steel, cream + type + spacing + radii + shadows) - `assets/` — wordmark, lavish-mark icon, flow diagram SVG - `preview/` — Design-System-tab specimen cards (one concept per card) - `ui_kits/editor/` — clickable React recreation of the Lavish Editor chrome ## Quick rules of thumb 1. **Dark ink + cream type + one brass accent.** No second accent, no gradient, no glassmorphism. 2. **Serif for prose and brand moments (EB Garamond italic). Sans for chrome (Geist). Mono for technical (Geist Mono).** 3. **No emoji. No exclamation marks. No "🚀 powerful seamless" copy.** Read the on-brand/off-brand examples in README's Content Fundamentals. 4. **The element annotation outline = the focus outline:** 2px brass, 2px offset. Text range annotations use a translucent brass highlight instead; both mean "attention is here." 5. **Shadows only on floating surfaces** (tooltip, annotation card). Never on buttons or in-panel cards. 6. **Sage = agent. Amber = user. Rust = danger.** Don't mix. 7. **Words first, icons second.** When you must reach for an icon, use Lucide (stroke, 1.5, currentColor). ## To produce a new HTML artifact 1. `@import "../colors_and_type.css";` in your stylesheet (or copy the tokens block inline if standalone). 2. Build with the semantic vars (`--bg`, `--fg`, `--accent`, etc.) — never hard-code hex. 3. Set `font-family: var(--font-sans)` on the body; reach for `var(--font-serif)` on headlines and pull-quotes. 4. Reference `assets/lavish-wordmark.svg` for the brand mark; do not redraw it. 5. If you need a component (button, pill, bubble, annotation card, top bar), open the matching JSX file in `ui_kits/editor/` and copy the styles object — they're already token-driven. ## 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: [kunchenguid](https://skillsagentes.com/creators/kunchenguid.md) — 18 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 - [Lavish](https://skillsagentes.com/skills/kunchenguid/lavish-axi/lavish.md): Convierte respuestas complejas o visuales del agente en artefactos HTML enriquecidos y revisables con el CLI lavish-axi. Úsalo para planes, comparaciones, diagramas, tablas, diffs, informes o contenido más fácil de captar que de leer. ## Skills relacionadas - [Brand Guidelines](https://skillsagentes.com/skills/anthropics/skills/brand-guidelines.md): Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que pueda beneficiarse de su look-and-feel. Úsalo cuando apliquen colores de marca o estándares de diseño. - [Design Review](https://skillsagentes.com/skills/garrytan/gstack/design-review.md): Ojo de diseñador para QA: detecta inconsistencias visuales, problemas de espaciado y jerarquía, patrones de "AI slop" e interacciones lentas — y luego los corrige. - [Design System](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design-system.md): Arquitectura de tokens en tres capas (primitivo→semántico→componente), variables CSS, escalas de espaciado/tipografía, specs de componentes y generación estratégica de slides con marca. - [Ui Styling](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md): Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas. - [Stitch Design Taste](https://skillsagentes.com/skills/leonxlnx/taste-skill/stitch-design-taste.md): Skill de sistema de diseño semántico para Google Stitch. Genera DESIGN.md que imponen estándares de UI premium anti-genéricos: tipografía, color, layouts asimétricos, micro-movimiento perpetuo y rendimiento. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)