Sources

# Taste Skill (Leonxlnx/taste-skill), design-taste-frontend v2 (experimental)
- id: taste-skill · url: https://github.com/Leonxlnx/taste-skill · fetched: 2026-09-27 · method: repo@ce26fc25c0e5e8cab638f883de62d9a86ee5e45b
- review_by: 2026-12-26 (perishable +90d) · licence note: paraphrased digest, not a mirror (upstream MIT)
> 中文导语：taste-skill 是安装量最大的"反模板"前端 skill 之一：默认 skill 已是 v2 实验版（1,206 行单文件），核心是"先读需求再定三档旋钮"、官方设计系统映射、重设计协议和一长串硬性禁用清单；仓库另有 12 个 skill，包括生图出稿和"先出图再写码"的流程。它有几条值得借的机制，也有不少会过时的绝对禁令和固定口味的默认值。

Read: the repo at commit ce26fc2 (2026-09-26, main): README.md, CHANGELOG.md, `.claude-plugin/*.json`, all 13 `skills/*/SKILL.md` frontmatters, the full `skills/taste-skill/SKILL.md` §0–§14 and appendix headings, `skills/redesign-skill/SKILL.md` in full, `skills/image-to-code-skill/SKILL.md` §1–§3 and §27, `skills/gpt-tasteskill/SKILL.md` §1–§3. Also fetched https://www.tasteskill.dev/changelog (2026-09-27) and GitHub API (stars, per-file last commits).

## Key facts
Repo and versions
1. 90,402 stars, created 2026-02-19, MIT. Install: `npx skills add https://github.com/Leonxlnx/taste-skill [--skill "<install name>"]`; also a Claude Code plugin manifest (`.claude-plugin/plugin.json`, version 1.0.0, source `./`). README is sponsor-heavy (Kimi, Fluxion AI affiliate links).
2. **13 skills** in `skills/` (README §Skills): 10 implementation skills — `design-taste-frontend` (taste-skill, v2 experimental), `design-taste-frontend-v1`, `gpt-taste`, `image-to-code`, `redesign-existing-projects`, `high-end-visual-design` (soft-skill), `full-output-enforcement`, `minimalist-ui`, `industrial-brutalist-ui`, `stitch-design-taste` (Stitch DESIGN.md export) — plus 3 image-only skills: `imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit`.
3. v2 is labelled "experimental" and has been the default install since **May 2026** (site changelog); `skills/taste-skill/SKILL.md` last changed 2026-05-26 ("round-5 hardening ... all Opus 4.7"). It is **1,206 lines**; the site changelog's "around 900 lines" is wrong for the current file. v2.0.0 "stable" has not been cut.
4. `redesign-existing-projects` was last changed **2026-03-20** (v1 era) and was not brought in line with v2: it still uses em-dashes, recommends Outfit and serif headers for editorial work, and says "Randomize dates to appear real".

