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 写一个落地页得到的大概率是同一个东西紫色渐变 Hero、三张等宽特性卡片、Inter 配深灰底。AI 设计品味差不是因为模型学不到好设计而是没人约束它先做判断。Taste-Skill 是一个开源的 AI 前端设计技能包它给 Agent 注入一套可执行的色彩规则、布局纪律和预检清单逼 AI 在动手前想清楚配色和版式而不是一步到位套默认模板。 一条命令接入你的 AI 编码工具安装走 Agent Skills CLI它会自动扫描仓库的skills/目录npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill一次装下全部 13 个技能含输出代码的实现类和只出参考图的图像生成类。也可以按 install name 只装一个npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend技能本体就是 Markdown。不依赖 CLI 时把skills/taste-skill/SKILL.md直接复制进 ChatGPT 或 Codex 对话规则照样生效。️ 先看 Design Read再拨三个旋钮装好技能后默认技能design-taste-frontend的第一步不是写代码而是输出一行 Design Read例如Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language。它把页面类型、受众、语气、参考对象先推断出来设计意图变成推理结果而不是默认值堆叠。需求有歧义时它只问一个问题问完即止。接着是三个 1-10 的旋钮决定整页基调DESIGN_VARIANCE布局实验性1 是完美对称10 是艺术性混乱MOTION_INTENSITY动画深度1 是纯静态10 是电影级编排VISUAL_DENSITY信息密度1 是美术馆留白10 是驾驶舱密度不同需求对应不同组合直接写进提示词即可覆盖默认值不用改文件需求场景VARIANCE / MOTION / DENSITY营销落地页主流 SaaS7 / 6 / 4创意机构页9 / 8 / 3设计师作品集8 / 7 / 3政务 / 合规 / 无障碍优先3 / 2 / 5 四条可量化的色彩规则色板是 v2 默认技能里约束最严的部分每条规则都具体到可以逐字检查。Lila 规则。AI 默认偏爱紫蓝渐变和紫色按钮光晕这类方案默认禁用。正确做法是中性底Zinc / Slate / Stone加一个高对比强调色强调色全页最多一个饱和度默认压到 80% 以下。品牌本来就用紫色时规则放行但要求配色自洽不是随机构光。色彩一致性锁。强调色选定后全页锁定暖灰主色的网站第 7 节不能冒出蓝色 CTA玫瑰色强调的站点页脚不能出现青色状态徽章。发版前逐一过组件这是强制项。对比度怎么算。每个 CTA 与表单都要过 WCAG AA正文对比度 4.5:118px 以上大文本 3:1。白底白字、浅灰占位符放在近白背景上都算直接不合格。机械预检。默认技能内置 60 多项硬性检查大部分可机械计数eyebrow 小标签每 3 个 section 最多出现 1 次同一意图的 CTA 文案全页只允许一套bento 网格的格子数必须等于内容数不许留空格。这些禁令不是拍脑袋。项目方对真实 LLM 生成的落地页做过反复测试把模型爱犯的签名式错误逐条列进了禁用区skills/taste-skill/SKILL.md 第 9 节仓库还公开了调研记录research/laziness/ 目录专门拆解了模型偷懒输出占位代码的根因与修复手段research/ 下按主题分文件夹归档。 效果佐证一张真实产出长什么样仓库examples/目录放了一个用该技能生成的花卉工作室落地页 Floria暗色底、非居中 Hero、真实摄影素材没有渐变光斑、假截图和装饰性状态点。这恰好是上面规则要求避开的反面。想核对完整规则原文把仓库 clone 下来即可git clone https://gitcode.com/GitHub_Trending/ta/taste-skill taste-skillv1 与 v2 共存默认装到的已经是 v2实验版CHANGELOG.md 记录了 v1 到 v2 的完整 diff 和动机。只有当你的工作流依赖 v1 的确切行为时才用--skill design-taste-frontend-v1固定旧版。 技能选型对照表与避坑清单13 个技能各管一件事按场景选场景技能install name注意常规落地页 / 作品集design-taste-frontend不适用于仪表盘与多步表单那类需求它要求你改用官方设计系统库GPT / Codex 下要更严约束gpt-taste更高的布局方差与动画执行要求存量项目改造redesign-existing-projects先审计再动刀SEO 与页面路由默认不动高端消费品牌质感high-end-visual-design更低对比、更多留白与弹簧动效模型反复截断输出full-output-enforcement强制完整输出禁止占位注释交付物是参考图而非代码imagegen-frontend-web/imagegen-frontend-mobile/brandkit出图后交给编码 Agent 实现三个最容易踩的坑把taste-skill当通用 UI 工具。它的作用域只有落地页、作品集与改版仪表盘请用 Carbon、Fluent 这类官方系统。需求模糊时让 AI 猜。Design Read 分叉明显时它只问一个问题把答案给它比事后返工便宜。声称了动画却没兑现。MOTION_INTENSITY高于 4 时页面必须真的动动效必须能一句话说出理由说不出就砍掉。下一步运行npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill然后让 Agent 先输出一行 Design Read 再动手。【免费下载链接】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），仅供参考 AI 生成的界面为什么总长得一样？Taste-Skill 用规则把 AI 设计品味拉回专业水准
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 写一个落地页得到的大概率是同一个东西紫色渐变 Hero、三张等宽特性卡片、Inter 配深灰底。AI 设计品味差不是因为模型学不到好设计而是没人约束它先做判断。Taste-Skill 是一个开源的 AI 前端设计技能包它给 Agent 注入一套可执行的色彩规则、布局纪律和预检清单逼 AI 在动手前想清楚配色和版式而不是一步到位套默认模板。 一条命令接入你的 AI 编码工具安装走 Agent Skills CLI它会自动扫描仓库的skills/目录npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill一次装下全部 13 个技能含输出代码的实现类和只出参考图的图像生成类。也可以按 install name 只装一个npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend技能本体就是 Markdown。不依赖 CLI 时把skills/taste-skill/SKILL.md直接复制进 ChatGPT 或 Codex 对话规则照样生效。️ 先看 Design Read再拨三个旋钮装好技能后默认技能design-taste-frontend的第一步不是写代码而是输出一行 Design Read例如Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language。它把页面类型、受众、语气、参考对象先推断出来设计意图变成推理结果而不是默认值堆叠。需求有歧义时它只问一个问题问完即止。接着是三个 1-10 的旋钮决定整页基调DESIGN_VARIANCE布局实验性1 是完美对称10 是艺术性混乱MOTION_INTENSITY动画深度1 是纯静态10 是电影级编排VISUAL_DENSITY信息密度1 是美术馆留白10 是驾驶舱密度不同需求对应不同组合直接写进提示词即可覆盖默认值不用改文件需求场景VARIANCE / MOTION / DENSITY营销落地页主流 SaaS7 / 6 / 4创意机构页9 / 8 / 3设计师作品集8 / 7 / 3政务 / 合规 / 无障碍优先3 / 2 / 5 四条可量化的色彩规则色板是 v2 默认技能里约束最严的部分每条规则都具体到可以逐字检查。Lila 规则。AI 默认偏爱紫蓝渐变和紫色按钮光晕这类方案默认禁用。正确做法是中性底Zinc / Slate / Stone加一个高对比强调色强调色全页最多一个饱和度默认压到 80% 以下。品牌本来就用紫色时规则放行但要求配色自洽不是随机构光。色彩一致性锁。强调色选定后全页锁定暖灰主色的网站第 7 节不能冒出蓝色 CTA玫瑰色强调的站点页脚不能出现青色状态徽章。发版前逐一过组件这是强制项。对比度怎么算。每个 CTA 与表单都要过 WCAG AA正文对比度 4.5:118px 以上大文本 3:1。白底白字、浅灰占位符放在近白背景上都算直接不合格。机械预检。默认技能内置 60 多项硬性检查大部分可机械计数eyebrow 小标签每 3 个 section 最多出现 1 次同一意图的 CTA 文案全页只允许一套bento 网格的格子数必须等于内容数不许留空格。这些禁令不是拍脑袋。项目方对真实 LLM 生成的落地页做过反复测试把模型爱犯的签名式错误逐条列进了禁用区skills/taste-skill/SKILL.md 第 9 节仓库还公开了调研记录research/laziness/ 目录专门拆解了模型偷懒输出占位代码的根因与修复手段research/ 下按主题分文件夹归档。 效果佐证一张真实产出长什么样仓库examples/目录放了一个用该技能生成的花卉工作室落地页 Floria暗色底、非居中 Hero、真实摄影素材没有渐变光斑、假截图和装饰性状态点。这恰好是上面规则要求避开的反面。想核对完整规则原文把仓库 clone 下来即可git clone https://gitcode.com/GitHub_Trending/ta/taste-skill taste-skillv1 与 v2 共存默认装到的已经是 v2实验版CHANGELOG.md 记录了 v1 到 v2 的完整 diff 和动机。只有当你的工作流依赖 v1 的确切行为时才用--skill design-taste-frontend-v1固定旧版。 技能选型对照表与避坑清单13 个技能各管一件事按场景选场景技能install name注意常规落地页 / 作品集design-taste-frontend不适用于仪表盘与多步表单那类需求它要求你改用官方设计系统库GPT / Codex 下要更严约束gpt-taste更高的布局方差与动画执行要求存量项目改造redesign-existing-projects先审计再动刀SEO 与页面路由默认不动高端消费品牌质感high-end-visual-design更低对比、更多留白与弹簧动效模型反复截断输出full-output-enforcement强制完整输出禁止占位注释交付物是参考图而非代码imagegen-frontend-web/imagegen-frontend-mobile/brandkit出图后交给编码 Agent 实现三个最容易踩的坑把taste-skill当通用 UI 工具。它的作用域只有落地页、作品集与改版仪表盘请用 Carbon、Fluent 这类官方系统。需求模糊时让 AI 猜。Design Read 分叉明显时它只问一个问题把答案给它比事后返工便宜。声称了动画却没兑现。MOTION_INTENSITY高于 4 时页面必须真的动动效必须能一句话说出理由说不出就砍掉。下一步运行npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill然后让 Agent 先输出一行 Design Read 再动手。【免费下载链接】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），仅供参考