Leonxlnx/taste-skill

# Taste Skill

面向 AI Agent 的反模板前端框架

可移植的 **Agent Skills** 可升级 AI 构建的界面：提供更强大的布局、排版、动态效果和间距，而非千篇一律的样板 UI。此仓库还包含用于参考板（Web、移动端、品牌套件）的**图像生成 skills**。将它们与 **ChatGPT Images** 或类似的生成器配合使用，然后将画面帧交给 Codex、Cursor 或 Claude Code 进行实现。

     

## 免责声明 Taste Skill 没有官方的 token、加密货币或相关加密项目。任何使用我的名字、图像或项目的 token 都与我无关，也未得到我的认可。

_{免责声明 · 安装 · Skills · 设置 · 示例 · 赞助商 · 研究 · FAQ · 许可证}

## 安装说明 [`npx skills add`](https://github.com/vercel-labs/agent-skills) CLI 会扫描此仓库中的 `skills/` 文件夹，因此**以下所有 skills（代码和图像生成）的安装方式相同。** ``` npx skills add https://github.com/Leonxlnx/taste-skill ``` 通过其**安装名称**（SKILL frontmatter 中的 `name:` 字段，而非文件夹名称）安装单个 skill： ``` 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](CHANGELOG.md)。 ## Skills 每个 skill 只负责一项工作；你不需要同时使用所有 skill。**实现类 skills** 输出代码。**图像生成类 skills** 仅输出参考图像。 `Install name` 列是你传递给 `--skill` 的确切值。 | Skill (文件夹) | Install name | 描述 | | --- | --- | --- | | **taste-skill** | `design-taste-frontend` | 🆕 **v2（实验性）** - 对默认 skill 的全面重写。读取需求简报，推断设计语言，调整三个参数（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` | 图像优先 pipeline：生成网站参考图，进行分析，然后实现与之匹配的前端。 | | **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` 导出格式。 | ### 图像生成 skills 这些仅生成设计图像（无代码）。可与 ChatGPT Images、Codex 图像模式或任何生成图像的 agent 配合使用。 | Skill (文件夹) | Install name | 描述 | | --- | --- | --- | | **imagegen-frontend-web** | `imagegen-frontend-web` | 网站设计稿：hero 区、落地页、多区块布局，具备强大的排版、间距和反模板艺术指导。 | | **imagegen-frontend-mobile** | `imagegen-frontend-mobile` | 移动端屏幕与流程：iOS/Android/跨平台、模型图、易读的排版、连贯的套图。 | | **brandkit** | `brandkit` | 品牌套件板：logo 方案、调色板、字体、跨类别的身份应用。 | ### 我应该使用哪一个？ - 从 **taste-skill** 开始，作为最安全的通用默认选项。（目前为 v2 实验版 - 请在 [CHANGELOG](CHANGELOG.md) 中查看更改内容。） - 如果你依赖于原始 taste-skill 的确切行为，请改为安装 **taste-skill-v1**。 - 当你想要更严格的、面向 GPT/Codex 的规则以及动态效果/布局强制执行时，请使用 **gpt-taste**。 - 对于 图像 → 分析 → 编写代码 的网站工作流，请使用 **image-to-code-skill**。 - 当你要改进现有代码库而不是进行全新开发（greenfield）的样式设计时，请使用 **redesign-skill**。 - 当视觉方向已经确定后，可添加 **soft-skill**、**minimalist-skill** 或 **brutalist-skill**。 - 如果 agent 一直截断输出结果，请添加 **output-skill**。 - 当你的交付物是**图像**（设计稿、流程、身份板）时，请使用 **imagegen-frontend-web**、**imagegen-frontend-mobile** 或 **brandkit**，然后将结果传递给你的编码 agent。 ### 图像优先提示 对于 **image-to-code-skill**，请在 prompt 中声明 pipeline，例如：`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**。 ## 设置（仅 taste-skill） 文件顶部的数字为 1-10 的调节参数： - **DESIGN_VARIANCE**：布局实验性（较低：居中/整洁 · 较高：不对称/现代）。 - **MOTION_INTENSITY**：动画深度（较低：悬停 · 较高：滚动/磁性）。 - **VISUAL_DENSITY**：每个视口的信息量（较低：宽敞 · 较高：密集的 dashboard）。 ## 示例 使用 taste-skill 创建：

## 研究 塑造这些 skills 的背景写作内容位于 [`research/`](research/) 中。 ## 常见问题 **这与其他 AI 设计 skills 有何不同？** 包含多个专门的变体，关键 skill 中带有可调节的参数，以及由专项研究指导的反重复规则。所有这些都与主流的编程 agent 框架无关。 **它适用于 React、Vue、Svelte 吗？** 是的。这些规则针对的是设计意图，而非单一的框架 API。 **SKILL.md 是什么？** 一个可移植的指令文件，agent 可以自动加载；通过 `npx skills add` 安装，或通过复制到仓库或对话中进行加载。 **图像生成类 skills 也可以通过 `npx skills add` 安装吗？** 是的。它们与代码类 skills 一起存放在 `skills/` 目录下，因此同一个 CLI 可以发现它们。 ## 许可证 [MIT License](LICENSE) · Copyright (c) 2026 Leonxlnx

标签：AI代码生成, AI智能体, SOC Prime, UI设计, 开发工具, 提示词工程, 策略决策点, 自定义脚本, 防御加固