design-taste-frontend v2 (skills/taste-skill/SKILL.md)
5. Scope line at the top: "Landing pages, portfolios, and redesigns. Not dashboards, not data tables, not multi-step product UI." §13 lists what is out of scope: dashboards/admin, data tables (TanStack Table / AG Grid), multi-step forms, code editors, native mobile (HIG/Material directly), realtime collaboration UIs.
6. §0 Brief inference: read page kind, vibe words, references, audience, existing brand assets, quiet constraints (public sector, regulated, kids); state one line "Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <design system or aesthetic family>." Ask exactly one question only when the read truly diverges.
7. §1 **Three dials** 1–10: `DESIGN_VARIANCE` (symmetry → "artsy chaos"), `MOTION_INTENSITY` (static → cinematic), `VISUAL_DENSITY` (gallery → cockpit). Baseline **8 / 6 / 4**. Inference table, e.g. minimalist/calm/Linear-style 5–6 / 3–4 / 2–3; playful/Awwwards 9–10 / 8–10 / 3–4; trust-first/public-sector 3–4 / 2–3 / 4–5; redesign-preserve = match existing (+1 motion); redesign-overhaul = +2 / +2 / match. Presets: SaaS landing 7/6/4, agency 9/8/3, premium consumer 7/6/3, designer portfolio 8/7/3, developer portfolio 6/5/4, editorial 6/4/3, public service 3/2/5.
8. §7 dial definitions: variance 1–3 symmetric 12-col grid, 4–7 offsets and mixed aspect ratios, 8–10 masonry / fractional grids / "massive empty zones" (levels 4–10 must collapse to one column below 768px); motion 4–7 = `transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)`, 8–10 scroll-driven/GSAP; density 1–3 `py-32`–`py-48`, 4–7 `py-16`–`py-24`, 8–10 1px dividers and `font-mono` for all numbers.
9. §2 **Brief → design system map** ("install the official package, never recreate its CSS"; "one system per project"): Fluent UI (`@fluentui/react-components` / web components), Material Web (`@material/web`), Carbon (`@carbon/react`), Shopify Polaris (polaris.js web components), Atlassian (`@atlaskit/*`), Primer (`@primer/css`, `@primer/react-brand`), GOV.UK Frontend, USWDS, Bootstrap 5.3, Radix Themes, shadcn/ui, Tailwind v4. §2.B: aesthetics (glass, bento, brutalism, editorial, dark tech, aurora, kinetic type) have no official package; "Apple Liquid Glass ... There is no official liquid-glass.css" — web versions must be labelled approximations.
10. §3 defaults: React/Next.js RSC, Tailwind v4, Motion (`motion/react`), self-hosted fonts (`next/font` or `@font-face`; never a Google Fonts `<link>` in production); icons Phosphor → HugeIcons → Radix → Tabler, Lucide discouraged, hand-drawn SVG icons banned; breakpoints 640/768/1024/1280/1536; `min-h-[100dvh]`, never `h-screen`; check `package.json` before importing.
11. §4 typography: Inter discouraged as default (allowed for neutral/Linear-style or public-sector); suggested sans Geist, Outfit, Cabinet Grotesk, Satoshi; serif "very discouraged as default", Fraunces and Instrument Serif banned as defaults, a rotation pool when a serif is justified; italic display words with descenders need `leading-[1.1]` + `pb-1`.
12. §4 colour: max 1 accent, saturation <80%; "LILA rule" against AI purple/blue glow; **premium-consumer palette ban** with explicit hex families (cream backgrounds such as #f5f1ea / #faf7f1, brass/clay/oxblood accents such as #b08947 / #9a2436, espresso text #1a1714) and seven named alternative families; colour, shape (one radius system) and page-theme locks.
13. §4.7 layout hard rules: hero headline ≤2 lines, subtext ≤**20 words** and ≤4 lines, CTA visible without scroll, hero top padding ≤`pt-24`, ≤4 hero text elements; nav on one line, ≤80px tall (64–72 default); logo wall under the hero with real SVG logos only; at most 1 eyebrow per 3 sections (mechanical count ≤ ceil(sections/3)); ≥4 layout families across 8 sections; ≤2 consecutive image/text zigzag sections; bento N items = N cells; split-header (big left headline + small right paragraph) banned as default.
14. §4.8 image strategy: use an image-generation tool first, real photos second (`picsum.photos/seed/...` as placeholder), else labelled TODO slots; "Div-based fake screenshots are banned"; "Hero needs a real visual."
15. §5 motion: canonical GSAP skeletons for sticky-stack and horizontal pan (`start: "top top"`, `pin: true`, scrub), a Motion `whileInView` stagger; `window.addEventListener('scroll')` banned; reduced motion mandatory when `MOTION_INTENSITY > 3`; "motion claimed, motion shown" (claim >4 → must animate, else drop to 3). §6 targets LCP <2.5 s, INP <200 ms, CLS <0.1.
16. §8 dark mode: dual-mode by default, one token strategy (Tailwind `dark:` or CSS variables), hierarchy parity, no pure #000/#fff, test both modes.
17. §9 AI tells incl. §9.F "production-test tells" (version labels in hero, photo-credit captions as decoration, locale/weather strips, scroll cues, decorative status dots, border on every list row, fake product UI from divs) and §9.G a **total em-dash ban** ("zero em-dashes"), extended to en-dashes: ranges must use a hyphen, and any visible `—` or `–` fails the pre-flight; only the hyphen and the math minus are allowed.
18. §11 **Redesign protocol**: detect mode Greenfield / Redesign-Preserve / Redesign-Overhaul (ask once if unclear); audit first (brand tokens, IA, content blocks, patterns to keep/retire, the existing site's dial reading, SEO baseline — "SEO migration is the #1 redesign risk"); preservation rules (IA, slugs, anchor IDs, analytics event names, copy voice, existing a11y wins); levers in priority order: typography → spacing → colour → motion → hero/key-section recomposition → full block replacement; decision tree (sound IA/SEO → targeted evolution, "~70% of value at ~40% of risk"); **§11.F never changes silently**: URL structure/slugs, primary nav labels, form field names or order, logo/wordmark, legal/consent/cookie copy.
19. §12 block-library contract (per-block file with dial-compatibility ranges, props, mobile fallback, motion per band, dark-mode notes); status "schema defined here", no blocks shipped in the repo.
20. §14 pre-flight: **62** checkboxes, "If a single checkbox cannot be honestly ticked, the page is not done." Several are mechanical (eyebrow count, CTA wrap, duplicate CTA intent, no `—`), the rest self-attested.

Other skills
21. `redesign-existing-projects`: Scan → Diagnose (audit lists for typography, colour, layout, states, content, components, icons, code quality, "strategic omissions" such as legal links, 404, skip link) → Fix with the existing stack; fix order font swap → palette cleanup → hover/active → layout/spacing → replace generic components → loading/empty/error → type polish. No mode detection and no "never changes silently" list (those live only in v2 §11).
22. `image-to-code`: image generation is mandatory first for visual web work; generate one fresh image per section (never crop an old board); "deep analysis" extracts text, type, spacing, buttons and colour; an anti-drift rule forbids simplifying the build back to templates. Fidelity is self-assessed (§35 "Clarity check" asks the model to "verify internally"); there is no measured comparison. Own dials (e.g. `ART_DIRECTION 8`, `IMPLEMENTATION_CLARITY 9`, `ANALYSIS_PRECISION 10`).
23. `gpt-taste`: "Python-driven true randomization" is a simulated script in the model's plan, seeded by e.g. prompt character count, choosing hero, type stack (Satoshi, Cabinet Grotesk, Outfit or Geist, "NEVER Inter"), components and GSAP paradigms; AIDA page order; `py-32 md:py-48` section spacing.

## What it changes for the skills
- skills/design-studio/references/platforms/web.md (or platforms/README.md): adopt an "official design system map" with the honesty rule (use the package, do not re-create its CSS; label aesthetic approximations such as web Liquid Glass), and add domestic systems (TDesign, Arco, Semi, Ant Design) that taste-skill lacks.
- skills/design-studio/references/process/redesign.md: add the "never changes silently" list (URLs/slugs, nav labels, form field names and order, wordmark, legal/consent copy, analytics event names) and the SEO/analytics baseline to the equity audit; keep our function-map-first structure, which taste-skill does not have.
- skills/design-studio/references/process/truth-files.md: the one-line design read ("Reading this as ...") and "ask one question only when the read diverges" match our brief step; dial numbers are a house style and must not become defaults.
- skills/design-studio/references/disciplines/marketing-sites.md: hero numbers (≤2-line headline, ≤20-word subtext, CTA above the fold) and "≥4 layout families across 8 sections" may be cited as practice heuristics with this source id, never as gates.
- skills/design-studio/references/fundamentals/anti-slop.md: log the premium-consumer cream/brass palette and the production-test tells as dated observations (2026-05); do NOT import the total em-dash / en-dash ban, since it conflicts with correct range typography and with Chinese punctuation (the Chinese dash is ——).
- skills/design-studio/references/process/image-generation.md: image-first comps are useful, but taste-skill's self-assessed fidelity is the failure mode Impeccable measures against; require region comparison and provenance.
- skills/design-studio/references/process/directions.md: gpt-taste's in-prompt pseudo-randomness is evidence that a real script (our `seed.py`) is needed; the model cannot be trusted to "simulate" a roll.
- skills/design-studio/references/fundamentals/typography.md: note the cross-skill contradiction — taste recommends Geist/Outfit as defaults, Impeccable lists Geist as overused and Outfit as a training default — so font lists stay dated observations and the rule is "choose with a reason".
- skills/design-studio/references/process/truth-files.md (content): reject "organic messy" fake numbers and randomized dates made to look real; demonstration data is labelled synthetic (see research/sources/impeccable.md).

## Not verified / open
- tasteskill.dev docs/guide pages were not read beyond the changelog; the `research/laziness` folder in the repo was not read.
- Install counts (skills.sh) were not re-checked; stars are from the GitHub API on 2026-09-27.
- The full bodies of `imagegen-frontend-web/mobile`, `brandkit`, `soft-skill`, `minimalist-skill`, `brutalist-skill`, `stitch-skill` and `output-skill` were read only at frontmatter / heading level.
- Whether the promised v2 block library will ship; `skills/taste-skill/blocks/` does not exist at this commit.
- Fact-check 2026-09-27 (second reader, same pinned commit, live tasteskill.dev/changelog, GitHub API per-file commits): all counts, dates, dial values, hex families and section rules re-confirmed; corrected the mobile-collapse scope (fact 8) and the en-dash scope (fact 17).