Taste Engine
Taste Engine equips Antigravity, Claude Code, and OpenAI Codex with 10 distinctive aesthetic archetypes, mathematical token scales, and paired dark/light mode contrast gating.
npx skills add kennedys0/taste-engine
Test all 10 styles across dark and light modes. Every component adheres to paired token coupling with guaranteed WCAG AA readability.
Frontend intelligence for AI agents. Continuous 2px blueprint grid borders. High-voltage caution yellow and signal red accents.
Soft incident highlight (top-left) opposes volumetric form shadow (bottom-right).
Refractive sky-glass panels paired with 5-stop molded aqua acrylic push buttons and top horizon sheens.
Purposeful whitespace, tabular-nums alignment, and zero consumer dashboard clutter.
Solid borders with unblurred offset shadows and tactile 2px mechanical displacement.
> Core diagnostic: ALL SYSTEMS NOMINAL.
> Memory heap: 640K OK.
Strict 12-column rhythm with authoritative grotesque typography and singular Swiss red signal accent.
Contemporary whitespace discipline, fine geometric hairline frames, and zero yellow-gradient slop.
Multi-band specular silver reflections, molded hardware bezels, and tactile polymer shells.
From a user prompt to a production-grade interface — here is the 4-phase transformation pipeline executed by your AI agent.
The agent inspects project context, domain, and user persona. It maps requirements to the optimal visual archetype (e.g. Fintech → Data Cockpit, Dev Tools → Retro Terminal or Swiss Editorial) before writing UI code.
Injects structured design tokens: calibrated typographic ratios, strict 4px/8px spatial rhythm, specific border radii, and predictable CSS variables instead of arbitrary inline styles.
Background, surface, ink (text), and border tokens invert in mathematically synchronized pairs. Completely prevents contrast collisions such as black text on dark surfaces or white on white.
Before delivering code, the agent validates the UI against the 7 Universal Quality Gates: no floating ungrounded cards, no generic AI glow halos, no meaningless glassmorphism, and full state completeness.
Select your target AI Agent environment below to get the single-line installation command.
# Global install across all Antigravity workspaces:
node bin/taste-engine.mjs install --agent antigravity --global
# OR local install into the current project workspace:
node bin/taste-engine.mjs install --agent antigravity# Add via Universal Skills CLI:
npx skills add kennedys0/taste-engine
# Verify installed skill in agy CLI:
agy skills list# Installation via Taste Engine installer:
node bin/taste-engine.mjs install --agent claude --global
# OR installation via Skills CLI:
npx skills add kennedys0/taste-engine# Global installation for Codex / Copilot:
node bin/taste-engine.mjs install --agent codex --global
# OR project installation:
node bin/taste-engine.mjs install --agent codex# Install the entire Taste Engine pack in one command:
npx skills add kennedys0/taste-engine
# List installed skills on your machine:
npx skills list# Install only the Minimalism & Data Cockpit style:
npx skills add kennedys0/taste-engine --skill taste-style-minimalism
# Install only the Retro Pixel style:
npx skills add kennedys0/taste-engine --skill taste-style-retro-pixel
# Install only the Neo-Brutalism style:
npx skills add kennedys0/taste-engine --skill taste-style-neo-brutalism
# Install only the Claymorphism style:
npx skills add kennedys0/taste-engine --skill taste-style-claymorphism
# Install only the Swiss / Editorial style:
npx skills add kennedys0/taste-engine --skill taste-style-swiss-editorial
# Install only the Frutiger Aero style (canonical pack for glass & skeuomorphism):
npx skills add kennedys0/taste-engine --skill taste-style-frutiger-aeroRun this command in your repository terminal at any time to open this interactive showcase locally:
node bin/taste-engine.mjs gallery
Technical answers on framework independence, contrast gating, codebase preservation, and custom styling.
By default, AI coding agents generate uniform, repetitive frontend designs (often termed AI-slop): ungrounded floating cards, low-contrast text, purposeless blur effects, and generic blue-purple gradients.
Taste Engine is an intelligence skill pack that equips AI agents with 10 distinctive aesthetic archetypes (Art Deco with Modern, Classic & Minimal expressions, Brutalism with Raw & Bento variants, Claymorphism, Frutiger Aero with Classic, Glass & Tactile expressions, Minimalism with Enterprise data cockpits, Neo-Brutalism, Retro Terminal, Retro Pixel, Swiss Editorial, and Y2K Futurism) backed by strict quality gates to produce production-grade frontend code. Legacy glassmorphism and skeuomorphism requests automatically resolve to Frutiger Aero variants.
No. Taste Engine is 100% framework-agnostic. It injects pure design principles, mathematical tokens, and native CSS recipes.
You can use it seamlessly with React, Next.js, Vue, Svelte, Nuxt, Astro, HTML/CSS, Tailwind CSS, shadcn/ui, MUI, or any other UI stack.
Every style in Taste Engine enforces Strict Paired Coupling. Tokens for background, surface, ink (text), and borders are defined as synchronized mathematical pairs.
When toggling between [data-theme="dark"] and [data-theme="light"], all token pairs invert symmetrically and are guaranteed to meet minimum WCAG AA (≥ 4.5:1) readability standards. Anti-slop quality gates explicitly ban dark text on dark surfaces or pale text on light cards.
No. Taste Engine is non-destructive and additive. All tokens and CSS classes use unique namespaces such as --taste-[style]-*, ensuring zero collision with your global stylesheets.
Quality gates also instruct the agent to respect existing component architecture and naming conventions in established projects.
Yes. Taste Engine provides 10 independent standalone skills in the optional-standalone-skills/ directory. You can install each style individually using:
npx skills add kennedys0/taste-style-[style-name]
For example: npx skills add kennedys0/taste-engine --skill taste-style-minimalism or npx skills add kennedys0/taste-engine --skill taste-style-swiss-editorial. This minimizes token usage if your project only requires a single aesthetic.
In Antigravity IDE, check your installed skills list or run agy skills list in the CLI.
To test directly in chat, ask: "Use Taste Engine to review and redesign this card component with a Bento Grid aesthetic." Your agent will recognize the skill and apply its architectural constraints.
Yes. You can override CSS custom properties in your stylesheets (for example, overriding --taste-neo-accent: #ffe600; or --taste-bento-accent-cta: #ff5722;).
To contribute a new aesthetic pack, add a markdown specification in skills/taste-engine/styles/ and validate it with our test runner: python3 skills/taste-engine/scripts/validate-pack.py.
Every style follows a standardized CSS variable naming convention, easily mapped to Tailwind CSS theme configuration or plain CSS custom properties.
| CSS Variable Pattern | Semantic Role | Dark Mode Behavior | Light Mode Behavior |
|---|---|---|---|
--taste-[style]-bg |
Canvas background layer | Deep matte charcoal / velvety graphite | Crisp white / soft pale slate tint |
--taste-[style]-surface |
Card, panel, and modal containers | Elevated matte surface with subtle bevel | Clean elevated card with soft rim |
--taste-[style]-text |
Primary readable typography | High-contrast crisp white (min 4.5:1) | High-contrast slate/black (min 4.5:1) |
--taste-[style]-muted |
Secondary labels & subtitles | Medium cool grey (accessible contrast) | Medium slate grey (accessible contrast) |
--taste-[style]-border |
Card outlines & structural lines | Subtle translucent white rim | Subtle translucent dark rim |
--taste-[style]-accent |
Primary action buttons & indicators | High-chroma highlight | Deep, contrast-anchored highlight |
/* Root Dark Theme Default (Codex Slate-Grey) */
:root {
--app-bg: var(--taste-bento-bg, #212328);
--app-surface: var(--taste-bento-surface, #2b2e36);
--app-text: var(--taste-bento-text, #f3f4f6);
--app-border: var(--taste-bento-border, rgba(255, 255, 255, 0.12));
--app-accent: var(--taste-bento-accent, #10b981);
}
/* Light Theme Transition */
[data-theme="light"] {
--app-bg: #f7f7f8;
--app-surface: #ffffff;
--app-text: #202123;
--app-border: rgba(0, 0, 0, 0.10);
--app-accent: #059669;
}