Getting started.
Install taste-skill, understand how the v2 skill reads a brief, and learn the rules it enforces.
Installation
The default install pulls v2 experimental of the core skill. Works with any agent that supports SKILL.md files.
Adds a SKILL.md file to your project. The agent reads it automatically. No extra configuration is required.
Legacy v1
If your workflow depends on v1 behavior, install it explicitly:
Full bundle
Install every skill in the repo with a single command:
Codex
Install the full skill bundle into the Codex skills directory:
You can also copy any SKILL.md into your project, or paste it into ChatGPT or Codex conversations.
The default install is now v2 experimental.
v2 is genuinely better than v1 and we recommend it, but it is still iterating. Refinements may land in any pre-release. The install name (design-taste-frontend) stays stable. Section numbering and rule wording may change before v2.0.0 stable cuts.
Compatible Agents
Taste Skill works with every major AI coding agent that supports skill files.
How v2 thinks
v2 reads the brief first. The agent infers the right layout variance, motion, and density from cues like "minimalist", "editorial", "SaaS", or "portfolio", then picks the design direction.
Brief inference (Section 0)
Reads the page kind, vibe words, audience, references, and brand assets before any code. Declares a one-line design read instead of defaulting to AI-purple gradients and three centered feature cards.
Brief to design system map (Section 2)
When the brief reads as Material, Fluent, Carbon, Polaris, Atlassian, Primer, GOV.UK, USWDS, Bootstrap, Radix, shadcn, or Tailwind, the agent reaches for the official package. Aesthetic-only briefs are labeled honestly as web approximations.
Animation skeletons (Section 5)
Canonical code patterns for sticky-stack, horizontal-pan, and scroll-reveal stagger. Hand-rolled scroll listeners and rAF loops touching React state are out.
Dark mode protocol (Section 8)
Dual-mode by default. WCAG AA contrast, hierarchy parity, brand fidelity in both themes. Off-black and off-white, never pure values.
Big bans (Section 9)
Strict list of the patterns that make generated frontends look the same. The agent enforces these on every output. See the ban list below.
Redesign protocol (Section 11)
Audit-first on existing projects. Greenfield, preserve, or overhaul mode. URL structure, nav labels, and form field names never change silently.
Block library schema (Section 12)
Schema for real, source-backed blocks: hero, feature, social-proof, pricing, CTA, footer, portfolio, transition, navigation. Implementations land iteratively.
Hard pre-flight check (Section 14)
Every checkbox must honestly pass before the agent ships. No box, no ship.
Skill files
The repo bundles multiple SKILL.md files. Enable the ones that match your stack. For release notes, see the changelog.
taste-skillv2 experimentalSubstantial 2026 rewrite of the default skill. Reads the brief, infers the right design direction, ships interfaces that do not look templated. Brief inference, design-system map, complete em-dash ban, canonical GSAP code skeletons, redesign-audit protocol, strict pre-flight check. Install name: design-taste-frontend. Actively iterating toward v2.0.0 stable.
taste-skill-v1LegacyThe original v1 of taste-skill, preserved for projects depending on its exact behavior. Install with `--skill "design-taste-frontend-v1"`. Use only if v2 breaks something specific in your workflow.
gpt-tasteskillStableStricter taste-skill variant for GPT and Codex: higher layout variance, stronger motion direction, tighter anti-slop checks.
redesign-skillStableSix-category site audit for upgrading existing projects: finds generic patterns and guides fixes.
soft-skillStableCalm, polished UI: softer contrast, more whitespace, spring-style motion.
minimalist-skillStableEditorial product UI inspired by Notion and Linear: restrained palette and tighter hierarchy.
brutalist-skillStableSwiss typography, raw structure, and sharper contrast.
output-skillStableAnti-laziness rules for agents: blocks placeholder comments, skipped sections, and half-finished output.
stitch-skillStableGoogle Stitch bridge with optional DESIGN.md export.
image-to-code-skillStableImage-first pipeline: generate reference frames, analyze them, then implement the frontend to match.
imagegen-frontend-webStableImage-only skill: horizontal website section frames for handoff to Codex, Cursor, or Claude Code.
imagegen-frontend-mobileStableImage-only skill: mobile screen reference frames for the same handoff workflow.
brandkitStableImage-only skill: brand identity boards for the same handoff workflow.
The locks (Section 4)
Three rules the agent never relaxes. They keep a generated page visually coherent end-to-end.
Color Consistency Lock
One accent across the whole page. A warm-grey site does not suddenly get a blue CTA in section 7.
Shape Consistency Lock
One corner-radius system per page. All-sharp, all-soft, or all-pill, with a documented exception when mixing.
Page Theme Lock
Light, dark, or auto, picked once at the page level. No mid-page flips into a different theme.
Hero discipline
Hard rules for above-the-fold. The hero must fit the initial viewport.
The Anti-Slop Ban System
Section 9 of SKILL.md ships a strict ban list. The agent enforces these on every generation. The full list lives in the skill file.
Em-dashes and en-dashesBanned everywhere in output copy. Headlines, eyebrows, pills, body, quotes, attribution, captions, button text, alt text. Use a hyphen or restructure the sentence.
Section-numbering eyebrows00 / INDEX, 001 · Capabilities, 06 · how it works. Eyebrows should name the topic in plain language.
Hero version labelsV0.6, BETA, INVITE-ONLY in the hero is banned unless the brief is explicitly a product launch.
Photo-credit captions as decorationField study no. 12 · Ines Caetano under stock images is banned. Real attribution to real photographers only.
Hero decoration text stripsBRAND. MOTION. SPATIAL., TYPE / FORM / MOTION, and other mono-caps strips at the hero bottom are banned.
Pills overlaid on imagesNo labels or tags floating on top of photos. Add a caption directly below the image if needed.
Version footers on marketing pagesv1.4.2, Build 0048, last sync 4s ago. Devtool fixtures do not belong on landing or portfolio pages.
Locale, city, time, weather stripsLisbon 14:23 · 18°C and similar atmospheric strips are banned for 99% of briefs.
Scroll cuesScroll, down-arrow icons, Scroll to explore. The user is at the hero. They know how scroll works.
Decorative status dotsZero by default. Only when conveying real semantic state, and at most one per page section.
border-t plus border-b on every rowBanned on long lists and spec tables. Reach for cards, tabs, scroll-snap pills, marquee, or carousel.
Div-based fake product UINo fake task lists, terminals, or dashboards built out of styled divs. Use real screenshots or generated images.
Three-equal-card feature rowsBanned by default. Use 2-column zig-zag, asymmetric grids, or scroll-pinned alternatives.
AI-purple and mesh blob gradientsBanned by default. Neutral bases with one high-contrast accent. The LILA rule overrides only when the brand is explicitly purple.
Hand-rolled decorative SVG illustrationsStrongly discouraged as default. Acceptable only for a simple geometric mark or when the brief explicitly asks for it.
window.addEventListener('scroll')Banned in JS. Use Motion useScroll, GSAP ScrollTrigger, IntersectionObserver, or CSS scroll-driven animations.
Customization
The SKILL.md file is fully editable. Open it in your project root and modify, add, or remove any rule to match your design direction.
The agent reads the file on each run, so edits apply on the next generation. If you maintain a project-specific style guide, paste it at the top of the SKILL.md and the agent will use it as the dominant source of truth.
Learn More
More material lives in the usage guide, the GitHub repo, and the changelog on GitHub.