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 编码代理装上设计判断力的 Agent Skills代理技能指令文件。它把主观的设计决策拆成变化度、动效强度、视觉密度三个可调参数帮工程师和独立开发者让 AI 生成的落地页与作品集不再像批量生产的模板。AI 写的落地页为什么都像一个模子先看一个大概率发生过的场景你让 AI 写一个 SaaS 落地页30 秒出代码深底紫色渐变、居中大标题、三张等宽特性卡、中间一个发光的紫色按钮Inter 字体每个区块顶部还有一行大写加字距的英文小字。换两个不同项目跑一遍得到的是同一页。问题不在代码在于 AI 根本没做设计判断只是从训练数据里取了出现频率最高的那个版式。taste-skill 的做法是在代码生成前插一道设计工序先读需求再定参数然后才写代码最后跑一份自检清单。先读需求让 AI 声明它的设计解读写任何代码前taste-skill 强制 AI 先输出一行设计解读brief inference格式固定Reading this as: 面向技术买家的 B2B SaaS 落地页Linear 式极简语言倾向 Tailwind Geist 克制动效。这一行逼模型把页面类型、目标受众、视觉语言三个假设摊在桌面上后面所有布局和配色决策都受它约束。需求模糊时只允许问一个问题比如更接近 Linear 的干净还是 Awwwards 的实验感不许连珠炮式追问更不许自己猜。它还给默认审美列了黑名单紫色渐变、居中大 hero 加三张等宽卡、全页玻璃拟态、Inter 加 slate-900。这些是 LLM 回答设计两个字的默认答案taste-skill 要求有意识地绕开它们。调三个旋钮从参数到视觉结果设计解读完成后设定三个 1 到 10 的旋钮dials。后面所有布局、动效、间距规则都以这三个值为开关。需求里的信号到旋钮的映射是预定义的不用凭感觉需求信号VARIANCEMOTIONDENSITY极简 / 克制 / 编辑感5-63-42-3高端 / 品牌 / Apple 风7-85-73-4 playful / Awwwards / 实验9-108-103-4信任优先 / 政企 / 受监管3-42-34-5如何设置 DESIGN_VARIANCE让布局不再居中对称DESIGN_VARIANCE 控制版式偏离居中对称的程度。参数 312 列等宽网格、等距间距、居中对齐页面看起来安全也像任何一个 AI 页面。参数 8改用分数单位网格允许负边距让区块重叠留出大尺度留白。视觉结果同样的文案页面从模板变成有构图。移动端不对称布局会被强制折叠为单列避免溢出。/* 解决版式能偏离多远两个档位旋钮的 CSS 差别 */ /* DESIGN_VARIANCE: 3 - 12 列等宽网格居中安全但千篇一律 */ .layout-safe { grid-template-columns: repeat(12, 1fr); text-align: center; } /* DESIGN_VARIANCE: 8 - 分数单位网格 负边距重叠非对称构图出现 */ .layout-artsy { grid-template-columns: 2fr 1fr 1fr .5fr; margin-left: -5vw; }MOTION_INTENSITY 怎么决定动效给多少MOTION_INTENSITY 控制动画深度上限。1-3只有 hover 和按压状态页面基本是静态的。4-7滚动触发渐显、弹簧物理全部只驱动 transform 和 opacity。8-10滚动劫持、卡片堆叠上 GSAP ScrollTrigger。规则里有一条声称即兑现声明了 7 页面就必须真的动。做不出来就把旋钮降到 3交付干净的静态页。宁可静态不要半坏的动画。所有强度超过 3 的动效还必须为系统开启了减少动效prefers-reduced-motion的用户提供静态回退。VISUAL_DENSITY 怎么决定一屏放多少信息VISUAL_DENSITY 控制每视口的信息量。1-3画廊模式区块间距拉到 py-32 到 py-48一屏只留一个焦点。4-7标准 Web 应用间距信息和留白取平衡。8-10驾驶舱模式禁用卡片容器用 1px 线切分数据数字全部等宽字体。这个参数决定了同一套技能既能写花店官网也能写数据分析台密度档位一变整套间距系统跟着换。别造轮子需求匹配官方设计系统需求一旦被解读为某个成熟生态规则是安装官方包而不是手写 CSS 去模仿它。规则文件里有一条诚实条款用了某个设计系统就用完整禁止只引入它的 token 再把 90% 覆盖掉一个项目只准一个设计系统Fluent 和 Carbon 不许混。需求方向官方包解决什么Microsoft 系企业 SaaSfluentui/react-components官方 token可访问性已做Google 系产品material/webMaterial 3 主题化IBM 系数据分析carbon/react成熟的数据密集模式GitHub 系开发者工具primer/css开发者工具视觉惯例玻璃拟态、粗野主义、编辑感这类没有官方包的美学方向必须用原生 CSS 实现并在代码注释里写明这是近似实现而非官方规范。比如 Apple 的 Liquid Glass 并没有官方 Web 版任何 Web 实现都是 backdrop-filter 加叠层边框的近似规则要求明说。如何把 taste-skill 接入现有工作流它不是框架不打包组件不引入依赖。每个技能本质是一份 SKILL.md 规则文件接入方式二选一# 一条命令安装CLI 扫描仓库 skills/ 目录写入 agent 技能目录 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 按安装名装单个技能名字取自 SKILL 头部 name 字段 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend或者把 SKILL.md 直接贴进对话、拷进项目效果等价。图像优先的项目走另一条管线先用 imagegen-frontend-web 技能出视觉概念图再交给编码代理按图实现。改造项目用 redesign-skill流程是先审计再动手提取现有品牌色、字体、信息架构URL 和表单字段名不动避免破坏 SEO 和埋点然后按字体、间距、配色、动效、关键区块的优先级逐层改。核心技能规则在 skills/taste-skill/AI 为何倾向输出半成品、占位代码的实证研究笔记在 research/laziness/可以完整读一遍规则的来龙去脉。适用边界它不处理的场景规则文件把排除项写得同样明确仪表盘和管理后台去 Fluent、Carbon 这类官方库、数据表格TanStack Table、多步表单、代码编辑器、原生移动端 UI都不是它的业务。需求属于这些领域时正确动作是直说并推荐对应组件库而不是硬套营销页规则。还有一条边界是品味本身。它消掉的是 AI 的模板化默认值补不上缺失的产品叙事文案本身不通参数救不回来。另外 v2 规则目前是实验阶段仍在迭代需要长期稳定输出的团队可以固定使用 v1 技能design-taste-frontend-v1观察一段时间再切换。【免费下载链接】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 编码代理装上设计判断力的 Agent Skills代理技能指令文件。它把主观的设计决策拆成变化度、动效强度、视觉密度三个可调参数帮工程师和独立开发者让 AI 生成的落地页与作品集不再像批量生产的模板。AI 写的落地页为什么都像一个模子先看一个大概率发生过的场景你让 AI 写一个 SaaS 落地页30 秒出代码深底紫色渐变、居中大标题、三张等宽特性卡、中间一个发光的紫色按钮Inter 字体每个区块顶部还有一行大写加字距的英文小字。换两个不同项目跑一遍得到的是同一页。问题不在代码在于 AI 根本没做设计判断只是从训练数据里取了出现频率最高的那个版式。taste-skill 的做法是在代码生成前插一道设计工序先读需求再定参数然后才写代码最后跑一份自检清单。先读需求让 AI 声明它的设计解读写任何代码前taste-skill 强制 AI 先输出一行设计解读brief inference格式固定Reading this as: 面向技术买家的 B2B SaaS 落地页Linear 式极简语言倾向 Tailwind Geist 克制动效。这一行逼模型把页面类型、目标受众、视觉语言三个假设摊在桌面上后面所有布局和配色决策都受它约束。需求模糊时只允许问一个问题比如更接近 Linear 的干净还是 Awwwards 的实验感不许连珠炮式追问更不许自己猜。它还给默认审美列了黑名单紫色渐变、居中大 hero 加三张等宽卡、全页玻璃拟态、Inter 加 slate-900。这些是 LLM 回答设计两个字的默认答案taste-skill 要求有意识地绕开它们。调三个旋钮从参数到视觉结果设计解读完成后设定三个 1 到 10 的旋钮dials。后面所有布局、动效、间距规则都以这三个值为开关。需求里的信号到旋钮的映射是预定义的不用凭感觉需求信号VARIANCEMOTIONDENSITY极简 / 克制 / 编辑感5-63-42-3高端 / 品牌 / Apple 风7-85-73-4 playful / Awwwards / 实验9-108-103-4信任优先 / 政企 / 受监管3-42-34-5如何设置 DESIGN_VARIANCE让布局不再居中对称DESIGN_VARIANCE 控制版式偏离居中对称的程度。参数 312 列等宽网格、等距间距、居中对齐页面看起来安全也像任何一个 AI 页面。参数 8改用分数单位网格允许负边距让区块重叠留出大尺度留白。视觉结果同样的文案页面从模板变成有构图。移动端不对称布局会被强制折叠为单列避免溢出。/* 解决版式能偏离多远两个档位旋钮的 CSS 差别 */ /* DESIGN_VARIANCE: 3 - 12 列等宽网格居中安全但千篇一律 */ .layout-safe { grid-template-columns: repeat(12, 1fr); text-align: center; } /* DESIGN_VARIANCE: 8 - 分数单位网格 负边距重叠非对称构图出现 */ .layout-artsy { grid-template-columns: 2fr 1fr 1fr .5fr; margin-left: -5vw; }MOTION_INTENSITY 怎么决定动效给多少MOTION_INTENSITY 控制动画深度上限。1-3只有 hover 和按压状态页面基本是静态的。4-7滚动触发渐显、弹簧物理全部只驱动 transform 和 opacity。8-10滚动劫持、卡片堆叠上 GSAP ScrollTrigger。规则里有一条声称即兑现声明了 7 页面就必须真的动。做不出来就把旋钮降到 3交付干净的静态页。宁可静态不要半坏的动画。所有强度超过 3 的动效还必须为系统开启了减少动效prefers-reduced-motion的用户提供静态回退。VISUAL_DENSITY 怎么决定一屏放多少信息VISUAL_DENSITY 控制每视口的信息量。1-3画廊模式区块间距拉到 py-32 到 py-48一屏只留一个焦点。4-7标准 Web 应用间距信息和留白取平衡。8-10驾驶舱模式禁用卡片容器用 1px 线切分数据数字全部等宽字体。这个参数决定了同一套技能既能写花店官网也能写数据分析台密度档位一变整套间距系统跟着换。别造轮子需求匹配官方设计系统需求一旦被解读为某个成熟生态规则是安装官方包而不是手写 CSS 去模仿它。规则文件里有一条诚实条款用了某个设计系统就用完整禁止只引入它的 token 再把 90% 覆盖掉一个项目只准一个设计系统Fluent 和 Carbon 不许混。需求方向官方包解决什么Microsoft 系企业 SaaSfluentui/react-components官方 token可访问性已做Google 系产品material/webMaterial 3 主题化IBM 系数据分析carbon/react成熟的数据密集模式GitHub 系开发者工具primer/css开发者工具视觉惯例玻璃拟态、粗野主义、编辑感这类没有官方包的美学方向必须用原生 CSS 实现并在代码注释里写明这是近似实现而非官方规范。比如 Apple 的 Liquid Glass 并没有官方 Web 版任何 Web 实现都是 backdrop-filter 加叠层边框的近似规则要求明说。如何把 taste-skill 接入现有工作流它不是框架不打包组件不引入依赖。每个技能本质是一份 SKILL.md 规则文件接入方式二选一# 一条命令安装CLI 扫描仓库 skills/ 目录写入 agent 技能目录 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 按安装名装单个技能名字取自 SKILL 头部 name 字段 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend或者把 SKILL.md 直接贴进对话、拷进项目效果等价。图像优先的项目走另一条管线先用 imagegen-frontend-web 技能出视觉概念图再交给编码代理按图实现。改造项目用 redesign-skill流程是先审计再动手提取现有品牌色、字体、信息架构URL 和表单字段名不动避免破坏 SEO 和埋点然后按字体、间距、配色、动效、关键区块的优先级逐层改。核心技能规则在 skills/taste-skill/AI 为何倾向输出半成品、占位代码的实证研究笔记在 research/laziness/可以完整读一遍规则的来龙去脉。适用边界它不处理的场景规则文件把排除项写得同样明确仪表盘和管理后台去 Fluent、Carbon 这类官方库、数据表格TanStack Table、多步表单、代码编辑器、原生移动端 UI都不是它的业务。需求属于这些领域时正确动作是直说并推荐对应组件库而不是硬套营销页规则。还有一条边界是品味本身。它消掉的是 AI 的模板化默认值补不上缺失的产品叙事文案本身不通参数救不回来。另外 v2 规则目前是实验阶段仍在迭代需要长期稳定输出的团队可以固定使用 v1 技能design-taste-frontend-v1观察一段时间再切换。【免费下载链接】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），仅供参考