← 返回日报
🌐 机器翻译 · DeepSeek · GitHub

Leonxlnx taste-skill


好的,这是您要求的英文文章的中文翻译,已按照规范保留格式、术语和代码块。


Leonxlnx taste-skill

Taste Skill — 面向 AI Agent 的反“模板化”前端框架

赞助商

Emil Kowalski · animations.dev 成为赞助商

可移植的 Agent 技能,用于升级 AI 构建的界面:

更强的布局、排版、动效和间距,告别千篇一律的样板化 UI。

本仓库还包含用于参考板(Web、移动端、品牌套件)的图像生成技能。可将它们与 ChatGPT Images 或类似的生成器配合使用,然后将生成的框架交给 Codex、Cursor 或 Claude Code 进行实现。

免责声明

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

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

反馈与贡献

我们非常期待您的反馈。建议和错误报告:

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)。包括:简报推断、设计系统映射、硬性 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 图像模式或任何能生成图像的 Agent 配合使用。

| 技能(文件夹) | 安装名称 | 描述 | |---|---|---| | imagegen-frontend-web | imagegen-frontend-web | 网站合成图:英雄区、落地页、多区块页面,具备强大的排版、间距和“反模板化”艺术指导。 | | imagegen-frontend-mobile | imagegen-frontend-mobile | 移动端屏幕和流程:iOS/Android/跨平台、模型图、可读字体、连贯的套件。 | | brandkit | brandkit | 品牌套件板:Logo 方向、调色板、字体、跨类别的品牌应用。 |

我应该使用哪一个?

对于 image-to-code-skill,请在提示中说明流水线,例如:

follow the skill: generate images, then analyze, then code

ChatGPT Images 和 Codex

附加或粘贴 imagegen-frontend-webimagegen-frontend-mobilebrandkit,并请求你需要的框架,然后将渲染结果提供给 Codex、Cursor 或 Claude Code。

当你希望一个工作流程既能生成参考图又能用代码实现网站时,请使用 image-to-code-skill

设置(仅限 taste-skill)

文件顶部的数字是 1-10 的旋钮:

📖 阅读原文 →