需 Node 22+ 且本机装有 Chrome/Edge/Chromium，否则脚本无法运行；首次使用要在项目目录跑 node scripts/start.mjs deal --page 才会启用完成闸门；额外下载照片、Google Fonts 或品牌图标需要联网，内置 Commons 照片可离线用。
taste-skill
LeonxlnxMIT活跃维护一套给编码 Agent 装上审美的技能包，通过艺术指导、参考图和浏览器实测，让生成的网页摆脱千篇一律的 AI 味。
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
v2.5.1发布于 2026-11-07 12:34 UTC112,986star +1,668 / 7 天7,609fork同步于 2026-11-10 23:18 UTC
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" 硬件要求按 README 说明
README 未说明显存或 GPU 要求；需 Node 22+ 与已安装的 Chrome、Edge 或 Chromium（非标准路径设 CHROME_PATH），ffmpeg 可选。
让编码 Agent 做出 figma.com 级公司官网的 Agent Skill，告别千篇一律的 AI 落地页
一套给编码 Agent 装上审美的技能包，通过艺术指导、参考图和浏览器实测，让生成的网页摆脱千篇一律的 AI 味。
核心能力
- 按行业分类页面并逐屏规划后再写标记
- 用 start.mjs 发牌配色与 Google Fonts 字体搭配
- 从 starter.html 与 system.css 强制单屏一节、左右对齐
- 用 headless Chrome 在 1440/1024/768/390 多档渲染检查
- gate.mjs 完成闸门最多三轮拦住可修复的 FAIL
容易踩的坑
内容由模型根据 README 生成，可能不完整或不准确，以官方文档为准。看原文 README
- v2.5.1tasteskill v2.5.1最新正式版2026-11-07 · 2026-11-07 12:34 UTC
What a 44-site test of 2.5.0 showed, fixed: builds now iterate until the checker is clean, every page moves, products without photographs are shown in photographs, palettes fit the trade, the copy gets a voice of its own, and nothing lies on anything else on a phone. The install name did not change.
- A finish gate:
scripts/gate.mjsruns the checker, the layout check and a copy lint, and a build is not done until its last line readsGATE: PASS(three rounds, five waivers with reasons at most). In Claude Code it runs as a Stop hook from the skill itself. It never traps an agent: a question to the user costs no round, andgate.mjs --doneends a build at the user's word. - Motion on every page: every hero enters once on load, and every page carries one or two scroll moments. Cafes, shops and services get photo- and type-led ones (new
photo-chapters, a film look forpicture-develops); shader effects stay on tech pages. - Photographs over renders: a product without the client's pictures is shown in licensed stand-in photographs (
photos.mjs search: Wikimedia Commons, CC0, CC BY, CC BY-SA and public domain only). A 3D render only when the brief asks for one. - Palettes by trade:
start.mjs deal --trade cafedeals palettes made for that trade, so two cafes no longer start alike. Eight new place palettes. - A copy layer: a fact sheet, a voice card, one register and the moves for each part of the page, plus
copy-lint.mjs, which counts the tells of model-written copy. The gate runs it. - Accessibility, forms and metadata: accessible names, labels, the focus ring, heading order, share tags and real form sends are checked.
- Phones: sections grow with their content instead of lying over the next one, 44px tap targets, a phone action bar that waits until the hero's button has scrolled away, and new
collide,tap-sizeand 320px checks. - A kit that passes its own checks: all 11 hero layouts, the starter and two in-page moment models pass the checker and the layout check at 1440 and 390 (
tests/kit-clean.mjs).
Update with the same command you installed with, for example:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"or, as a Claude Code plugin,
/plugin marketplace update taste-skilland then/plugin install taste-skill@taste-skill.Full list in CHANGELOG.md. Thanks to the community contributors named there, whose pull requests went into 2.5.x.
- A finish gate:
- v2.5.0tasteskill v2.52026-11-04 · 2026-11-04 23:41 UTC
查看更新说明
A complete rebuild of
design-taste-frontendaround professional company websites at the figma.com and x.ai bar. The install name did not change.- One page system: every build starts from the same starter. The hero fills the first screen, one section per screen, equal left and right edges.
- Effects only where they fit: shader grounds, scroll moments and big scenes only on software, tech and gaming pages. Cafes, shops, hotels and services get real photographs and no effects.
- Real product UI: 19 HTML UI fragments (chat, diff review, terminal, pipeline board, voice and more), and a software page shows its product in one app window.
- Real photographs and icons: vetted Unsplash and Wikimedia Commons frames by trade, no captions, one footer credit line; real brand icons, never drawn.
- No two pages alike: the hero layout, palette, type pairing and ground are dealt at random.
- A product is always shown, and big: with no photographs it is rendered from a spec of its parts, and the colour buttons change the picture.
- Checked in a real browser: over 100 checks at 1440, 1024, 768 and 390. A page with a FAIL is not done.
- Installs anywhere: Node 22+ and Chrome, Edge or Chromium, no API keys. On Windows
install.shmakes a real link.
Everything else is in the changelog.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Claude Code plugin users:
/plugin update. Codex plugin users: start a new session aftercodex plugin add taste-skill@taste-skill. - v2.1.5tasteskill v2.1.52026-10-24 · 2026-10-24 23:44 UTC
查看更新说明
Fixes from the community. Thanks to everyone who reported and sent them.
- Safe text in charts and split headings (#160, #169, thanks @jcastilla89 and @Pablolakotek):
charts.jsand theStage.splitfallback escape the text they insert, so a label or heading from user data can no longer inject markup. - No lost screenshots when two widths share a class (#162, #165, thanks @nosawavey-spec and @ketpatil77).
- Keyboard and accessible names (#170, thanks @MrBinnacle): every control works from the keyboard and has an accessible name.
- The italic faces load (#161, fix from #166, thanks @nosawavey-spec and @ketpatil77): Boska, Erode and Sentient request their italic weight.
edge-textno longer fails ellipsised lines (#156, thanks @shoctroper).- Inspect the production build (#171, thanks @lilozzy): the Gate says so, and the inspector warns when it is looking at a dev server.
- The redraw rule names its third reason (#163, thanks @Tsury).
- CI also checks that every text file is clean UTF-8.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Claude Code plugin users:
/plugin update. - Safe text in charts and split headings (#160, #169, thanks @jcastilla89 and @Pablolakotek):
- v2.1.4tasteskill v2.1.42026-10-20 · 2026-10-20 22:04 UTC
查看更新说明
This release makes the inspector's browser profiles safe when several runs go at once (#157, #158, #159). The rules of
design-taste-frontendare unchanged; onlyscripts/lib/cdp.mjschanged.- Fix: one inspector run could delete the browser profile of another run that was still going. Chrome keeps no
lockfileon macOS and Linux, so the sweep added in 2.1.0 judged a profile unused by its age alone. A second run started during a long one could then pull that run's profile away. Thanks to @t4sh for the report and the fix. - Leftover profiles are cleaned up again, safely. Every profile now carries
taste-skill-owner.jsonwith the machine and the process IDs of the run and its Chrome. A later run removes a profile left by a killed run only when that file names this machine and neither process is alive. A profile without the file is never touched.
Profiles left by earlier versions are not removed automatically. To clear them, delete the
ad-chrome-*folders in your temp folder (or inTASTE_SKILL_TMP).Update:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Claude Code plugin users:
/plugin update. - Fix: one inspector run could delete the browser profile of another run that was still going. Chrome keeps no
- v2.1.3tasteskill v2.1.32026-10-19 · 2026-10-19 22:33 UTC
查看更新说明
One repo, one skill.
design-taste-frontenditself is unchanged; this release cleans up the repo around it (#153, #155).The other skills moved to repos of their own and kept their install names:
- The classic styles and earlier versions (
high-end-visual-design,minimalist-ui,industrial-brutalist-ui,gpt-taste,stitch-design-taste,design-taste-frontend-v1,design-taste-frontend-v2-experimental) are in Leonxlnx/taste-skill-classics. - The image-generation skills (
imagegen-frontend-web,imagegen-frontend-mobile,brandkit,image-to-code) are in Leonxlnx/imagegen-skills. redesign-existing-projectsis part ofdesign-taste-frontend.
Installed a classic skill from this repo before? Install it from its new home under the same name:
npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"Claude Code plugin users:
taste-skill@taste-skillis unchanged. The classics plugin now has its own marketplace:/plugin marketplace add Leonxlnx/taste-skill-classics.Also in this release:
- A cleaner README, with a wordmark instead of the banner and a TasteCode banner that reads well in dark mode.
- Old research notes,
llms.txt,skill.shand unused images are removed. - The Codex plugin now loads only
design-taste-frontend.
Thanks to @code5717 for the nudge in #153.
- The classic styles and earlier versions (
用户点评
登录用户的真实使用记录，可按版本和硬件筛选共 0 条
还没有人点评。第一个说出真实体验的人最有价值。
Taste Skill (tasteskill 2.5.1) is an Agent Skill that makes coding agents build professional company websites at the figma.com and x.ai level instead of assembling a generic landing page. Every build uses plain copy, one design system, one section per screen, equal left and right edges, real photographs (licensed stand-ins when the client has none), real brand icons and real product UI, a hero entrance and one or two dealt moments on every page, quiet micro-interactions, and shader effects and scroll scenes kept strictly for tech, gaming and software pages, all verified in a real browser by a checker and a finish gate that enforce the rules.
Pages built from a single brief in earlier v2 runs:
The photographs are real, found in open archives and credited by the skill (credits). Watch the launch film.
Install
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
That installs the skill with the npx skills CLI.
The skill runs its scripts with Node 22+ and an installed Chrome, Edge or Chromium (set CHROME_PATH if it is in a non-standard place). Optional: ffmpeg on the PATH, for WebP output and the phone crop of a hero photograph in photos.mjs. It installs nothing and needs no API keys. Bundled Wikimedia Commons photographs work offline; fetching additional photographs or icons uses network access.
Run these inside Claude Code. The skill is namespaced under taste-skill:, so it does not collide with your other skills.
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
/plugin update upgrades it later.
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill
Start a new Codex session afterwards so the skill is loaded.
./install.sh symlinks the skill into Claude Code (--codex for Codex, --all-agents for both), so a git pull updates it in place. On Windows (Git Bash) it makes a real link, or a directory junction when symlinks are not allowed, and it reports an older copied folder instead of skipping it silently.
Already have the skill? Run the install command again; the install name did not change. Looking for one of the older skills? See Moved skills.
How 2.5 works
Use it by asking your agent to build or redesign a company site; the agent loads the skill, copies assets/ into the project, starts from assets/starter.html and runs the checker before it hands the page over. Every build starts by classifying the client's business (software, gaming, tech, product, service or place) and planning the page screen by screen before writing markup:
- Deal tokens and layout.
scripts/start.mjsdeals a palette made for the trade and a Google Fonts pairing for the page kind (library/palettes.json,library/type.json), andassets/layout/deal.mjsdeals a hero layout (split,centred,product,photo,place,collage,editorial,word,film,statementortriptych). - Start from one system.
assets/starter.html,assets/system.cssandassets/layout/layout.cssenforce one section per screen at desktop (1440x900), equal left and right content edges, a fixed navigation bar and a single-screen closing footer (footer.closing). - Show real product UI and real photographs. Software and tech pages populate lit feature cards (
assets/ui/cards.css) with rewritten HTML UI fragments (assets/ui/) and node-and-line diagrams (assets/diagrams/), with real brand and interface SVGs resolved locally byscripts/icons.mjs. Place, shop, hospitality and non-technical product pages lead with curated photographs (scripts/photos.mjs,assets/photos/), typography and flat colour, crediting sources in one expandable footer line with no captions under images. - Keep effects for tech and gaming pages. Shader grounds (
scripts/effects.mjs), scroll scenes (assets/scenes/) and procedural 3D prints (assets/objects/) are dealt only onsoftware,techandgamingpages within a four-context WebGL cap, with static fallbacks for phones and reduced motion. Every page gets a hero entrance and one or two moments fromscripts/moments.mjs; cafes, hotels, shops, studios and services get only the photo- and type-led ones, and zero WebGL. - Check in a real browser over HTTP.
scripts/consistency.mjs,assets/layout/check.mjs,scripts/perf.mjsandscripts/shoot.mjsrender the built page in headless Chrome across1440,1024,768and390, catching empty visuals, broken shaders, contrast drops, misaligned columns, section-height drift, placeholder text, invented street numbers and slow-network image gaps before the build ships.scripts/gate.mjsthen holds the finish until no fixable FAIL is left, three rounds at most.
Details of what changed from 2.1.x are in the changelog.
The tools
Everything is a plain Node 22+ script in the skill folder; none installs anything.
| Tool | What it does |
|---|---|
scripts/start.mjs | Deals a palette and a Google Fonts pairing for the page kind and prints the <head> links and :root tokens. |
assets/layout/deal.mjs | Deals one of eleven tested hero layouts; assets/layout/check.mjs checks it with long-headline stress tests. |
scripts/photos.mjs | Deals vetted photographs by trade, enforces image weight and writes the one footer credit line. |
scripts/icons.mjs | Resolves real brand and interface icons into local SVG files. |
scripts/effects.mjs, scripts/moments.mjs | Deal shader grounds for tech, gaming and software pages, and the moments for every kind. |
scripts/gate.mjs, scripts/copy-lint.mjs | The finish gate (also a Stop hook) and the copy linter it runs. |
scripts/consistency.mjs | The checker: renders the page in headless Chrome over HTTP at 1440, 1024, 820, 768 and 390 and prints PASS, WARN or FAIL per rule. |
scripts/perf.mjs, scripts/shoot.mjs | Page weight and speed, and full-page and per-section screenshots. |
First run, from the project folder (a deal also arms the finish gate there): node scripts/start.mjs deal --page software (kinds: software, gaming, tech, product, service, place). Check a built page with node scripts/consistency.mjs <url or file> --page <kind>.
Moved skills
This repo holds one skill, design-taste-frontend. The others moved to repos of their own and kept their install names:
| Install name | Where it lives now |
|---|---|
high-end-visual-design, minimalist-ui, industrial-brutalist-ui, gpt-taste, stitch-design-taste, design-taste-frontend-v1, design-taste-frontend-v2-experimental | Leonxlnx/taste-skill-classics |
imagegen-frontend-web, imagegen-frontend-mobile, brandkit, image-to-code | Leonxlnx/imagegen-skills |
redesign-existing-projects | Part of design-taste-frontend, which audits an existing page in a real browser before changing anything |
full-output-enforcement | Removed. For the same problem, see Leonxlnx/unlazy |
Install a moved skill from its new repo under the same name:
npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"
Common Questions
What does the skill need?
Node 22 or newer and Chrome, Edge or Chromium; ffmpeg is optional (WebP photographs and the phone crop of a hero photograph). It installs nothing and uses no API keys. Bundled Commons photographs are stored locally; network access is used only when downloading additional photographs, Google Fonts or brand icons.
Where do the pictures come from, and can I use them?
From the skill's vetted photograph library (assets/photos/photos.json, including bundled Wikimedia Commons WebP sets and Unsplash photographs) dealt by scripts/photos.mjs. Library frames are used for trade and material details (or marked explicitly as draft stand-ins when the client has no photographs yet), never passed off as the client's own room, staff or product, and credited in one expandable footer line (photos.mjs credits).
Does it work with React, Vue, Svelte, plain HTML?
An empty folder gets a static page from assets/starter.html. An existing React, Vue, Svelte, Astro or Tailwind project is built in its own stack, with the kit served from its public folder; a Next.js brief is built as a static export. The browser checks run on the served or built page.
When does a page get shaders or scroll effects?
Shaders only on software, tech (technical hardware) and gaming pages, and always within a four-context WebGL budget with static phone and reduced-motion fallbacks. Places, shops, cafes, hotels, studios, services and everyday physical products stay calm: photographs, sharp typography and flat colour, with a hero entrance and one or two photo- or type-led moments in their own sections.
Support the project
If Taste Skill helps you, consider sponsoring:
Open Source Supporters
Community Sponsors
Feedback: open an issue or pull request, DM @lexnlin or @blueemi99, or email [email protected].
Taste Skill has no official token, coin, or crypto project. Any token using my name, image, or project is unaffiliated and not endorsed by me.
License
MIT License · Copyright (c) 2026 Leonxlnx