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-skillTaste-Skill 是一套面向 AI 编码代理的开源规则文件它把布局、字体、配色的设计标准写成模型必须遵守的规则解决的是 AI 生成前端时千篇一律的模板脸和 AI 紫渐变问题。它到底是什么一份 SKILL.md 规则文件不是组件库先说形态。这个项目的核心是skills/目录下一组 SKILL.md 文件每个文件是一套完整的设计规则规定 AI 做页面时的决策流程。它有三个特点不绑定框架规则针对设计意图而不是某个框架 APIReact、Vue、Svelte 都能用不绑定单一代理Codex、Cursor、Claude Code 都能加载也可以直接把文件粘贴进 ChatGPT 对话不打包组件它不给你组件代码而是告诉模型该装哪个官方包Fluent UI、shadcn/ui 等并怎么用换句话说它改变的是模型写代码前的决策依据而不是替你写代码。机制三层读需求、调三个参数、映射设计系统 ️先读需求再调参数最后才写代码。默认技能的第一步是设计解读从你的描述里读六类信号——页面类型落地页/作品集/改版、你用的氛围词minimalist、Linear-style、brutalist……、贴的参考链接和截图、目标受众、已有品牌资产、无障碍或合规约束。然后先输出一句话结论例如B2B SaaS 落地页面向技术买家Linear 式极简。需求真的含糊时只允许问一个问题不许猜也不许连珠炮式提问。读完需求后设置DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY三个 1–10 的档位后续所有布局和动效决定都由这三个数约束DESIGN_VARIANCE: 8 # 1 完全对称 → 10 艺术化错落 MOTION_INTENSITY: 6 # 1 仅悬停态 → 10 滚动/物理动画 VISUAL_DENSITY: 4 # 1 画廊式留白 → 10 仪表盘式密集默认基线是 8/6/4。文件里还带了推断表minimalist/calm 落到低变化低密度playful/Awwwards 落到高变化高动效改版项目在现有风格上做小幅偏移。第三层是映射现有设计系统需求明确指向某家体系时——微软系、Google 风格、IBM 数据类、Shopify 后台、英国或美国公共部门——规则要求直接用官方包不手搓 CSS并且一个项目只选一套系统不混用。纯美学方向玻璃拟态、bento、粗野主义等没有官方包就用原生 CSS 实现并在注释里诚实标注这是借鉴。反模板的部分也在规则里且很具体强调色最多 1 个、饱和度默认低于 80%、AI 紫蓝辉光按默认禁用Inter 不得作为默认字体优先 Geist、Outfit 等高端消费品网站最常见的米色底黄铜点缀配色被列为默认禁用组合必须换色板hero 必须落在首屏内、导航桌面端一行放下、按钮文字对比度至少 4.5:1、同一意图的 CTA 全站只允许一种文案。这些规则都是上下文化的只在对应场景触发不盲目套用。13 个技能模块怎么选该装哪一个模块分两类实现类输出代码图像生成类只出参考图不写代码。文件夹安装名--skill 参数什么时候用taste-skilldesign-taste-frontend默认选择v2 实验版taste-skill-v1design-taste-frontend-v1需要锁定 v1 的旧行为gpt-tasteskillgpt-tasteGPT/Codex 向布局与动效规则更严image-to-code-skillimage-to-code先生成参考图、再分析、再实现的流程redesign-skillredesign-existing-projects对现有项目先审计后修复soft-skillhigh-end-visual-design低对比、留白多的高端视觉minimalist-skillminimalist-uiNotion/Linear 式产品界面brutalist-skillindustrial-brutalist-ui工业粗野风格实验项目stitch-skillstitch-design-tasteGoogle Stitch 兼容规则可导出 DESIGN.mdoutput-skillfull-output-enforcement模型爱偷懒、留占位注释时图像生成类有三个imagegen-frontend-web网站设计稿、imagegen-frontend-mobile移动端屏幕与流程、brandkit品牌板logo 方向、配色、字体。典型用法是先把这几份文件附给 ChatGPT Images 之类的图像生成器出图再把成图交给编码代理实现想一条流水线走完就用image-to-code并在提示词里写明先出图、再分析、再写码。选择建议就一句先用默认技能等视觉方向定了再按需加一个风格模块别一次全装。两条命令装好 Taste-Skill以及最小用法# 安装全部技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 只装默认技能参数是安装名不是文件夹名 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend不想用 CLI 也行把任意一个 SKILL.md 拷进项目目录或直接粘进对话效果相同。升级就是重跑同一条命令安装名没变脚本不用改。仓库examples/里的 Flora 官网就是用这套技能生成的深色底、非对称 hero、衬线斜体只用于强调词、无紫渐变、无三等宽卡片——对照上面那几条规则能一一印证。效果边界与版本现状几个事实范围明确默认技能自己声明只管落地页、作品集和改版不覆盖仪表盘、数据表格和多步产品界面后者应走设计系统映射那一层当前默认技能是 v2 实验版正在向 2.0.0 稳定版迭代追求行为稳定的项目应锁定design-taste-frontend-v1仓库research/目录收录了关于大模型为何产出残缺代码的背景研究解释了强制完整输出这类规则的来源许可证为 MIT仓库里没有任何前后对比数据或转化率指标这里也不编。它的价值更直接过去在你脑子里做的设计决策现在被写成了模型必须执行的规则。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辅助生成（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-skillTaste-Skill 是一套面向 AI 编码代理的开源规则文件它把布局、字体、配色的设计标准写成模型必须遵守的规则解决的是 AI 生成前端时千篇一律的模板脸和 AI 紫渐变问题。它到底是什么一份 SKILL.md 规则文件不是组件库先说形态。这个项目的核心是skills/目录下一组 SKILL.md 文件每个文件是一套完整的设计规则规定 AI 做页面时的决策流程。它有三个特点不绑定框架规则针对设计意图而不是某个框架 APIReact、Vue、Svelte 都能用不绑定单一代理Codex、Cursor、Claude Code 都能加载也可以直接把文件粘贴进 ChatGPT 对话不打包组件它不给你组件代码而是告诉模型该装哪个官方包Fluent UI、shadcn/ui 等并怎么用换句话说它改变的是模型写代码前的决策依据而不是替你写代码。机制三层读需求、调三个参数、映射设计系统 ️先读需求再调参数最后才写代码。默认技能的第一步是设计解读从你的描述里读六类信号——页面类型落地页/作品集/改版、你用的氛围词minimalist、Linear-style、brutalist……、贴的参考链接和截图、目标受众、已有品牌资产、无障碍或合规约束。然后先输出一句话结论例如B2B SaaS 落地页面向技术买家Linear 式极简。需求真的含糊时只允许问一个问题不许猜也不许连珠炮式提问。读完需求后设置DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY三个 1–10 的档位后续所有布局和动效决定都由这三个数约束DESIGN_VARIANCE: 8 # 1 完全对称 → 10 艺术化错落 MOTION_INTENSITY: 6 # 1 仅悬停态 → 10 滚动/物理动画 VISUAL_DENSITY: 4 # 1 画廊式留白 → 10 仪表盘式密集默认基线是 8/6/4。文件里还带了推断表minimalist/calm 落到低变化低密度playful/Awwwards 落到高变化高动效改版项目在现有风格上做小幅偏移。第三层是映射现有设计系统需求明确指向某家体系时——微软系、Google 风格、IBM 数据类、Shopify 后台、英国或美国公共部门——规则要求直接用官方包不手搓 CSS并且一个项目只选一套系统不混用。纯美学方向玻璃拟态、bento、粗野主义等没有官方包就用原生 CSS 实现并在注释里诚实标注这是借鉴。反模板的部分也在规则里且很具体强调色最多 1 个、饱和度默认低于 80%、AI 紫蓝辉光按默认禁用Inter 不得作为默认字体优先 Geist、Outfit 等高端消费品网站最常见的米色底黄铜点缀配色被列为默认禁用组合必须换色板hero 必须落在首屏内、导航桌面端一行放下、按钮文字对比度至少 4.5:1、同一意图的 CTA 全站只允许一种文案。这些规则都是上下文化的只在对应场景触发不盲目套用。13 个技能模块怎么选该装哪一个模块分两类实现类输出代码图像生成类只出参考图不写代码。文件夹安装名--skill 参数什么时候用taste-skilldesign-taste-frontend默认选择v2 实验版taste-skill-v1design-taste-frontend-v1需要锁定 v1 的旧行为gpt-tasteskillgpt-tasteGPT/Codex 向布局与动效规则更严image-to-code-skillimage-to-code先生成参考图、再分析、再实现的流程redesign-skillredesign-existing-projects对现有项目先审计后修复soft-skillhigh-end-visual-design低对比、留白多的高端视觉minimalist-skillminimalist-uiNotion/Linear 式产品界面brutalist-skillindustrial-brutalist-ui工业粗野风格实验项目stitch-skillstitch-design-tasteGoogle Stitch 兼容规则可导出 DESIGN.mdoutput-skillfull-output-enforcement模型爱偷懒、留占位注释时图像生成类有三个imagegen-frontend-web网站设计稿、imagegen-frontend-mobile移动端屏幕与流程、brandkit品牌板logo 方向、配色、字体。典型用法是先把这几份文件附给 ChatGPT Images 之类的图像生成器出图再把成图交给编码代理实现想一条流水线走完就用image-to-code并在提示词里写明先出图、再分析、再写码。选择建议就一句先用默认技能等视觉方向定了再按需加一个风格模块别一次全装。两条命令装好 Taste-Skill以及最小用法# 安装全部技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 只装默认技能参数是安装名不是文件夹名 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend不想用 CLI 也行把任意一个 SKILL.md 拷进项目目录或直接粘进对话效果相同。升级就是重跑同一条命令安装名没变脚本不用改。仓库examples/里的 Flora 官网就是用这套技能生成的深色底、非对称 hero、衬线斜体只用于强调词、无紫渐变、无三等宽卡片——对照上面那几条规则能一一印证。效果边界与版本现状几个事实范围明确默认技能自己声明只管落地页、作品集和改版不覆盖仪表盘、数据表格和多步产品界面后者应走设计系统映射那一层当前默认技能是 v2 实验版正在向 2.0.0 稳定版迭代追求行为稳定的项目应锁定design-taste-frontend-v1仓库research/目录收录了关于大模型为何产出残缺代码的背景研究解释了强制完整输出这类规则的来源许可证为 MIT仓库里没有任何前后对比数据或转化率指标这里也不编。它的价值更直接过去在你脑子里做的设计决策现在被写成了模型必须执行的规则。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辅助生成（AIGC），仅供参考