面向 AI 代理的反"套路"前端框架
可移植的 Agent 技能,用于提升 AI 构建的界面品质。在布局、排版、动效和留白上更讲究,而不是生成千篇一律的 UI。支持与 ChatGPT、Codex、Cursor、Claude Code 配合使用。
npx skills add CLI 会扫描仓库的 skills/ 目录,所有技能安装方式完全相同。你也可以将 SKILL.md 直接复制到项目中或粘贴到对话里。
npx skills add https://github.com/Leonxlnx/taste-skill
npx skills add https://github.com/Leonxlnx/taste-skill \ --skill "design-taste-frontend"
npx skills add https://github.com/Leonxlnx/taste-skill \ --skill "design-taste-frontend"
npx skills add https://github.com/Leonxlnx/taste-skill \ --skill "design-taste-frontend-v1"
每个技能只做一件事。实现类技能输出代码,图像生成类技能仅输出参考图像。
读取需求、推断设计语言、调节三个旋钮。包含需求推断、设计系统映射、硬性长破折号禁令、规范的 GSAP 代码骨架、改版审计流程、严格的前置检查。正在积极迭代以推出 v2.0.0 稳定版。
针对 GPT/Codex 的更严格变体:更高的布局差异度、更强的 GSAP 方向感、更激进的反套路策略。
原始 v1 版本,为依赖其确切行为的项目保留。
以图像为先的流程:生成网站参考图,分析它们,然后实现与之匹配的前端。
先审计 UI,再修复布局、留白、层级、样式。
完整输出,禁止占位注释。
精致、平静、奢华的 UI:柔和对比、充足留白、优质字体、弹性动效。适用于视觉方向已确定的高端产品展示页面和品牌官网。
Notion/Linear 风格,克制的配色。
强硬机械感语言:瑞士字体、锐利对比、实验性布局。
兼容 Google Stitch 的规则,包含可选的 DESIGN.md 导出格式。
仅生成设计参考图(不含代码),可与 ChatGPT Images、Codex 图像模式配合使用。
imagegen-frontend-web网站构图:首页、着陆页、多区块页面imagegen-frontend-mobile移动端屏幕与流程:iOS/Android/跨平台brandkit品牌套件板:Logo、配色、字体技能文件顶部的数字是 1-10 范围的三个旋钮,用于精细控制输出风格。仅适用于 taste-skill。
布局实验性。低值为居中/规整布局,高值为非对称/现代感。
动效深度。低值为悬停微动效,高值为滚动联动/磁吸动效。
每屏信息密度。低值为宽敞通透,高值为密集仪表板风格。
从需求到精致界面,技能引导代理走完五个步骤。
分析需求,设定设计旋钮,确立美学方向。
规划区块,选择模式,确定动效方案与文案。
遵循设计与动效规则进行实现。
细化间距、过渡与边界情况。
运行质量门禁,确保交付品质。
使用 taste-skill 制作的界面示例。


npx skills add 安装,或直接复制到仓库或对话中。