设计品味

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

类型技能 56,466 星标更新 2026-07-04 许可 MIT 原仓库主页

Taste Skill

AI 代理的防劣化前端框架

赞助商

	_{Emil Kowalski · animations.dev}

_{成为赞助商}

可移植的 Agent Skills，可升级 AI 构建的界面：更强的布局、排版、动效和间距，告别模板化的 UI。本仓库同样包含用于参考板（Web、移动端、品牌套件）的 图像生成技能。可将它们与 ChatGPT Images 或类似生成器搭配使用，然后将框架传递给 Codex、Cursor 或 Claude Code 进行实现。

免责声明

Taste Skill 没有任何官方代币、币或加密货币项目。任何使用我的姓名、头像或项目名称的代币均与我无关，且未获我的认可。

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

反馈与贡献

我们非常期待你的反馈。如有建议或问题报告：

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

安装方式

npx skills add 命令行工具会扫描本仓库的 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）。需求推断、设计系统映射、严格的 em-dash 禁用、规范的 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 image mode 或任何生成图像的 agent 配合使用。

Skill (folder)	Install name	Description
imagegen-frontend-web	`imagegen-frontend-web`	网站组件：hero 区、着陆页、多区块，强调排版、间距、防劣化美术指导。
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。