Taste Skill 开源：为编程 Agent 注入设计品味与艺术指导，告别平庸 AI 页面

赞助商

成为赞助商

Taste Skill 是一项 Agent 技能（Agent Skill），旨在让编程 Agent 真正设计网站和应用界面，而非拼凑千篇一律的通用落地页。它赋予 Agent 明确的艺术指导方向、真实的照片素材，以及在真实浏览器中校验自身工作成果的方法。

它构建的页面案例（每个均基于一份设计简报生成）：

所有照片均为真实摄影作品，检索自开放档案库，并由该技能附上来源致谢（致谢列表）。观看发布宣传短片。

bash npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

这会使用 npx skills CLI 安装该技能。

该技能的运行脚本基于 Node 22+ 以及本机安装的 Chrome、Edge 或 Chromium。它不会在系统上安装多余软件，也无需任何 API 密钥。仅在检索图片时需要网络访问权限。

Claude Code 插件

在 Claude Code 内部运行以下命令。该技能使用 taste-skill: 作为命名空间，因此不会与你的其他技能发生冲突。

bash /plugin marketplace add Leonxlnx/taste-skill /plugin install taste-skill@taste-skill

后续可通过 /plugin update 进行升级。

Codex 插件

bash codex plugin marketplace add Leonxlnx/taste-skill codex plugin add taste-skill@taste-skill

操作完成后请启动一个新的 Codex 会话，以确保技能正确加载。

从克隆源码安装（软链接而非复制）

运行 ./install.sh 会将该技能软链接到 Claude Code（指定 --codex 用于 Codex，指定 --all-agents 用于两者），因此只需执行一次 git pull 即可完成就地更新。

如果你已经安装过该技能，只需重新运行安装命令即可；安装名称未发生变更。寻找旧版技能？请参阅后文的「已迁移的技能」。

该技能建立在对 247 个精选站点的深入研究之上。一次完整的构建包含以下六个步骤：

1. 阅读设计需求简报，列出专属于该客户的核心要素。
2. 脚本从 20 种经过调研的设计方向中随机分发 3 个，由 Agent 挑选最合适的一个。
3. 提炼核心创意：用一句话将客户自身特色与选定的设计方向结合起来。
4. 使用来自开放素材库的真实图片和视频素材进行构建，并附带版权致谢。
5. 在真实浏览器中以三种不同视口宽度检查页面，并对粗制滥造的内容（slop）判定不合格。
6. 观察自截的页面截图并修复优先级最高的三个问题，最多迭代三轮修复。

一次构建大约需要 30 到 45 分钟，并消耗数十万 token。更多技术细节请参阅更新日志以及研究报告。

仪表盘和应用界面（v2.1）采用独立的处理链路：该技能会应用一套从真实产品界面提炼而来的 App 风格，严格按照既定规格构建外壳（Shell）、数据呈现、图表以及数据表格，并按照应用规范进行校验——克制安静的面版、对齐的数值指标、仅在数据表现处运用色彩，以及针对手机端优化的可折叠导航。产品落地页展示的内嵌应用界面也采用相同方式构建，确保截图看起来就像真实运行中的产品。

此外，v2.1 还针对每个页面的骨架结构进行检查（首屏醒目的标题、均匀的外边距、杜绝局部区块偏向单侧、杜绝突兀的大面积空白），并参考最新的 100 个 Awwwards Sites of the Day 获奖案例调教动效与交互节奏。

当前仓库仅包含一个技能：design-taste-frontend。其余技能已迁移至独立仓库，并保留了原安装名称：

安装名称	现所在仓库
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	已整合至 design-taste-frontend，在修改任何代码之前，它会在真实浏览器中先对现有页面进行审查
full-output-enforcement	已移除。如需解决该问题，请参阅 Leonxlnx/unlazy

使用相同的名称从新仓库中安装已迁移的技能：

bash npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"

常见问题

该技能有哪些环境依赖？
需要 Node 22 或更新版本，以及已安装的 Chrome、Edge 或 Chromium。它不安装多余组件，不需要 API 密钥，仅在检索图片时需要联网。

