品味技能：AI 代理防粗糙前端框架，多技能助力界面设计升级！
品味技能：便携式代理技能
品味技能可升级由 AI 构建的界面，打造布局更合理、排版更美观、动效更出色、间距更协调的界面，告别千篇一律的 UI。此仓库还包含用于参考板（网页、移动应用、品牌套件）的图像生成技能。可将这些技能与 ChatGPT Images 或类似的生成器搭配使用，然后将框架交给 Codex、Cursor 或 Claude Code 进行实现。
免责声明
品味技能没有官方代币、虚拟货币或加密项目。任何使用我的名称、形象或项目的代币均与我无关，我也不会对其进行背书。
反馈与贡献
我们非常欢迎您的反馈。您可以通过以下方式提出建议和报告 bug：在 GitHub 上提交拉取请求或问题；私信 @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 对话中。
技能
每个技能仅执行一项任务，您无需同时使用所有技能。实现技能会输出代码，图像生成技能仅输出参考图像。“安装名称”列是您传递给 `--skill` 的精确值。
| 技能（文件夹） | 安装名称 | 描述 |
|---|---|---|
| taste-skill | design-taste-frontend | 🆕 v2（实验版）——对默认技能进行了重大重写。读取设计说明，推断设计语言，调整三个参数（VARIANCE / MOTION / DENSITY）。具备设计说明推断、设计系统映射、禁止使用硬破折号、规范的 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 | 网站设计稿：英雄区、着陆页、多部分页面，具备出色的排版、间距和防粗糙的艺术指导。 |
| 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`。若代理持续截断输出，可添加 `output-skill`。当交付物为图像（设计稿、流程、品牌形象参考板）时，可使用 `imagegen-frontend-web`、`imagegen-frontend-mobile` 或 `brandkit`，然后将结果传递给您的编码代理。
以图像为先的提示
对于 `image-to-code-skill`，可在提示中说明流程，例如：遵循该技能，先生成图像，然后进行分析，最后编写代码。
ChatGPT Images 和 Codex
附上或粘贴 `imagegen-frontend-web`、`imagegen-frontend-mobile` 或 `brandkit`，并要求生成所需的框架，然后将渲染结果提供给 Codex、Cursor 或 Claude Code。当您需要一个既能生成参考图又能实现网站代码的工作流程时，可使用 `image-to-code-skill`。
设置（仅适用于 taste-skill）
文件顶部的数字是 1 - 10 的参数：`DESIGN_VARIANCE`：布局实验性（值越低：居中/简洁；值越高：不对称/现代）；`MOTION_INTENSITY`：动效深度（值越低：悬停效果；值越高：滚动/磁吸效果）；`VISUAL_DENSITY`：每个视口的信息量（值越低：空间宽敞；值越高：密集的仪表盘）。
示例
使用 `taste-skill` 创建的示例。
支持项目
如果品味技能对您有帮助，可考虑进行赞助：[在 GitHub 上赞助](https://github.com/Leonxlnx/taste-skill)
当前赞助商
暂无相关信息。
研究
形成这些技能的背景资料存放在 `research/` 文件夹中。
常见问题
与其他 AI 设计技能有何不同？拥有多个专门的变体，关键技能中可调节参数，基于专项研究制定的反重复规则。所有技能在主要编码代理中均与框架无关。是否适用于 React、Vue、Svelte？是的。规则针对设计意图，而非单一框架的 API。什么是 `SKILL.md`？这是一个便携式指令文件，代理可自动加载；可通过 `npx skills add` 安装，或复制到仓库或对话中。图像生成技能能否通过 `npx skills add` 安装？可以。它们与代码技能一同存放在 `skills/` 文件夹下，因此相同的 CLI 可以发现它们。
许可证
本项目采用 MIT 许可证，版权所有 (c) 2026 Leonxlnx。