# Table of Contents - [Taste Skill | The Anti-Slop Frontend Framework for AI Agents](#taste-skill-the-anti-slop-frontend-framework-for-ai-agents) - [Documentation | Taste Skill](#documentation-taste-skill) - [Changelog | Taste Skill](#changelog-taste-skill) - [Prompt Guide | Taste Skill](#prompt-guide-taste-skill) --- # Taste Skill | The Anti-Slop Frontend Framework for AI Agents ![](https://www.tasteskill.dev/_next/image?url=%2Fcleanstoneimg.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) [v2 (experimental) just shipped](https://www.tasteskill.dev/changelog) Taste Skill =========== The Anti-Slop Frontend Framework for AI Agents Less slop, designs pop. Open-source skill files that stop Cursor, Claude Code, Codex, Gemini CLI, v0, Lovable, and more from generating generic frontends. $npx skills add Leonxlnx/taste-skillCopy [See what is new in v2](https://www.tasteskill.dev/changelog) [Read the docs](https://www.tasteskill.dev/docs) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg1.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg2.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg3.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg4.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg5.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg6.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg7.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg1.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg2.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg3.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg4.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg5.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg6.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fheroimg7.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill hero preview 1](https://www.tasteskill.dev/_next/image?url=%2Fheroimg1.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill hero preview 2](https://www.tasteskill.dev/_next/image?url=%2Fheroimg2.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill hero preview 3](https://www.tasteskill.dev/_next/image?url=%2Fheroimg3.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill hero preview 4](https://www.tasteskill.dev/_next/image?url=%2Fheroimg4.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill hero preview 5](https://www.tasteskill.dev/_next/image?url=%2Fheroimg5.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill hero preview 6](https://www.tasteskill.dev/_next/image?url=%2Fheroimg6.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill hero preview 7](https://www.tasteskill.dev/_next/image?url=%2Fheroimg7.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) Sponsored by ------------ ### Gold Sponsors [![Novamira logo](https://github.com/use-novamira.png)\ \ Novamira\ \ Full WordPress access for AI agents](https://novamira.ai/) ### Bronze Sponsors * [![Interfaces](https://www.tasteskill.dev/_next/image?url=%2Fsponsors%2Finterfaces-dev-icon.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ interfaces.dev\ \ A design engineering magazine by Jakub Krehel](https://interfaces.dev/?utm_source=tasteskill&utm_medium=sponsorship) * [![React Bits](https://www.tasteskill.dev/sponsors/reactbits-icon.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ React Bits\ \ Animated React components for creative interfaces](https://reactbits.dev/) * [![animations.dev](https://www.tasteskill.dev/_next/image?url=%2Fsponsors%2Fanimations-dev-icon.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ animations.dev\ \ Animation course by Emil Kowalski](https://animations.dev/) * [![IMG.LY](https://www.tasteskill.dev/sponsors/imgly-icon.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ IMG.LY\ \ Creative editing SDKs for web and mobile](https://img.ly/) * [![Sent.dm](https://www.tasteskill.dev/_next/image?url=%2Fsponsors%2Fsent-icon.png&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ Sent.dm\ \ Messaging API for SMS, WhatsApp & RCS](https://www.sent.dm/) * [![Kimi](https://www.tasteskill.dev/_next/image?url=%2Fsponsors%2Fkimi-icon.png&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ Kimi\ \ Open Source Friends](https://www.kimi.com/) * [![Vercel](https://www.tasteskill.dev/sponsors/vercel-icon.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ Vercel\ \ Open Source Program](https://vercel.com/open-source-program) #### Thank you to 16 folks keeping this open. [Join the wall](https://github.com/sponsors/Leonxlnx) * [![dnakov on GitHub](https://github.com/dnakov.png)@dnakov](https://github.com/dnakov "dnakov on GitHub") * [![AkramReshad on GitHub](https://github.com/AkramReshad.png)@AkramReshad](https://github.com/AkramReshad "AkramReshad on GitHub") * [![ajmalaksar25 on GitHub](https://github.com/ajmalaksar25.png)@ajmalaksar25](https://github.com/ajmalaksar25 "ajmalaksar25 on GitHub") * [![krikkkk on GitHub](https://github.com/krikkkk.png)@krikkkk](https://github.com/krikkkk "krikkkk on GitHub") * [![navanchauhan on GitHub](https://github.com/navanchauhan.png)@navanchauhan](https://github.com/navanchauhan "navanchauhan on GitHub") * [![robinebers on GitHub](https://github.com/robinebers.png)@robinebers](https://github.com/robinebers "robinebers on GitHub") * [![JKc66 on GitHub](https://github.com/JKc66.png)@JKc66](https://github.com/JKc66 "JKc66 on GitHub") * [![u2393696078-rgb on GitHub](https://github.com/u2393696078-rgb.png)@u2393696078-rgb](https://github.com/u2393696078-rgb "u2393696078-rgb on GitHub") * [![a-human-created-this on GitHub](https://github.com/a-human-created-this.png)@a-human-created-this](https://github.com/a-human-created-this "a-human-created-this on GitHub") * [![AtharvaJaiswal005 on GitHub](https://github.com/AtharvaJaiswal005.png)@AtharvaJaiswal005](https://github.com/AtharvaJaiswal005 "AtharvaJaiswal005 on GitHub") * [![ghughes7 on GitHub](https://github.com/ghughes7.png)@ghughes7](https://github.com/ghughes7 "ghughes7 on GitHub") * [![mccun934 on GitHub](https://github.com/mccun934.png)@mccun934](https://github.com/mccun934 "mccun934 on GitHub") * [![techmedic5 on GitHub](https://github.com/techmedic5.png)@techmedic5](https://github.com/techmedic5 "techmedic5 on GitHub") * [![bytewerk-dev on GitHub](https://github.com/bytewerk-dev.png)@bytewerk-dev](https://github.com/bytewerk-dev "bytewerk-dev on GitHub") * [![LuisGot on GitHub](https://github.com/LuisGot.png)@LuisGot](https://github.com/LuisGot "LuisGot on GitHub") * [![oskar-collab on GitHub](https://github.com/oskar-collab.png)@oskar-collab](https://github.com/oskar-collab "oskar-collab on GitHub") Works withevery agent. ---------------------- One install. Cursor, Claude Code, Codex, Gemini CLI, v0, Lovable, OpenCode and more. Taste Skill plugs into any tool that supports SKILL.md files. [Install in one command](https://www.tasteskill.dev/docs#installation) [GitHub](https://github.com/Leonxlnx/taste-skill) ![Design System: Typography, Spacing, Colors](https://www.tasteskill.dev/_next/image?url=%2Fc2.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Terminal: npx skills add Leonxlnx/taste-skill](https://www.tasteskill.dev/_next/image?url=%2Fc1.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Button.tsx: Komponentencode](https://www.tasteskill.dev/_next/image?url=%2Fc3.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![SKILL.md Karte: Taste Skill rules for AI coding agents](https://www.tasteskill.dev/_next/image?url=%2Fc4.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill Mark](https://www.tasteskill.dev/_next/image?url=%2Fc5.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) Compatible coding agents [01![](https://www.tasteskill.dev/icons/codex.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)Codex](https://openai.com/codex/) [02![](https://www.tasteskill.dev/icons/claudecode.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)Claude Code](https://claude.com/product/claude-code) [03![](https://www.tasteskill.dev/icons/cursor.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)Cursor](https://cursor.com/) [04![](https://www.tasteskill.dev/icons/opencode.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)OpenCode](https://opencode.ai/) [05![](https://www.tasteskill.dev/icons/geminicli.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)Gemini CLI](https://geminicli.com/) [06![](https://www.tasteskill.dev/icons/aistudio.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)AI Studio](https://aistudio.google.com/) [07![](https://www.tasteskill.dev/icons/v0.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)v0](https://v0.app/) [08![](https://www.tasteskill.dev/icons/lovable.svg?dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)Lovable](https://lovable.dev/) Show all 8 agents Escape![](https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=800&q=80) thegeneric AI![](https://images.unsplash.com/photo-1620712943543-bcc4688e7485?auto=format&fit=crop&w=800&q=80) slop. ![](https://www.tasteskill.dev/_next/image?url=%2Fcleanstoneimg.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) Current skills. --------------- Pick the right skill for the job. [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ taste-skill\ \ v2 experimental\ \ Reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check. Install name: design-taste-frontend.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/taste-skill) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ taste-skill-v1\ \ Legacy\ \ The 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.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/taste-skill-v1) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ gpt-tasteskill\ \ GPT/Codex\ \ Stricter variant for GPT and Codex models with stronger layout variance and motion direction.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/gpt-tasteskill) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ image-to-code-skill\ \ Image-first\ \ Generates design references first, analyzes them deeply, then implements the frontend closely.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/image-to-code-skill) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ redesign-skill\ \ Audit\ \ For existing projects that need a proper visual audit and cleaner redesign pass.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/redesign-skill) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ soft-skill\ \ Visual style\ \ For calm, expensive-looking interfaces with softer contrast, whitespace, and smooth motion.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/soft-skill) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ output-skill\ \ Execution\ \ Keeps outputs complete. Prevents placeholders, skipped sections, and half-finished work.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/output-skill) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ minimalist-skill\ \ Visual style\ \ Cleaner editorial product UI with restrained color, sharp structure, and tighter hierarchy.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/minimalist-skill) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ brutalist-skill\ \ Visual style\ \ Harder mechanical visual language: Swiss typography, raw structure, and sharper contrast.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/brutalist-skill) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ stitch-skill\ \ Export\ \ Google Stitch-compatible semantic design rules with an extra DESIGN.md export format.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/stitch-skill) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ imagegen-frontend-web\ \ Image gen\ \ Premium website reference images: strong art direction, typography, spacing, and anti-slop discipline.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/imagegen-frontend-web) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ imagegen-frontend-mobile\ \ Image gen\ \ Premium mobile screen concepts and flows with clean hierarchy and multi-screen consistency.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/imagegen-frontend-mobile) [![](https://www.tasteskill.dev/_next/image?url=%2Ficontaste.webp&w=96&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ brandkit\ \ Image gen\ \ Brand-kit overview images with logo concepts, color systems, typography, and mockups.](https://github.com/Leonxlnx/taste-skill/tree/main/skills/brandkit) Show all 13 ![](https://www.tasteskill.dev/_next/image?url=%2Fskillsection1.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fskillsection2.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill section preview 1](https://www.tasteskill.dev/_next/image?url=%2Fskillsection1.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill section preview 2](https://www.tasteskill.dev/_next/image?url=%2Fskillsection2.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill section preview 3](https://www.tasteskill.dev/_next/image?url=%2Fskillsection3.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![Taste Skill section preview 4](https://www.tasteskill.dev/_next/image?url=%2Fskillsection4.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) v2 (experimental) What is new in v2. ------------------ A substantial 2026 rewrite of the default skill. The agent now reads the brief, infers the right direction, and ships interfaces that do not look templated. Same install command, much stricter ruleset. Stability: v2 (experimental) is the new default. It is genuinely better than v1 and we recommend it, but it is still iterating. The install name (`design-taste-frontend`) stays stable. Rule wording may change before v2.0.0 stable cuts. $npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" Existing users automatically get v2 on next install. Pinned to v1? [use --skill design-taste-frontend-v1](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill-v1/SKILL.md) . [Read full changelog](https://www.tasteskill.dev/changelog) [CHANGELOG.md on GitHub](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) StructureNew rulesBig bansAnimationStack * §0 Brief inference The agent reads the room before generating: industry, audience, mood, motion depth, layout family. * §2 Brief to design system map When to reach for Material, Fluent, Carbon, Polaris, Atlassian, Primer, GOV.UK, USWDS, Bootstrap, Radix, shadcn, Tailwind official, versus native CSS. * §8 Dark mode protocol Dual-mode by default. Contrast and hierarchy parity across themes. * §11 Redesign protocol Audit-first on existing projects. Preservation rules and explicit modernisation levers. * §12 Block library schema Contract for iterative block additions so the library stays coherent. * §14 Hard pre-flight check Every checkbox must honestly pass before the agent ships output. Projects built with Taste Skill. -------------------------------- [![Screenshot of Floria, a Landing Page project built with Taste Skill](https://www.tasteskill.dev/_next/image?url=%2Fshowcases%2Ffloria.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ ### Floria\ \ Landing Page](https://floria-landing-page.vercel.app/) [![Screenshot of Collective OS, a Technical UI project built with Taste Skill](https://www.tasteskill.dev/_next/image?url=%2Fshowcases%2Fcollective-os.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a)\ \ ### Collective OS\ \ Technical UI](https://collectiveos.vercel.app/) Want yours featured here? DM [@lexnlin](https://x.com/lexnlin) on X. Support Taste Skill ------------------- This framework is completely open source. If it saves you time and sanity, consider supporting the development. [Sponsor on GitHub](https://github.com/sponsors/Leonxlnx) ![](https://www.tasteskill.dev/_next/image?url=%2Fsupportimage.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) ![](https://www.tasteskill.dev/_next/image?url=%2Fsupportimage.webp&w=3840&q=75&dpl=dpl_GZYA2WcGrg1RC1maswr1Xmvhz98a) --- # Documentation | Taste Skill Installation ------------ The default install pulls v2 experimental of the core skill. Works with any agent that supports `SKILL.md` files. $ npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" 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: $ npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1" ### Full bundle Install every skill in the repo with a single command: $ npx skills add Leonxlnx/taste-skill ### Codex Install the full skill bundle into the Codex skills directory: $ npx skills add Leonxlnx/taste-skill -a codex You can also copy any `SKILL.md` into your project, or paste it into ChatGPT or Codex conversations. v2 (experimental) ### 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. Cursor Claude Code Codex Antigravity Gemini CLI AI Studio v0 Lovable OpenCode OpenClaw Windsurf Copilot 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](https://www.tasteskill.dev/docs#anti-slop) . ### 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](https://www.tasteskill.dev/changelog) . `taste-skill`v2 experimental Substantial 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-v1`Legacy The 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-tasteskill`Stable Stricter taste-skill variant for GPT and Codex: higher layout variance, stronger motion direction, tighter anti-slop checks. `redesign-skill`Stable Six-category site audit for upgrading existing projects: finds generic patterns and guides fixes. `soft-skill`Stable Calm, polished UI: softer contrast, more whitespace, spring-style motion. `minimalist-skill`Stable Editorial product UI inspired by Notion and Linear: restrained palette and tighter hierarchy. `brutalist-skill`Stable Swiss typography, raw structure, and sharper contrast. `output-skill`Stable Anti-laziness rules for agents: blocks placeholder comments, skipped sections, and half-finished output. `stitch-skill`Stable Google Stitch bridge with optional DESIGN.md export. `image-to-code-skill`Stable Image-first pipeline: generate reference frames, analyze them, then implement the frontend to match. `imagegen-frontend-web`Stable Image-only skill: horizontal website section frames for handoff to Codex, Cursor, or Claude Code. `imagegen-frontend-mobile`Stable Image-only skill: mobile screen reference frames for the same handoff workflow. `brandkit`Stable Image-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. Headline Maximum two lines on desktop. Subtext Maximum twenty words and four lines. Primary CTA Visible without scroll. Navigation Single line at desktop, height maximum 80px. 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-dashes` Banned everywhere in output copy. Headlines, eyebrows, pills, body, quotes, attribution, captions, button text, alt text. Use a hyphen or restructure the sentence. `Section-numbering eyebrows` 00 / INDEX, 001 · Capabilities, 06 · how it works. Eyebrows should name the topic in plain language. `Hero version labels` V0.6, BETA, INVITE-ONLY in the hero is banned unless the brief is explicitly a product launch. `Photo-credit captions as decoration` Field study no. 12 · Ines Caetano under stock images is banned. Real attribution to real photographers only. `Hero decoration text strips` BRAND. MOTION. SPATIAL., TYPE / FORM / MOTION, and other mono-caps strips at the hero bottom are banned. `Pills overlaid on images` No labels or tags floating on top of photos. Add a caption directly below the image if needed. `Version footers on marketing pages` v1.4.2, Build 0048, last sync 4s ago. Devtool fixtures do not belong on landing or portfolio pages. `Locale, city, time, weather strips` Lisbon 14:23 · 18°C and similar atmospheric strips are banned for 99% of briefs. `Scroll cues` Scroll, down-arrow icons, Scroll to explore. The user is at the hero. They know how scroll works. `Decorative status dots` Zero by default. Only when conveying real semantic state, and at most one per page section. `border-t plus border-b on every row` Banned on long lists and spec tables. Reach for cards, tabs, scroll-snap pills, marquee, or carousel. `Div-based fake product UI` No fake task lists, terminals, or dashboards built out of styled divs. Use real screenshots or generated images. `Three-equal-card feature rows` Banned by default. Use 2-column zig-zag, asymmetric grids, or scroll-pinned alternatives. `AI-purple and mesh blob gradients` Banned by default. Neutral bases with one high-contrast accent. The LILA rule overrides only when the brand is explicitly purple. `Hand-rolled decorative SVG illustrations` Strongly 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. [Usage guide→](https://www.tasteskill.dev/guide) [GitHub Repository→](https://github.com/Leonxlnx/taste-skill) [CHANGELOG on GitHub→](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) --- # Changelog | Taste Skill v2Experimental v2 (experimental) just shipped. ------------------------------- Substantial 2026 rewrite of the default skill. Same install command, now installs v2. Genuinely better than v1, still iterating toward v2.0.0 stable. Install name (`design-taste-frontend`) stays stable. [CHANGELOG.md on GitHub](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) [Read v2 SKILL.md](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) [Legacy v1](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill-v1/SKILL.md) ### v2 (experimental) May 2026Latest * taste-skill: substantial rewrite of the default skill. New title "tasteskill: Anti-Slop Frontend Skill". Around 900 lines, Sections 0 to 14 plus Appendices A to C. * Same install command (\`design-taste-frontend\`) now installs v2. Existing users get it on next install. * Section 0: Brief inference. The agent reads the room (industry, audience, mood, motion, layout) before generating. * Section 2: Brief to design system map. Material, Fluent, Carbon, Polaris, Atlassian, Primer, GOV.UK, USWDS, Bootstrap, Radix, shadcn, Tailwind official, or native CSS. * Section 8: Dark mode protocol. Dual-mode by default, contrast and hierarchy parity. * Section 11: Redesign protocol. Audit-first, preservation rules, explicit modernisation levers. * Section 12: Block library schema. Contract for iterative block additions. * Section 14: Hard pre-flight check. Every checkbox must honestly pass. * Section 9: Complete em-dash ban. Section-numbering eyebrows banned. Version labels in hero banned. Photo-credit captions, decoration text strips, pills on images, version footers, locale or time strips, scroll cues, decorative status dots all banned. border-t plus border-b on every row of long lists banned. Div-based fake product UI banned. * New rules: color consistency lock, shape consistency lock, page theme lock, hero discipline (max 2 lines, 20 words subtext, CTA without scroll), navigation discipline (one line, 80px max), section-layout repetition ban (at least 4 different families across 8 sections), bento cell count rule, italic descender clearance, long lists need a different UI component. * Section 5: canonical GSAP code skeletons for sticky-stack, horizontal-pan, scroll-reveal. Forbidden patterns including raw window.addEventListener('scroll'). Reduced motion mandatory for MOTION\_INTENSITY greater than 3. Motion claimed equals motion shown. * Stack: Tailwind v4 default, Motion (rebranded Framer Motion) recommended, icons from Phosphor, HugeIcons, Radix, Tabler only. Lucide discouraged. Hand-rolled SVG icons banned. * taste-skill-v1 preserved at \`skills/taste-skill-v1/\`. Install legacy explicitly with \`--skill "design-taste-frontend-v1"\`. * README skills table updated. CHANGELOG.md added at repo root. brutalist-skill BETA badge removed. 4 new sponsors added. ### v1.2 May 2026 * imagegen-frontend-web: tightened hero composition rules on 2026-05-04 (default left-text or right-image hero banned, then revised to a composition bias rather than a hard ban in a follow-up commit). * imagegen-frontend-web: required one horizontal reference image per section on 2026-05-03. A page with eight sections expects eight images; combining multiple sections in one frame is not allowed. * imagegen-frontend-web: added brief-adaptation cues plus conditional background rules on 2026-05-03. * imagegen-frontend-web: expanded background modes and gradient discipline (palette-matched gradients encouraged, typical AI-default gradient recipes discouraged) on 2026-05-03. * imagegen-frontend-web: documented per-section framing, composition variety, hero scale presets, conversion-oriented section roles, LAYOUT\_VARIATION and CONVERSION\_DISCIPLINE dials, and expanded clarity checks on 2026-05-03. * imagegen-frontend-web: concept spine, second-read cues, and further anti-slop bans on 2026-05-03. ### v1.1 April 2026 * README: banner image, Taste Skill logo asset, and shield row trimmed to Stars, MIT, Tools, and Changelog on 2026-04-30. * gpt-tasteskill (listed as gpt-taste in the README table): stricter GPT and Codex-oriented rules. Landed on 2026-04-16. * images-taste-skill: image-first reference pipeline added 2026-04-21. Renamed to image-to-code-skill on 2026-04-25. * imagegen-frontend-web and imagegen-frontend-mobile: image-only web and mobile comp skills. Naming and the mobile skill stabilized on 2026-04-25; all three imagegen skills moved under skills/ for npx discovery on 2026-04-28. * brandkit: image-only brand kit boards. Added 2026-04-25, included in the 2026-04-28 skills/ layout. * License: MIT file added on 2026-04-28. * README: documented \`npx skills add\` on the repository URL plus optional \`--skill\` for installing a single skill. ### v1.0 March 2026 * 2026-03-20: repository migrated to the npx skills layout with everything under skills/, llms.txt, and a refreshed README install section. * 2026-03-20: stitch-skill added (Google Stitch-oriented rules with DESIGN.md export). * 2026-03-19: brutalist-skill added and marked beta. * 2026-03-17: minimalist-skill added. * 2026-03-15 to 2026-03-16: soft-skill added with follow-up naming and description fixes. * 2026-03-01: split the former single core package into taste-skill, output-skill, and redesign-skill, plus research notes and example shots. * Seven implementation skills were present after these March commits: taste-skill, redesign-skill, soft-skill, minimalist-skill, brutalist-skill, output-skill, stitch-skill. * taste-skill retained the 3-dial system (DESIGN\_VARIANCE, MOTION\_INTENSITY, VISUAL\_DENSITY), the creative arsenal, and the anti-slop ban lists. ### v0.1 February 2026 * Taste Skill shipped as a single primary SKILL.md with the three dials, creative arsenal growth, and anti-slop enforcement (iterated heavily through 2026-02-21). * README updates across the same window documented installation, dial examples, and the Taste Skill positioning. --- # Prompt Guide | Taste Skill Short prompt guideFull guide Setup Load the skill once at the top of your session, then use one of the two prompts below. -------------------------------------------------------------------------------------- $ npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" [Read SKILL.md on GitHub↗](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) 1\. Creating a new website -------------------------- For a fresh build. Paste, fill the brief, run the prompt. Copy prompt I have loaded tasteskill v2 (experimental) as my only source of design rules. Brief: - Page kind: - Product: - Audience: - Vibe words: <2 to 4 concrete adjectives, e.g. "minimalist, editorial, restrained"> - References: - Avoid: Step 1. Declare your design read in one sentence and the three dial values with one-line reasoning each. Stop. Step 2 (after my OK). Ship a single Next.js page with at least 8 sections. Pick the sections that actually fit the product. At least 4 different layout families across the page. Use real images (gen-tool first, then Picsum-seed). Lock one theme for the whole page. Step 3. Run in writing: - Em-dash audit (zero em-dashes U+2014 or en-dashes U+2013 anywhere) - Pre-Flight Check (Section 14, every box marked Pass or Fail with one-line justification) - Section-Layout-Repetition audit (list each section's layout family) - Hero discipline audit (headline lines, subtext words, CTA visibility) Any Fail blocks completion. 2\. Redesigning an existing website ----------------------------------- For an existing site. The agent audits first, declares the mode, then implements without silently breaking URLs or brand. Copy prompt I have loaded tasteskill v2 (experimental) as my only source of design rules. Brief: - Site: - Mode: - Audience: - What works today: <2 to 3 specifics you want kept> - What is broken today: <2 to 3 specifics you want fixed> - SEO constraint: Step 1. Run the Section 11 audit (Section 11.B in the skill): - Brand tokens currently in use (primary, accent, type stack, radii) - Information architecture (page tree, nav, conversion paths) - Patterns to preserve (signature interactions, recognisable hero, copy voice) - Patterns to retire (slop tells, broken layouts, dead links) - Inferred dial reading of the current site (DESIGN\_VARIANCE, MOTION\_INTENSITY, VISUAL\_DENSITY) - SEO baseline (ranking pages, titles, anchors) Post the audit in writing. Stop. Step 2 (after my OK). Declare the mode (Preserve, Overhaul, or Greenfield-with-content-preserved) and which modernisation levers from Section 11.D you will apply, in priority order. Stop. Step 3 (after my OK). Implement the changes. Keep URL structure, primary nav labels, form field names, brand logo, and legal copy unchanged unless I explicitly approve a change. Step 4. Run in writing: - Em-dash audit - Pre-Flight Check (Section 14) - Preservation audit: list every URL, nav label, form field, and anchor changed. Should be empty unless I approved. - Brand fidelity audit: confirm the existing brand accent color, type stack, and logo treatment survived the redesign. Any Fail blocks completion. Quick reminders --------------- * Zero em-dashes anywhere. Hyphen only. * Hero headline max 2 lines. Subtext max 20 words. CTA visible without scroll. * Navigation max 80 pixels tall, one line at desktop. * Bento grid: N items equals N cells. No empty cells. * One theme for the whole page (no light/dark flips mid-page). * Real images, no div-based fake screenshots, no hand-rolled SVG illustrations. * No section-numbering eyebrows, no version labels in hero, no scroll cues, no locale strips, no decorative status dots. * If MOTION\_INTENSITY is greater than 4, the page actually animates. Otherwise drop the dial. ---