taste-skill: 100K-Star AI Agent Skill Enforces 13 Design Rules

What Is taste-skill?

taste-skill is an Agent Skill (package name design-taste-frontend) that installs into AI coding assistants such as Claude Code, Codex, and Cursor. It is not a component library, template site, or Figma plugin. Instead, it provides a design process plus a checking tool that the agent follows automatically before writing any code. The only dependencies are Node 22+ and a Chrome/Edge/Chromium browser; no API keys are required. The skill targets two distinct page types: pages for viewing (landing pages, marketing sites, portfolios, event pages) and interfaces for use (dashboards, admin panels, settings, inboxes), each with separate rule sets.

Repository Structure

The repository contains 92 files organized into four main parts:

Methodology : SKILL.md (39.5 KB) defines a 10-step workflow starting with “page vs. interface” classification and ending with a “house rules” table. The references/ folder (11 files, 287 KB) covers typography, color, layout, imagery, motion, copy, scenarios, page frameworks, app interfaces, critique standards, and a “trope registry” ( tells.md).

Asset Library ( library/, 9 JSON files, 1.65 MB total): sites.json (869 KB) holds deconstructed data from 247 real websites. Other files include directions.json (20 design directions), heroes.json (hero compositions), sections.json (section blueprints), palettes.json, type.json, photos.json, and app.json (7 app styles).

Execution Scripts : draw.mjs (54 KB) samples direction, fonts, palette, and hero; inspect.mjs (28.8 KB) launches a real browser to measure the rendered page at 1440, 768, and 390 px widths; lint.mjs (11.7 KB) scans source code for banned patterns; assets.mjs (64.5 KB) fetches licensed photos from open repositories; probe.mjs (82.5 KB) assists research-phase measurements; scenes.mjs captures scroll-scene frames.

Examples : examples/v2/ contains four finished screenshots, each generated from a one-sentence brief.

Three-Step Workflow: Draw, Write, Measure

The most counter-intuitive step comes first.

Step 1: Draw a Direction — Don’t Invent One

When asked to “design a coffee shop website,” models pick the category default. The skill replaces that with a lottery: draw.mjs draws three directions from the 20 researched directions, and the human picks one. In a test run with the brief “small coffee roastery in a Munich alley,” the three drawn directions were:

“The page is the thing itself” — find a print artifact native to the industry and make the page that artifact (e.g., a wedding site becomes an invitation).

“Uneven photos” — like a gallery wall, each photo different size/position, text small and light in the middle.

“Darkroom” — entire page a dark field; only illuminated elements float, each the brightest thing on screen.

None of these look like a “typical coffee shop site.” The skill’s mantra: “If a direction feels unfamiliar, that’s good — the familiar one is exactly what this skill exists to avoid.” After selection, the same command with --direction emits a full design spec: font system, palette ratios, hero composition, and section blueprints.

Step 2: The Idea Must Grow From the Subject

The methodology requires filling a sentence template:

On this page, [something unique to this subject] becomes the [device the direction demands] .

A “competitor test” follows: swap the subject for the shop next door; if the sentence still holds, the idea belongs to the category, not the specific business. Data from the research shows the lowest-scoring designs recorded generic thoughts like “nothing beyond the standard dark SaaS launch formula” or “no visual idea beyond clarity,” while the highest scores came from sentences only that subject could own.

Step 3: Measure After Writing — Don’t Just Ship

The agent opens a real browser, measures at three breakpoints, saves screenshots, then critiques its own screenshots (not the code) against 14 checks weighted by Awwwards criteria (Design 40%, Usability 30%, Creativity 20%, Content 10%). It fixes the three worst issues, re-measures, and repeats up to three rounds.

Linting the “Standard AI Landing Page”

The author deliberately built a stereotypical AI landing page: purple-blue gradient hero, eyebrow label, oversized headline, glassmorphism cards, three icon cards, 01/02/03 numbering, hairline dividers, and marketing words like unlock , supercharge , elevate . Running lint.mjs produced:

RESULT: 13 FAIL, 6 WARN — fix the FAILs before rendering.

Each failure includes line numbers: [gradient] — gradient fills (2 occurrences) [purple] — indigo/violet signature colors (2) [eyebrow] — eyebrow labels above headlines (2) [shadow] — static elements with drop shadows [hairline] — hairline dividers (2) [numbering] — decorative 01/02/03 numbering (3) [mono] — monospace font usage

Warnings: [glass] glassmorphism, [copy] stock marketing words (Unlock/elevate/Blazing fast), [cta-copy] generic button text (Get started)

The author notes they didn’t deliberately pack these tropes; they simply wrote what they see daily from AI generators. All 13 FAILs hit, confirming the linter detects patterns rather than post-hoc labeling.