设计品味

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

类型技能 44,354 星标更新 2026-06-12 许可 MIT 原仓库主页

Taste Skill

AI Agent 的反套壳前端框架

可移植的 Agent Skills，用于升级 AI 生成的界面：提供更强的布局、排版、动效与间距，告别模板化 UI。本仓库还包含用于参考板（网页、移动端、品牌工具包）的图像生成技能。可与 ChatGPT Images 或类似生成器配合使用，然后将设计稿交给 Codex、Cursor 或 Claude Code 实现。

免责声明

Taste Skill 没有任何官方通证、币或加密货币项目。任何使用我姓名、形象或项目的通证均与本项目无关，也未获得我的认可。

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

反馈与贡献

我们期待您的反馈。建议和问题报告：

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

安装

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

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

通过技能的安装名称（即 SKILL 前置元数据中的 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 的确切行为并希望固定使用：

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）。需求推断、设计系统映射、严格破折号禁止、标准 GSAP 代码骨架、重新设计审查协议、严格预检检查。正在积极迭代至 v2.0.0 稳定版。
taste-skill-v1	`design-taste-frontend-v1`	taste-skill 的原版 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 图像模式或任何能生成图像的 Agent。

技能（文件夹）	安装名称	描述
imagegen-frontend-web	`imagegen-frontend-web`	网站设计稿：首屏、落地页、多区域页面，强调排版、间距、反套壳艺术指导。
imagegen-frontend-mobile	`imagegen-frontend-mobile`	移动端屏幕与流程：iOS/Android/跨平台、原型图、易读字体、连贯套系。
brandkit	`brandkit`	品牌工具包展板：标识方向、调色板、字体、跨类别的品牌应用。

应该用哪个？

从 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。
如果 Agent 经常截断输出，添加 output-skill。
当交付物是图像（设计稿、流程图、品牌展板）时，使用 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit，然后将结果传递给您的编码 Agent。

图像优先提示

对于 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。