wehub/leonxlnx--taste-skill

Fork 0

Files

T

wehub-resource-sync 4420cb46cf docs: make Chinese README the default

2026-07-13 09:51:36 +00:00

14 KiB

Raw Permalink Blame History

Note

本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
English · 原始项目 · 上游 README
原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。

Taste Skill

面向 AI Agent 的反 Slop 前端框架

赞助商

	_{Emil Kowalski · animations.dev}

_{成为赞助商}

可移植的 Agent Skills，用于提升 AI 构建的界面：更强的布局、排版、动效与间距，告别千篇一律的模板感 UI。本仓库还包含用于参考板（Web、移动端、品牌套件）的 图像生成技能（image-generation skills）。可与 ChatGPT Images 或类似生成器配合使用，再将设计稿交给 Codex、Cursor 或 Claude Code 实现。

免责声明

Taste Skill 没有官方代币、币种或加密货币项目。任何使用我的名字、形象或项目名称的代币均与我无关，且未经我认可。

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

反馈与贡献

我们欢迎你的反馈。建议与 Bug 报告：

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

安装

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

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

按 安装名称（install name） 安装单个技能（即 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 的精确行为，并希望显式固定到 v1：

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

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

技能

每个技能只做一件事；你不必一次性安装全部。实现类技能（Implementation skills） 输出代码。图像生成技能（Image-generation skills） 仅输出参考图像。

Install name 列是传给 --skill 的精确值。

Skill (folder)	Install name	Description
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 导向、激进反 slop。
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 配合使用。

Skill (folder)	Install name	Description
imagegen-frontend-web	`imagegen-frontend-web`	网站稿：Hero、落地页、多区块，强排版与间距，反 slop 美术指导。
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。
若 Agent 经常截断输出，添加 output-skill。
交付物为图像（稿图、流程图、身份板）时，使用 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit，再将结果交给编码 Agent。

以图像为先的提示

使用 image-to-code-skill 时，请在 prompt 中说明流水线，例如：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。