What is the lavish-design skill?
The lavish-design skill is a brand design system folder inside the kunchenguid/lavish-axi repository. It carries a token stylesheet, assets, specimen cards and an editor UI kit, plus seven rules of thumb. It is flagged internal for maintainers, and it styles Lavish interfaces, not general websites.
The lavish-design skill centers on one file, colors_and_type.css, which holds custom properties for ink, brass, sage, amber, rust, steel and cream, plus type, spacing, radii and shadows. SKILL.md tells the agent how to build with them.
It sits in the lavish-axi repository, whose main product is an editor for agent-made HTML. The skill is the brand layer for that product, so its choices are specific to Lavish rather than a general design taste.
The seven rules of thumb
- Dark ink, cream type and a single brass accent. No second accent, no gradient, no glassmorphism.
- Serif for prose and brand moments, sans for interface chrome, mono for technical text.
- No emoji, no exclamation marks and no hype copy. The README's content fundamentals show on-brand and off-brand examples.
- The annotation outline doubles as the focus outline: 2px brass with a 2px offset.
- Shadows only on floating surfaces such as a tooltip or an annotation card.
- Sage means agent, amber means user and rust means danger. Do not mix them.
- Words first, icons second. When an icon is needed, use Lucide strokes at 1.5 with currentColor.
What is inside the folder
- README.md for product context, content fundamentals, visual foundations, iconography and caveats.
- assets with a wordmark, a mark icon and a flow diagram, all as SVG files.
- preview with specimen cards, one concept each, such as colors, buttons, pills, bubbles, the composer, the top bar and voice.
- ui_kits/editor, a clickable React recreation of the editor chrome whose styles are already token-driven.
Who the lavish-design skill is for
Best for
- People building Lavish-branded slides, mocks, throwaway prototypes or production UI who want the agent to follow the brand.
- Anyone studying how a compact brand skill is organized: tokens, rules, specimens and a component kit in one folder.
- Authors writing their own brand skill who want a worked layout to copy the structure from. Pair it with brand-guidelines.
Not for
- Styling an unrelated product. The palette, fonts and voice belong to Lavish. For general color work, see color-system.
- Choosing a design direction from scratch. This skill applies a fixed brand and does not explore options.
- A first look at the public Lavish tooling. The README says the repo's public skill is a different one, and this one is marked internal for maintainers.
Use it with UiChemy
A page styled with these tokens is ordinary HTML and CSS. To bring one into WordPress, use UiChemy AI to WordPress for an AI build, or recreate the layout in Figma and use Figma to WordPress. Click Get Started on uichemy.com, then review the result in the editor.
If you borrow the pattern for your own site, keep values in variables, as design-token describes, and keep the voice rules written down as in ux-copy. The type roles echo ideas from typography-scale.
How to install Lavish Design Skill: Brand Tokens and Rules for HTML Artifacts
git clone https://github.com/kunchenguid/lavish-axi.gitClone the repository
Run
git clone https://github.com/kunchenguid/lavish-axi.git. The skill sits in the .agents/skills/lavish-design folder, next to the repo's other agent skills.Copy the whole folder
Copy .agents/skills/lavish-design into the place your agent loads skills from, keeping the structure intact. SKILL.md refers to README.md, colors_and_type.css, assets, preview and ui_kits by relative path.
Know it is internal
The skill metadata marks it internal, and the README calls it a brand skill for maintainers. It is also user-invocable, so you can call it by name in agents that expose skills as slash commands.
Describe the artifact
Ask for a Lavish-branded slide, mock or prototype. For artifacts, the agent imports the token stylesheet and builds static HTML. For production code, it copies assets and follows the rules. With no brief, it asks what to build.
Check that it loaded
Ask for a throwaway HTML mock of a settings panel. The result should import colors_and_type.css, use semantic variables, show one brass accent, set headlines in the serif, and contain no emoji or exclamation marks.
Key features
- Drop-in token stylesheetcolors_and_type.css defines the full token system as CSS custom properties: ink, brass, sage, amber, rust, steel and cream colors, type, spacing, radii and shadows.
- Semantic variables onlyArtifacts are built with semantic vars such as --bg, --fg and --accent. The skill says never to hard-code hex values, so a token change reaches every artifact.
- One accent ruleDark ink background, cream type and a single brass accent. The skill rules out a second accent, any gradient and glassmorphism.
- Three type rolesEB Garamond italic carries prose and brand moments, Geist handles interface chrome and Geist Mono covers technical text. Headlines and pull-quotes reach for the serif variable.
- Voice and copy rulesNo emoji, no exclamation marks and no hype phrasing. The README's Content Fundamentals section gives on-brand and off-brand examples for the agent to match.
- Annotation equals focusAn element annotation outline is the focus outline, 2px brass with a 2px offset. Text range annotations use a translucent brass highlight, and both mean attention is here.
- Role colors and shadowsSage marks the agent, amber marks the user and rust marks danger. Shadows appear only on floating surfaces, never on buttons or in-panel cards.
- Icons and the wordmarkWords come first. Icons use Lucide at stroke 1.5 with currentColor, and the agent references the wordmark SVG instead of redrawing it.
- Specimen cardsThe preview folder has one concept per card for the Design System tab: wordmark, ink, brass, signal and steel-cream colors, buttons, pills, bubbles, composer, top bar, voice and iconography.
- Editor UI kitui_kits/editor is a clickable React recreation of the editor chrome. When you need a button, pill, bubble, annotation card or top bar, open its JSX file and copy the token-driven styles object.
Frequently asked questions
What is the lavish-design skill?
It is a brand design system skill in the kunchenguid/lavish-axi repository. It gives an agent Lavish's color and type tokens, interface rules, voice rules, assets, specimen cards and an editor UI kit, so generated HTML artifacts and production UI match the brand instead of drifting into generic styling.
How do I install lavish-design?
Clone the lavish-axi repository and copy .agents/skills/lavish-design into your agent's skills folder, keeping the folder structure. There is no official one-line command for this skill in the README, because the README's quick start installs the public lavish skill instead.
Is lavish-design the same as the lavish skill?
No. The README describes lavish as the public skill that teaches an agent to run the Lavish Editor CLI, which opens agent-made HTML in a local browser for annotation. Lavish-design is an internal brand skill for maintainers, hidden from the default skills listing.
Which AI coding agents can use lavish-design?
The README describes invoking the public lavish skill as a slash command in agents that expose skills that way, Claude Code for example. This skill has a standard SKILL.md and is marked user-invocable. Other agents that load SKILL.md folders may work, but the README does not confirm it.
Can I use lavish-design for my own brand?
Not as is. The tokens, fonts and voice rules describe Lavish, so your pages would look like Lavish. You can use the folder as a template: replace the token values, rewrite the rules of thumb, and keep the same layout of README, stylesheet, assets, specimens and component kit.
What does lavish-design tell the agent to produce?
For visual artifacts such as slides, mocks or throwaway prototypes, it says to copy assets out and create static HTML files for you to view. For production code, it says to copy assets and read the rules. Invoked with no guidance, the agent asks what you want to build.
Why does the skill say the annotation outline equals the focus outline?
Lavish Editor lets you annotate elements and selected text in an agent's HTML artifact. The skill reuses one visual signal for focus and annotation, a 2px brass outline with a 2px offset, and uses a translucent brass highlight for text ranges, so attention always looks the same.
What license does lavish-design use?
The repository metadata lists the MIT license, and the repository description says HTML is the new markdown and Lavish is the new editor for HTML artifacts. Check the repository before redistributing the skill folder, since its assets carry the Lavish brand.