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 是开源的 Agent 技能包把一组前端设计规则注入 Codex、Cursor、Claude Code 等 AI 编码工具让生成的页面不再千篇一律。调整三个 1-10 的参数即可控制布局、动效与信息密度能更快从想法走到有样式的页面。适合谁用能省掉哪些重复调整 不空谈AI 设计不好看三个具体处境独立开发者或小团队交付落地页你对 AI 说做个 SaaS 官网拿到的经常是熟悉的紫色渐变、居中 Hero 和三张等宽功能卡。Taste-Skill 要求 AI 先用一句话说清这是什么页面、给谁看、什么风格再动代码产出更贴合受众也减少来回改稿。需要成套参考图的设计师仓库里有三只只出图、不写码的技能Web、移动端、品牌工具包可以先生成视觉参考板再交给编码 Agent 实现省掉在聊天窗口里反复解释再高级一点、再留白一点。接手旧项目做视觉修补的人重设计技能规定先审计、后动手先判断属于保留品牌还是整体翻新Logo、颜色、字体等既有资产被当作起点而不是可选项。边界也要说清这套规则面向落地页、作品集、营销站等展示型页面文档明确列出不覆盖仪表盘、数据表格、多步表单、代码编辑器、原生移动端 UI。影响最终页面的四个机制先读简报再写代码生成前AI 会读取页面类型落地页 / 作品集 / 重设计、你用的风格词minimal、premium、brutalist 等、参考链接、受众和已有品牌资产输出一行设计解读只有当解读会真正分叉时才问一个问题其余情况直接声明后开工。三个参数VARIANCE / MOTION / DENSITYDESIGN_VARIANCE管布局实验程度1 完美对称到 10 自由不对称MOTION_INTENSITY管动效深度1 静态到 10 沉浸式VISUAL_DENSITY管每屏信息量1 画廊留白到 10 数据密集。基线为 8/6/4对话里一句话即可覆盖不需要去改技能文件。该用官方包就用官方包当需求明显对应某个体系Material、Fluent、Carbon、Polaris、GOV.UK、shadcn、Tailwind 等技能要求安装并使用官方包而不是手写一套相似 CSS当只是美学方向玻璃拟态、Bento、深色科技等用原生 CSS 实现并在代码注释里如实标注这是参考实现非官方物料。硬规则与交付前检查v2 带一份禁用清单em-dash 滥用、01 / INDEX 式编号眉标、Scroll to explore 滚动提示、装饰性圆点、用 div 拼的假产品截图、营销页底部的版本号等。交付前还必须过硬清单CTA 对比度达到 WCAG AA、全页一个强调色、一套圆角系统、主题中途不翻转以及MOTION_INTENSITY高于 4 时页面必须真有动画否则把参数降回 3 交付静态版。最小接入路径推荐路径是一条命令装全部。安装工具会扫描仓库的skills/目录代码技能和图像技能走同一条命令npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只装某一只时按安装名指定它是 SKILL 文件 frontmatter 里的name:字段不是文件夹名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend备选路径把任意SKILL.md复制进项目或整段粘贴进对话窗口也行。规则针对设计意图而非某框架 APIReact、Vue、Svelte 等都能用。按任务选用设计技能做首版页面用默认的design-taste-frontend。提示词里写清页面类型、受众和两三个风格词先核对它声明的设计解读方向不对就一句话纠正再放行代码。想要更强的布局变化和动效约束可换gpt-taste面向 GPT/Codex 的严格变体。从参考图到可运行页面用image-to-code它是生成参考图 → 分析参考图 → 按图实现的三段式流水线提示词里可以写明follow the skill: generate images, then analyze, then code。只想要参考图板时用imagegen-frontend-web、imagegen-frontend-mobile、brandkit三只纯图像技能产出交给任何支持图像生成的模型。上面的 Floria 落地页是仓库examples/目录里的示例输出由默认技能生成。重设计现有界面用redesign-existing-projects。先审计现有页面再按优先级修布局、间距、层级保留品牌模式下URL 结构、导航标签、表单字段名、法务文案不会被悄悄改动。AI 总是交付半成品加full-output-enforcement强制完整输出、不允许占位注释对应输出被截断的问题。风格参数怎么设三个参数是联动关系不是三个独立开关。技能文件里自带推演表也可以按下面目标 → 建议值在对话里直接声明目标VARIANCEMOTIONDENSITY得到的效果极简、编辑风Linear 感5-63-42-3大留白、克制配色、动效少高端消费 / 品牌感7-85-73-4柔和对比、弹簧式动效、留白多创意、实验Awwwards 感9-108-103-4不对称布局、滚动联动动画常规落地页默认764均衡、安全信任优先 / 公共服务3-42-34-5对称、低动效、信息量偏大重设计 - 保留品牌对齐现状现状 1对齐现状骨架不动只微调细节两点提醒MOTION_INTENSITY超过 3 时页面必须带 reduced-motion 降级prefers-reduced-motion这是硬规则动效只允许用transform/opacity禁止手写 scroll 监听去改 React state这是动画是否流畅的分界线。质量校验与常见失败的修正交付前对照预检清单检查五类问题布局Hero 标题不超两行、桌面导航单行且高度不超过 80px、八个区块至少四种不同布局、响应式不滚动就能看到 CTA、可访问性按钮对比度、键盘与读屏、性能动画走硬件加速、图片优化、品牌一致全页一个强调色、一套圆角、一个主题。常见失败与对应修法页面AI 味重em-dash、编号眉标、装饰圆点、纯文字 logo 墙→ 使用 v2这些特征都在禁用清单里输出被截断、组件没写全→ 叠加full-output-enforcementv2 的硬规则与现有工作流冲突→ 固定安装名design-taste-frontend-v1行为与原版一致滚动动画卡顿→ 使用技能内置的 GSAP/Motion 标准骨架sticky-stack、横向 pan、滚动渐显不要自写滚动计算。版本选择与仓库资源当前默认的taste-skill是v2实验版在 v1 基础上大改新增简报推理、设计系统映射、暗色模式协议、重设计协议和交付前检查正在向 v2.0.0 稳定版迭代依赖 v1 精确行为的项目用安装名design-taste-frontend-v1固定即可v1→v2 的完整差异和原因记录在CHANGELOG.md。资源入口相对仓库根目录全部技能在skills/每个文件夹一份独立SKILL.md规则背后的研究笔记在research/包含 AI 产出懒惰现象的成因分析与修复方法示例截图在examples/。许可证为 MIT。下一步挑一个你正要做的真实页面落地页或作品集均可跑一次上面的安装命令然后给 AI 一行简报例如面向技术买家的 B2B SaaS 落地页Linear 式极简。先核对两件事它声明的设计解读是否准确、三个参数能否只靠对话覆盖。这两点通过后把交付结果按上面五类清单抽查一遍即可。【免费下载链接】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 是开源的 Agent 技能包把一组前端设计规则注入 Codex、Cursor、Claude Code 等 AI 编码工具让生成的页面不再千篇一律。调整三个 1-10 的参数即可控制布局、动效与信息密度能更快从想法走到有样式的页面。适合谁用能省掉哪些重复调整 不空谈AI 设计不好看三个具体处境独立开发者或小团队交付落地页你对 AI 说做个 SaaS 官网拿到的经常是熟悉的紫色渐变、居中 Hero 和三张等宽功能卡。Taste-Skill 要求 AI 先用一句话说清这是什么页面、给谁看、什么风格再动代码产出更贴合受众也减少来回改稿。需要成套参考图的设计师仓库里有三只只出图、不写码的技能Web、移动端、品牌工具包可以先生成视觉参考板再交给编码 Agent 实现省掉在聊天窗口里反复解释再高级一点、再留白一点。接手旧项目做视觉修补的人重设计技能规定先审计、后动手先判断属于保留品牌还是整体翻新Logo、颜色、字体等既有资产被当作起点而不是可选项。边界也要说清这套规则面向落地页、作品集、营销站等展示型页面文档明确列出不覆盖仪表盘、数据表格、多步表单、代码编辑器、原生移动端 UI。影响最终页面的四个机制先读简报再写代码生成前AI 会读取页面类型落地页 / 作品集 / 重设计、你用的风格词minimal、premium、brutalist 等、参考链接、受众和已有品牌资产输出一行设计解读只有当解读会真正分叉时才问一个问题其余情况直接声明后开工。三个参数VARIANCE / MOTION / DENSITYDESIGN_VARIANCE管布局实验程度1 完美对称到 10 自由不对称MOTION_INTENSITY管动效深度1 静态到 10 沉浸式VISUAL_DENSITY管每屏信息量1 画廊留白到 10 数据密集。基线为 8/6/4对话里一句话即可覆盖不需要去改技能文件。该用官方包就用官方包当需求明显对应某个体系Material、Fluent、Carbon、Polaris、GOV.UK、shadcn、Tailwind 等技能要求安装并使用官方包而不是手写一套相似 CSS当只是美学方向玻璃拟态、Bento、深色科技等用原生 CSS 实现并在代码注释里如实标注这是参考实现非官方物料。硬规则与交付前检查v2 带一份禁用清单em-dash 滥用、01 / INDEX 式编号眉标、Scroll to explore 滚动提示、装饰性圆点、用 div 拼的假产品截图、营销页底部的版本号等。交付前还必须过硬清单CTA 对比度达到 WCAG AA、全页一个强调色、一套圆角系统、主题中途不翻转以及MOTION_INTENSITY高于 4 时页面必须真有动画否则把参数降回 3 交付静态版。最小接入路径推荐路径是一条命令装全部。安装工具会扫描仓库的skills/目录代码技能和图像技能走同一条命令npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只装某一只时按安装名指定它是 SKILL 文件 frontmatter 里的name:字段不是文件夹名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend备选路径把任意SKILL.md复制进项目或整段粘贴进对话窗口也行。规则针对设计意图而非某框架 APIReact、Vue、Svelte 等都能用。按任务选用设计技能做首版页面用默认的design-taste-frontend。提示词里写清页面类型、受众和两三个风格词先核对它声明的设计解读方向不对就一句话纠正再放行代码。想要更强的布局变化和动效约束可换gpt-taste面向 GPT/Codex 的严格变体。从参考图到可运行页面用image-to-code它是生成参考图 → 分析参考图 → 按图实现的三段式流水线提示词里可以写明follow the skill: generate images, then analyze, then code。只想要参考图板时用imagegen-frontend-web、imagegen-frontend-mobile、brandkit三只纯图像技能产出交给任何支持图像生成的模型。上面的 Floria 落地页是仓库examples/目录里的示例输出由默认技能生成。重设计现有界面用redesign-existing-projects。先审计现有页面再按优先级修布局、间距、层级保留品牌模式下URL 结构、导航标签、表单字段名、法务文案不会被悄悄改动。AI 总是交付半成品加full-output-enforcement强制完整输出、不允许占位注释对应输出被截断的问题。风格参数怎么设三个参数是联动关系不是三个独立开关。技能文件里自带推演表也可以按下面目标 → 建议值在对话里直接声明目标VARIANCEMOTIONDENSITY得到的效果极简、编辑风Linear 感5-63-42-3大留白、克制配色、动效少高端消费 / 品牌感7-85-73-4柔和对比、弹簧式动效、留白多创意、实验Awwwards 感9-108-103-4不对称布局、滚动联动动画常规落地页默认764均衡、安全信任优先 / 公共服务3-42-34-5对称、低动效、信息量偏大重设计 - 保留品牌对齐现状现状 1对齐现状骨架不动只微调细节两点提醒MOTION_INTENSITY超过 3 时页面必须带 reduced-motion 降级prefers-reduced-motion这是硬规则动效只允许用transform/opacity禁止手写 scroll 监听去改 React state这是动画是否流畅的分界线。质量校验与常见失败的修正交付前对照预检清单检查五类问题布局Hero 标题不超两行、桌面导航单行且高度不超过 80px、八个区块至少四种不同布局、响应式不滚动就能看到 CTA、可访问性按钮对比度、键盘与读屏、性能动画走硬件加速、图片优化、品牌一致全页一个强调色、一套圆角、一个主题。常见失败与对应修法页面AI 味重em-dash、编号眉标、装饰圆点、纯文字 logo 墙→ 使用 v2这些特征都在禁用清单里输出被截断、组件没写全→ 叠加full-output-enforcementv2 的硬规则与现有工作流冲突→ 固定安装名design-taste-frontend-v1行为与原版一致滚动动画卡顿→ 使用技能内置的 GSAP/Motion 标准骨架sticky-stack、横向 pan、滚动渐显不要自写滚动计算。版本选择与仓库资源当前默认的taste-skill是v2实验版在 v1 基础上大改新增简报推理、设计系统映射、暗色模式协议、重设计协议和交付前检查正在向 v2.0.0 稳定版迭代依赖 v1 精确行为的项目用安装名design-taste-frontend-v1固定即可v1→v2 的完整差异和原因记录在CHANGELOG.md。资源入口相对仓库根目录全部技能在skills/每个文件夹一份独立SKILL.md规则背后的研究笔记在research/包含 AI 产出懒惰现象的成因分析与修复方法示例截图在examples/。许可证为 MIT。下一步挑一个你正要做的真实页面落地页或作品集均可跑一次上面的安装命令然后给 AI 一行简报例如面向技术买家的 B2B SaaS 落地页Linear 式极简。先核对两件事它声明的设计解读是否准确、三个参数能否只靠对话覆盖。这两点通过后把交付结果按上面五类清单抽查一遍即可。【免费下载链接】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），仅供参考