设计品味

反平庸前端设计技能合集，提升 AI 生成界面的排版、动效与视觉品味

类型技能 67,614 星标更新 2026-07-23 许可 MIT 原仓库主页

Taste Skill

面向 AI Agent 的反杂乱前端框架

赞助商

Novamira · AI Agent 完整 WordPress 访问权限 Kimi Open Source Friends

	_{IMG.LY · CreativeEditor SDK}
	_{Emil Kowalski · animations.dev}
	_{Sent.dm · 用于 SMS、WhatsApp 和 RCS 的消息 API}

_{成为赞助商}

可移植的 Agent Skills，用于提升 AI 构建的界面：更强大的布局、排版、动效和间距，而非千篇一律的 UI 模板。本仓库还包含用于参考板（Web、移动端、品牌套件）的图像生成技能。可将它们与 ChatGPT Images 或类似生成器搭配使用，然后将生成的框架交给 Codex、Cursor 或 Claude Code 来实现。

免责声明

Taste Skill 没有任何官方代币、币或加密项目。任何使用我的名字、头像或项目的代币均与我无关，也不代表我的认可。

_{免责声明 · 安装 · 技能 · 设置 · 示例 · 赞助商 · 研究 · 常见问题 · 许可证}

反馈与贡献

我们非常欢迎您的反馈。建议和 bug 报告：

在 GitHub 上提交 Pull Request 或 Issue
私信 @lexnlin 或 @blueemi99
发送邮件至 hello@tasteskill.dev

安装

npx skills add CLI 会扫描本仓库的 skills/ 文件夹，因此以下所有技能（代码和图像生成）均以相同方式安装。

npx skills add https://github.com/Leonxlnx/taste-skill

通过技能的安装名称（SKILL frontmatter 中的 name: 字段，而非文件夹名称）安装单个技能：

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

您也可以将任何 SKILL.md 复制到您的项目中，或直接粘贴到 ChatGPT / Codex 对话中。

从旧版本升级

默认的 taste-skill（安装名称 design-taste-frontend）现已升级为 v2（实验版），是对原始 v1 的重大重写。如果您已安装 v1，只需重新运行安装命令即可升级：

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

安装名称未变，因此无需更新脚本。新的 SKILL.md 会直接替换旧版本。

如果您依赖 v1 的确切行为，希望锁定使用 v1，请运行：

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

完整 v1 到 v2 的差异及设计理由，请参见 CHANGELOG.md。

技能

每项技能专职一项任务；您无需一次性使用全部技能。实现型技能输出代码。图像生成型技能仅输出参考图像。

安装名称 列是您传递给 --skill 的确切值。

技能（文件夹）	安装名称	描述
taste-skill	`design-taste-frontend`	🆕 v2（实验版） - 对默认技能的重大重写。读取需求说明，推断设计语言，调节三个旋钮（VARIANCE / MOTION / DENSITY）。需求推断、设计系统映射、硬性 em-dash 禁令、规范化 GSAP 代码骨架、重新设计审计协议、严格的预检检查。正积极迭代至 v2.0.0 稳定版。
taste-skill-v1	`design-taste-frontend-v1`	原始 v1 版本，为依赖其确切行为的项目保留。仅当 v2 默认版本破坏了您工作流中的特定内容时使用。
gpt-tasteskill	`gpt-taste`	针对 GPT/Codex 的更严格变体：更高的布局方差、更强的 GSAP 指导、更强的反杂乱。
image-to-code-skill	`image-to-code`	图像优先流水线：生成站点参考、分析参考、然后实现与之匹配的前端。
redesign-skill	`redesign-existing-projects`	现有项目：先审计 UI，然后修复布局、间距、层次、样式。
soft-skill	`high-end-visual-design**	精致、沉稳、高端的 UI，采用柔和的对比度、大量留白、高级字体、弹簧动效。
output-skill	`full-output-enforcement`	当模型输出半成品工作时：完整输出，不允许占位注释。
minimalist-skill	`minimalist-ui`	编辑型产品 UI（Notion / Linear 风格），克制的调色板，清晰的结构。
brutalist-skill	`industrial-brutalist-ui`	硬朗的机械语言：瑞士排版、强烈对比、实验性布局。
stitch-skill	`stitch-design-taste`	兼容 Google Stitch 的规则，包括可选的 `DESIGN.md` 导出格式。

图像生成技能

这些技能仅生成设计图像（无代码）。适用于 ChatGPT Images、Codex 图像模式或任何可生成图像的代理。

技能（文件夹）	安装名称	描述
imagegen-frontend-web	`imagegen-frontend-web`	网站设计稿：hero 区域、着陆页、多板块，强调排版、间距、防潦草的美术指导。
imagegen-frontend-mobile	`imagegen-frontend-mobile`	移动端界面与流程：iOS/Android/跨平台、原型图、清晰字体、连贯的组件集。
brandkit	`brandkit`	品牌套件展板：Logo 方向、调色板、字体、跨类别的品牌识别应用。

我应该使用哪个？

从 taste-skill 开始，作为最安全的通用默认选项。（现在是 v2 实验版——查看 CHANGELOG 了解变化。）
如果你依赖原始 taste-skill 的精确行为，请安装 taste-skill-v1。
当你需要更严格的 GPT/Codex 导向规则和动效/布局强制时，使用 gpt-taste。
使用 image-to-code-skill 进行图像→分析→编码网站的工作流程。
使用 redesign-skill 改进现有代码库，而不是从头开始设计样式。
当视觉方向已经确定时，添加 soft-skill、minimalist-skill 或 brutalist-skill。
如果代理持续截断输出，添加 output-skill。
当交付物是图像（设计稿、流程、品牌展板）时，使用 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit，然后将结果传递给编码代理。

图像优先提示

对于 image-to-code-skill，在提示中说明工作流程，例如：follow the skill: generate images, then analyze, then code。

ChatGPT Images 和 Codex

附上或粘贴 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit，并请求你需要的画面，然后将渲染结果提供给 Codex、Cursor 或 Claude Code。当你希望在一个工作流中同时生成参考图像并用代码实现网站时，使用 image-to-code-skill。