图片素材来自哪里？我可以商用吗？
来自 Wikimedia Commons、Openverse 以及大都会艺术博物馆（The Met）等开放合规合集。仅提供公有领域（Public Domain）、CC0、CC BY 及 CC BY-SA 授权的文件，技能会在页面自动标注署名致谢。一旦你有自己的正式素材，可以直接替换它们。

它支持 React、Vue、Svelte、纯 HTML 吗？
支持。这套规则侧重于设计理念与美学规范，与具体框架无关。

它适用于仪表盘（Dashboard）和应用界面吗？
是的，自 v2.1 起已支持。技能能够区分普通网页与应用界面，并为仪表盘、管理后台视图或设置界面提供独立的运行链路：提炼自真实产品界面的专属风格、克制安静的面板、真实呈现的数据与图表，以及专属的验证流程（inspect.mjs --app）。

如果 Taste Skill 对你有所帮助，欢迎考虑提供赞助：

在 GitHub 上赞助

社区赞助者

反馈方式：提交 Issue 或 Pull Request、私信 Twitter @lexnlin 或 @blueemi99，或发送邮件至 hello@tasteskill.dev。

Taste Skill 没有发行任何官方 Token、代币或加密货币项目。任何使用作者姓名、肖像或该项目的代币均与本项目无关，亦未获得任何授权认可。

MIT 许可证 · Copyright (c) 2026 Leonxlnx

Sponsors

Become a sponsor

Taste Skill is an Agent Skill that makes coding agents design websites and app screens instead of assembling the average landing page. It gives the agent an art direction, real pictures and a way to check its own work in a real browser.

Pages it has built, each from one brief:

The photographs are real, found in open archives and credited by the skill (credits). Watch the launch film.

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. It installs nothing and needs no API keys. Finding pictures needs network access.

Claude Code plugin

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

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.

From a clone, linked instead of copied

./install.sh symlinks the skill into Claude Code (--codex for Codex, --all-agents for both), so a git pull updates it in place.

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.

The skill is built from a study of 247 curated sites. A build runs in six steps:

1. Reads the brief and lists what only this client has.
2. A script deals three of 20 researched directions and the agent picks one.
3. Finds the idea: one sentence tying the client's own material to that direction.
4. Builds with real pictures and footage from open collections, credited.
5. Checks the page in a real browser at three widths and fails it on slop.
6. Looks at its own screenshots and fixes the top three problems, up to three rounds.

A build takes roughly 30 to 45 minutes and a few hundred thousand tokens. Details are in the changelog and the study.

Dashboards and app screens (v2.1) take their own route: the skill deals one of the app styles distilled from real product screens, builds the shell, the data, the charts and the tables to those numbers, and checks the result with app rules: quiet panels, aligned figures, colour spent on data, a phone layout where the navigation folds away. A product's landing page builds the app it shows the same way, so its screenshots look like a working product.

v2.1 also checks the frame of every page (a clear title on the first screen, equal margins, no section shoved to one side, no random blank stretches) and moves the way strong award sites do, measured on the latest 100 Awwwards Sites of the Day.

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"

What does the skill need?
Node 22 or newer and Chrome, Edge or Chromium. It installs nothing and uses no API keys. It needs the internet only to find pictures.

Where do the pictures come from, and can I use them?
From open collections such as Wikimedia Commons, Openverse and the Met. Only public domain, CC0, CC BY and CC BY-SA files are offered, and the skill puts the credits on the page. Replace them with your own when you have them.

Does it work with React, Vue, Svelte, plain HTML?
Yes. The rules are about design, not a framework.

Is it for dashboards and app screens?
Yes, since v2.1. The skill tells a page from an app screen and builds a dashboard, an admin view or a settings screen with its own run: a style dealt from a study of real product screens, quiet panels, honest data and charts, and its own checks (inspect.mjs --app).

If Taste Skill helps you, consider sponsoring:

Sponsor on GitHub

Community Sponsors

Feedback: open an issue or pull request, DM @lexnlin or @blueemi99, or email hello@tasteskill.dev.

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.

MIT License · Copyright (c) 2026 Leonxlnx