Agent Skills Framework

Taste Skill
品味技能

面向 AI 代理的反"套路"前端框架

可移植的 Agent 技能,用于提升 AI 构建的界面品质。在布局、排版、动效和留白上更讲究,而不是生成千篇一律的 UI。支持与 ChatGPT、Codex、Cursor、Claude Code 配合使用。

13
可移植技能
3
设计旋钮
MIT
开源许可
Taste Skill Banner
MIT 开源Codex / Cursor / Claude
免责声明 — Taste Skill 没有官方发行的代币、硬币或加密项目。任何使用作者姓名、形象或本项目名义的代币都与作者无关,也未获得其认可。
Getting Started

安装

npx skills add CLI 会扫描仓库的 skills/ 目录,所有技能安装方式完全相同。你也可以将 SKILL.md 直接复制到项目中或粘贴到对话里。

install-all.sh
npx skills add https://github.com/Leonxlnx/taste-skill
install-single.sh
npx skills add https://github.com/Leonxlnx/taste-skill \
  --skill "design-taste-frontend"
upgrade-v2.sh
npx skills add https://github.com/Leonxlnx/taste-skill \
  --skill "design-taste-frontend"
pin-v1.sh
npx skills add https://github.com/Leonxlnx/taste-skill \
  --skill "design-taste-frontend-v1"
Skill Registry

技能一览

每个技能只做一件事。实现类技能输出代码,图像生成类技能仅输出参考图像。

v2 Experimental

taste-skill

读取需求、推断设计语言、调节三个旋钮。包含需求推断、设计系统映射、硬性长破折号禁令、规范的 GSAP 代码骨架、改版审计流程、严格的前置检查。正在积极迭代以推出 v2.0.0 稳定版。

npx skills add ... --skill "design-taste-frontend"
GPT / Codex

gpt-tasteskill

针对 GPT/Codex 的更严格变体:更高的布局差异度、更强的 GSAP 方向感、更激进的反套路策略。

--skill "gpt-taste"
Stable

taste-skill-v1

原始 v1 版本,为依赖其确切行为的项目保留。

--skill "design-taste-frontend-v1"
Image Pipeline

image-to-code

以图像为先的流程:生成网站参考图,分析它们,然后实现与之匹配的前端。

--skill "image-to-code"
Refactor

redesign-skill

先审计 UI,再修复布局、留白、层级、样式。

--skill "redesign-existing-projects"
Output

output-skill

完整输出,禁止占位注释。

--skill "full-output-enforcement"
Luxury

soft-skill

精致、平静、奢华的 UI:柔和对比、充足留白、优质字体、弹性动效。适用于视觉方向已确定的高端产品展示页面和品牌官网。

--skill "high-end-visual-design"
Editorial

minimalist

Notion/Linear 风格,克制的配色。

--skill "minimalist-ui"
Industrial

brutalist-skill

强硬机械感语言:瑞士字体、锐利对比、实验性布局。

--skill "industrial-brutalist-ui"
Compatibility

stitch-skill

兼容 Google Stitch 的规则,包含可选的 DESIGN.md 导出格式。

--skill "stitch-design-taste"

图像生成类技能

仅生成设计参考图(不含代码),可与 ChatGPT Images、Codex 图像模式配合使用。

技能安装名说明
imagegen-frontend-webimagegen-frontend-web网站构图:首页、着陆页、多区块页面
imagegen-frontend-mobileimagegen-frontend-mobile移动端屏幕与流程:iOS/Android/跨平台
brandkitbrandkit品牌套件板:Logo、配色、字体
Configuration

参数旋钮

技能文件顶部的数字是 1-10 范围的三个旋钮,用于精细控制输出风格。仅适用于 taste-skill。

DESIGN_VARIANCE 6

1 - 10

布局实验性。低值为居中/规整布局,高值为非对称/现代感。

MOTION_INTENSITY 7

1 - 10

动效深度。低值为悬停微动效,高值为滚动联动/磁吸动效。

VISUAL_DENSITY 4

1 - 10

每屏信息密度。低值为宽敞通透,高值为密集仪表板风格。

How It Works

工作流程

从需求到精致界面,技能引导代理走完五个步骤。

设计

分析需求,设定设计旋钮,确立美学方向。

规划

规划区块,选择模式,确定动效方案与文案。

构建

遵循设计与动效规则进行实现。

打磨

细化间距、过渡与边界情况。

验证

运行质量门禁,确保交付品质。

Showcase

示例作品

使用 taste-skill 制作的界面示例。

FAQ

常见问题

这与其他 AI 设计技能有什么不同?
多个专项变体、关键技能中可调节的旋钮,以及由专门研究支撑的反重复规则。所有规则在主流编码代理之间与框架无关。
支持 React、Vue、Svelte 吗?
支持。规则针对的是设计意图,而非某个单一框架的 API。无论使用哪种前端框架,都能获得一致的设计品质提升。
SKILL.md 是什么?
一种可移植的指令文件,代理可自动加载;通过 npx skills add 安装,或直接复制到仓库或对话中。
图像生成类技能也能用 npx skills add 安装吗?
可以。它们与代码类技能一同放在 skills/ 目录下,因此同一个 CLI 可以发现并安装它们。
如何从 v1 升级到 v2?
安装名未变,只需重新运行安装命令即可原地覆盖旧版本。如需固定 v1,可安装 design-taste-frontend-v1。完整差异请参阅 CHANGELOG.md。

让你的代理拥有品味

一行命令安装,从此告别千篇一律的 AI 界面。开源、可移植、框架无关。

立即开始 在 GitHub 上 Star
Community

反馈与贡献

建议和 Bug 报告可通过以下方式提交:

Sponsors

赞助者

如果 Taste Skill 对你有所帮助,欢迎在 GitHub 上赞助支持。