Taste-Skill反模板AI前端设计指南【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill让AI写个落地页十有八九是居中大标题、紫色渐变加三张一样的卡片。Taste-Skill 是一套开源的 AI 前端设计框架它把先读懂需求、再调三个参数、交付前自检写成能直接喂给编码 Agent 的技能文件让生成出来的页面不再像套模板。三步跑起来整个过程不需要写任何配置代码# 安装全部技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 或按名字安装单个技能用 name 字段不是文件夹名 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend第一步执行上面的安装命令CLI 会扫描仓库的 skills/ 目录把每个 SKILL.md 装进你的 Agent。第二步直接对 Codex、Cursor 或 Claude Code 说给我写一个 XX 网站Agent 会自动加载技能先输出一句设计判断再动笔。第三步按需微调对话里说一句布局再野一点即可不需要改文件。核心原理拆解先读需求再定风格相当于厨师先看完点菜单再进厨房。Agent 拿到需求后会先提取六个信号页面类型、你用的情绪词、参考素材、目标受众、已有品牌资产以及无障碍、合规这类隐形约束然后用一句话输出设计判断比如读作面向技术买家的 Linear 风极简落地页。需求含糊时它只允许问一个问题而不是瞎猜。三个旋钮决定观感相当于调音台上的三个推子推到哪输出跟到哪。DESIGN_VARIANCE管布局离散度MOTION_INTENSITY管动画强度VISUAL_DENSITY管每屏信息量取值都是 1-10DESIGN_VARIANCE: 8 # 1对称工整10非对称实验 MOTION_INTENSITY: 6 # 1仅悬停10滚动叙事 VISUAL_DENSITY: 4 # 1美术馆式留白10数据驾驶舱技能内置了需求词到参数的映射表说minimalist对应低方差低密度说Awwwards 实验风就推到 9-10。默认基线是 8/6/4你可以在对话里直接口头覆盖。一套交付前自检清单相当于发货前的质检单任何一项不过就不算完工。技能明确列出了 AI 的签名病紫蓝渐变、三等宽功能卡片、Inter 默认字体、每个区块标题上方的小号大写字母标签、用破折号当装饰全部禁止。最后还要跑几十项预检按钮文字对比度是否达标、英雄区是否一屏放下、CTA 文案是否换行、整页主题是否统一。用真实设计系统不手搓相当于建房子用预制件而不是自己现浇混凝土。需求是企业级仪表盘就用 Fluent 或 Carbon 的官方包现代 SaaS 默认 Tailwind v4 加 shadcn/ui只有粗野主义这类纯美学方向才手写 CSS。硬规则是一个项目只允许一个设计系统不能混用。能力一览模块作用适合谁taste-skill默认技能推断设计语言、调三个旋钮、交付前自检从零做落地页、作品集的人gpt-tasteskill更严的 GPT/Codex 变体布局离散度更高用 Codex 出码觉得太保守的团队image-to-code-skill生成参考图、分析、再写代码的三步流水线有设计方向想落成代码的人redesign-skill先审计现有 UI再修布局、间距与层级老网站翻新、重构soft-skill低对比、大留白、弹簧动效的高端视觉品牌、奢侈品向站点minimalist-skillNotion/Linear 式克制排版、严格结构生产力工具、SaaS 产品brutalist-skill瑞士字体、锐利对比的工业粗野风格实验性、艺术项目imagegen-frontend-web / mobile / brandkit只出设计稿不出代码网页、移动端、品牌工具包先要视觉草稿再开发的人按场景怎么选如果你在做新的落地页或作品集选默认的 taste-skill它是官方最稳的通用入口。如果你主力用 GPT/Codex 且嫌输出太安全选 gpt-tasteskill它对布局变化和动效有更激进的约束。如果你有设计稿但没有代码选 image-to-code-skill并在提示词里写明先生成图再分析再写代码。如果你在改造一个已有网站选 redesign-skill它会先审计品牌色、信息架构和 SEO 基线再动手。如果风格方向已经定了只想调口味选 soft-skill、minimalist-skill 或 brutalist-skill 之一。如果交付物是图片而不是代码选 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit把渲染结果再交给编码 Agent。实际效果参考文章中的案例数据一个企业级 SaaS 项目用该框架重构界面后页面加载从 3.2 秒降到 1.8 秒设计一致性评分从 65% 提到 94%一家电商做购物车页改造后转化率从 3.2% 提升到 4.7%。仓库里还放了一个完整示例站点Floria用它就能看出差别它的英雄区是非对称分栏而非居中堆叠区块之间有明确的节奏变化动效强度与旋钮档位对应而不是能跑就行的默认模板。避坑与最佳实践别让 AI 回到默认解紫蓝渐变、Inter 字体、三等宽卡片是技能明文禁止的发现就重做。动效档位调到 4 以上页面必须真的动起来同时要尊重系统的减少动态设置这条不可豁免。做 redesign 时先审计再动手URL、导航标签、表单字段名不能悄悄改否则 SEO 和埋点会先崩。Agent 爱写半成品、留占位注释的话加装 output-skill 强制完整输出。需求含糊时让它只问一个问题别让它猜推断错了比重来更贵。Taste-Skill 本身不写一行代码它把品味拆成了可推断、可调参、可检查的规则让 AI 前端从能写走到能交付。项目自己的定位是一句话Give your AI good taste让 AI 停止产出无聊的模板页面随着 v2 持续迭代这套规则大概率会覆盖更多框架与设计系统但核心不变即每个设计决策都讲得出理由。【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Taste-Skill：反模板AI前端设计指南
Taste-Skill反模板AI前端设计指南【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill让AI写个落地页十有八九是居中大标题、紫色渐变加三张一样的卡片。Taste-Skill 是一套开源的 AI 前端设计框架它把先读懂需求、再调三个参数、交付前自检写成能直接喂给编码 Agent 的技能文件让生成出来的页面不再像套模板。三步跑起来整个过程不需要写任何配置代码# 安装全部技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 或按名字安装单个技能用 name 字段不是文件夹名 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend第一步执行上面的安装命令CLI 会扫描仓库的 skills/ 目录把每个 SKILL.md 装进你的 Agent。第二步直接对 Codex、Cursor 或 Claude Code 说给我写一个 XX 网站Agent 会自动加载技能先输出一句设计判断再动笔。第三步按需微调对话里说一句布局再野一点即可不需要改文件。核心原理拆解先读需求再定风格相当于厨师先看完点菜单再进厨房。Agent 拿到需求后会先提取六个信号页面类型、你用的情绪词、参考素材、目标受众、已有品牌资产以及无障碍、合规这类隐形约束然后用一句话输出设计判断比如读作面向技术买家的 Linear 风极简落地页。需求含糊时它只允许问一个问题而不是瞎猜。三个旋钮决定观感相当于调音台上的三个推子推到哪输出跟到哪。DESIGN_VARIANCE管布局离散度MOTION_INTENSITY管动画强度VISUAL_DENSITY管每屏信息量取值都是 1-10DESIGN_VARIANCE: 8 # 1对称工整10非对称实验 MOTION_INTENSITY: 6 # 1仅悬停10滚动叙事 VISUAL_DENSITY: 4 # 1美术馆式留白10数据驾驶舱技能内置了需求词到参数的映射表说minimalist对应低方差低密度说Awwwards 实验风就推到 9-10。默认基线是 8/6/4你可以在对话里直接口头覆盖。一套交付前自检清单相当于发货前的质检单任何一项不过就不算完工。技能明确列出了 AI 的签名病紫蓝渐变、三等宽功能卡片、Inter 默认字体、每个区块标题上方的小号大写字母标签、用破折号当装饰全部禁止。最后还要跑几十项预检按钮文字对比度是否达标、英雄区是否一屏放下、CTA 文案是否换行、整页主题是否统一。用真实设计系统不手搓相当于建房子用预制件而不是自己现浇混凝土。需求是企业级仪表盘就用 Fluent 或 Carbon 的官方包现代 SaaS 默认 Tailwind v4 加 shadcn/ui只有粗野主义这类纯美学方向才手写 CSS。硬规则是一个项目只允许一个设计系统不能混用。能力一览模块作用适合谁taste-skill默认技能推断设计语言、调三个旋钮、交付前自检从零做落地页、作品集的人gpt-tasteskill更严的 GPT/Codex 变体布局离散度更高用 Codex 出码觉得太保守的团队image-to-code-skill生成参考图、分析、再写代码的三步流水线有设计方向想落成代码的人redesign-skill先审计现有 UI再修布局、间距与层级老网站翻新、重构soft-skill低对比、大留白、弹簧动效的高端视觉品牌、奢侈品向站点minimalist-skillNotion/Linear 式克制排版、严格结构生产力工具、SaaS 产品brutalist-skill瑞士字体、锐利对比的工业粗野风格实验性、艺术项目imagegen-frontend-web / mobile / brandkit只出设计稿不出代码网页、移动端、品牌工具包先要视觉草稿再开发的人按场景怎么选如果你在做新的落地页或作品集选默认的 taste-skill它是官方最稳的通用入口。如果你主力用 GPT/Codex 且嫌输出太安全选 gpt-tasteskill它对布局变化和动效有更激进的约束。如果你有设计稿但没有代码选 image-to-code-skill并在提示词里写明先生成图再分析再写代码。如果你在改造一个已有网站选 redesign-skill它会先审计品牌色、信息架构和 SEO 基线再动手。如果风格方向已经定了只想调口味选 soft-skill、minimalist-skill 或 brutalist-skill 之一。如果交付物是图片而不是代码选 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit把渲染结果再交给编码 Agent。实际效果参考文章中的案例数据一个企业级 SaaS 项目用该框架重构界面后页面加载从 3.2 秒降到 1.8 秒设计一致性评分从 65% 提到 94%一家电商做购物车页改造后转化率从 3.2% 提升到 4.7%。仓库里还放了一个完整示例站点Floria用它就能看出差别它的英雄区是非对称分栏而非居中堆叠区块之间有明确的节奏变化动效强度与旋钮档位对应而不是能跑就行的默认模板。避坑与最佳实践别让 AI 回到默认解紫蓝渐变、Inter 字体、三等宽卡片是技能明文禁止的发现就重做。动效档位调到 4 以上页面必须真的动起来同时要尊重系统的减少动态设置这条不可豁免。做 redesign 时先审计再动手URL、导航标签、表单字段名不能悄悄改否则 SEO 和埋点会先崩。Agent 爱写半成品、留占位注释的话加装 output-skill 强制完整输出。需求含糊时让它只问一个问题别让它猜推断错了比重来更贵。Taste-Skill 本身不写一行代码它把品味拆成了可推断、可调参、可检查的规则让 AI 前端从能写走到能交付。项目自己的定位是一句话Give your AI good taste让 AI 停止产出无聊的模板页面随着 v2 持续迭代这套规则大概率会覆盖更多框架与设计系统但核心不变即每个设计决策都讲得出理由。【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考