Taste Skill v2.1: How to Stop AI Websites Looking the Same
Taste Skill v2.1 gives AI coding agents design taste. Here's how the GitHub tool works, how to install it, and what it actually produces.
What is Taste Skill and why did it go viral?
Taste Skill is a GitHub project that gives AI coding agents a structured design process instead of letting them default to generic layouts. It has passed 108,000 stars and more than 7,000 forks, and version 2.1 rebuilt it from a single markdown prompt into a full folder of reference files, a style library, and its own verification scripts. The core problem it solves is simple: ask any model to design a page and it reaches for the same centered headline, three icon cards, and soft gradient background every time. Taste Skill removes that decision from the model by handing it a researched direction instead.
TL;DR
- Taste Skill v2.1 replaced the original single-prompt design with a multi-file system built from a study of 247 curated sites on One Page Love and Awwwards.
- The tool defines 20 named design directions (like “the dark room” or “the specimen catalog”) and randomly deals three of them per build, forcing the agent to adapt a real concept to the client instead of inventing one from scratch.
- A browser-based inspector script opens the generated page in real Chrome at three screen widths and fails it on measurable slop, such as missing margins or an uneven layout, rather than relying on a vibe check.
- The skill pulls real public domain photos from sources like Wikimedia Commons, OpenVerse, and The Met, crediting them on the page instead of using stock photography or gray placeholder boxes.
- Version 2.1 added a separate app screen mode for dashboards and admin panels, based on a study of 23 real product screens and enforcing rules against heavy shadows, glass effects, and placeholder data.
- A real test build took close to an hour and a few hundred thousand tokens, so the tool works best paired with a flat-rate or high-limit subscription rather than pay-per-token API billing.
- The output is noticeably more distinctive than default AI design, but it still needs human review: in one build, the inspector passed a layout bug that a human reviewer caught and the model then dismissed.
| Vendor | Tier | Risk | ApprovalNEW |
|---|---|---|---|
| Northwind Supply | Tier 1 | Low | Approved |
| Acme Logistics | Tier 2 | Medium | Approve |
| Helios Data | Tier 1 | High | Pending |
| Granite Freight | Tier 3 | Low | Approved |
| Pinecrest Labs | Tier 2 | Low | Approve |
How does Taste Skill actually generate a design?
The process runs in six steps, and the structure is what separates it from a normal design prompt.
First, the agent reads the client brief and extracts 8 to 12 facts that are specific to that one client: street address, materials, opening hours, numbers mentioned in the brief. This grounds the design in something real before any visual decisions get made.
Second, a script randomly deals three of the 20 design directions, and the agent picks whichever one fits the brief. This is the mechanism that breaks the “same template every time” problem: the model isn’t choosing from infinite options, it’s choosing from a constrained, curated set and has to justify the fit.
Third, the agent writes a single sentence tying the client’s own material to the chosen direction. This becomes the design’s thesis.
Fourth, it builds the actual page using real photos pulled from open collections.
Fifth, it checks the page in an actual browser window at three different widths and fails it for measurable issues: no clear title on the first screen, mismatched margins, lopsided sections, or long blank gaps. The thresholds for what counts as a failure were pulled from the original study of curated sites, so a “strong” page has to hold its margins within a few pixels of what high-quality reference sites actually use.
Sixth, the agent reviews its own screenshots and fixes the top three problems it finds, repeating for up to three rounds.
Version 2.1 also added motion rules, derived from studying the most recent 100 Awwwards “site of the day” picks to see what actually moves on award-winning pages. A scroll-scene engine shipped as groundwork for larger scroll-driven effects, though the full scene library is slated for a later version.
How does the photo sourcing work?
Instead of gray placeholder boxes or generic stock photography, Taste Skill searches open image collections, including Wikimedia Commons, OpenVerse, and The Met, and only uses files under public domain or open licenses (CC0, CC BY, CC BY-SA). It places the attribution directly on the page. For a location-based business like a shop or café, this means the agent can pull an actual archive photograph of the relevant street or building rather than inventing a visual.
This works well for physical places with a real-world footprint. It’s less useful for software products, where no real photo exists and the agent has to fall back to building the interface itself.
What’s new in the app screens feature?
Remy.
Earlier versions only handled marketing landing pages. Version 2.1 added a separate path for dashboards, admin views, and settings screens. The skill first asks whether the brief is for a landing page or an app screen, and app screens follow their own rules, distilled from a study of 23 real product interfaces. The agent deals from seven named app styles (the brief mentions examples like “the achromatic ledger,” “the data terminal,” and “the pastel consumer”) and checks the output against rules like no heavy shadows, no glass effects, no rainbow-colored charts, no placeholder data, and a sidebar that collapses properly on mobile.
How do you install and run it?
Installation uses npx skills add with the repository URL and the skill name (design-taste-frontend). There are also plugin versions for Claude Code and Codex. Requirements are Node 22 or newer and a Chromium-based browser (Chrome, Edge, or Chromium) installed locally, since the inspector script needs a real browser to measure pages. The skill installs nothing beyond that and needs no API keys of its own; it runs through whatever coding agent and model you already have configured.
Older, simpler styles from earlier versions (described as “minimalist” and “brutalist” presets) were moved out to a separate repository called Taste Skill Classics, using the same install naming convention.
Is Taste Skill worth running for real projects?
It’s clearly stronger than default AI-generated design, based on the build described in the source demonstration: a two-person bike repair shop brief produced a page using a “printed annual” direction with an ox-blood and gray color scheme, large type, and real archive photography, a result that doesn’t read as a generic AI template. The inspector loop also did real work, failing the page twice for wrapping headlines and a misplaced label before passing with zero failures on the third round.
But it has real costs and real limits. The build in question took close to an hour and burned a few hundred thousand tokens, numbers the skill’s own documentation cites as typical (roughly 30 to 45 minutes and a few hundred thousand tokens per build). That’s expensive if you’re paying per token on a premium model, and it rules the tool out for quick mockups.
The checks aren’t infallible either. In the demonstrated build, a photo strip overlapped the booking form on desktop and the automated inspector passed it anyway. A secondary review step flagged the same issue, and the model dismissed it rather than fixing it. The skill also doesn’t verify factual accuracy: most of the sourced photos weren’t actually from the brief’s stated location, and the agent invented a street address and pricing that weren’t grounded in anything real. Human review is still necessary before shipping.
The project is also moving fast and occasionally breaking. One release (2.1.0) shipped with a YAML formatting error in the skill’s own description file that broke loading in Claude Code; it was patched within the same day in 2.1.1/2.1.2.
How does this fit into an AI coding workflow?
Because Taste Skill burns a lot of tokens per build, it pairs naturally with flat-rate or high-limit subscription plans rather than metered API billing, since cost stops scaling linearly with every design iteration. It also works with any coding agent capable of loading skills, which means you can run the identical brief across multiple models and compare the resulting pages side by side to see which model makes better design choices within the same constraints. Scheduling a recurring job to re-run the inspector against a live site and auto-fix failures on a cheaper model is another practical pattern the tool’s structure enables, since the inspection and the generation steps are separable.
Frequently Asked Questions
What is Taste Skill used for?
It’s a skill for AI coding agents (Claude Code, Codex, and similar tools) that adds a structured design process to landing page and app screen generation, aiming to avoid generic AI-looking layouts by applying researched design directions and automated visual checks.
Does Taste Skill require an API key or paid service?
No. The skill itself installs nothing and needs no API keys. It runs through whatever AI coding agent and model access you already have, though it does require Node 22+ and a Chromium-based browser installed locally for its inspection scripts.
How long does a Taste Skill build take?
The skill’s own documentation estimates roughly 30 to 45 minutes and a few hundred thousand tokens per page, which matches a real-world test build that took close to an hour.
Does Taste Skill guarantee a bug-free, accurate website?
No. Its automated inspector checks layout measurements like margins and spacing, but it can still pass pages with visible layout bugs, and it doesn’t verify factual details like addresses, prices, or whether sourced photos actually match the claimed location. Human review is still required.
What’s different between landing page mode and app screen mode?
Landing page mode draws from 20 design directions studied from curated marketing sites. App screen mode, added in version 2.1, draws from seven app-specific styles based on a study of real product interfaces, and enforces different rules suited to dashboards and admin screens, such as banning heavy shadows, glass effects, and placeholder data.