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 Skills,作用是让 AI 编码代理在写前端代码时有品味:它强制模型先读懂需求简报、显式设定三项设计参数、调用官方设计系统,并通过一份预检清单后才能交付,使 AI 生成的落地页与作品集不再千篇一律。本文从一个真实任务出发,讲清这套机制为什么存在、三步装好之后每一步该做什么,以及它明确不管的边界在哪里。为什么 AI 生成的主页总是一个模子:问题不在 CSS这一节回答第一个问题:为什么模型的代码能力明明不弱,产出的页面却总是模板味。Taste-Skill 的仓库维护者把根因定位得很直接:多数糟糕的 LLM 设计输出,不是因为模型不会写样式,而是因为模型在读懂房间之前就跳到了默认审美。它会条件反射地给出同一套起手式:AI 紫渐变、深色网格上的居中 Hero、三张等宽特性卡片、玻璃拟态糊在一切上面、Inter 配 slate-900 的默认字体组合。这套运作方式很像航空业的预飞检查清单:先读懂航班任务(简报),再确认仪表读数(三项参数),选用标准件(官方设计系统),最后逐项核对预检清单。任何一格无法诚实打勾,这趟就不飞。仓库里的规则就是照着这个纪律写成的。以下是生产测试中反复出现的AI 特征(AI Tells)与对应反制规则:模板味症状具体表现Taste-Skill 的反制紫色渐变AI 紫、霓虹外发光按钮中性底色,全页只允许一个高对比强调色三等卡片一行三张完全相同的特性卡禁用,改双列错位、bento 网格或滚动固定结构衬线字体滥用只要有创意就上 Fraunces 等花体衬线默认无衬线,衬线必须有品牌层面的理由破折号堆砌标题、正文、引文里到处是—零容忍,改用句号、逗号或重构句子假产品截图用 div 矩形拼出伪终端、伪仪表盘用真实截图、生成图,或干脆不放滚动提示页面底部Scroll ↓字样禁用,用户不需要被提醒怎么滚动v2 版本之所以是一次大改写,就是因为这些特征在多次真实构建中跨项目复现:规则从建议升级成了硬规则加强制清单。快速上手:三步装好 Taste-Skill 并跑通这一节解决最短路径的安装与验证问题,不需要任何框架改动。克隆仓库,浏览skills/目录:每个子目录是一个技能,其中的SKILL.md就是代理自动加载的指令文件。选择安装范围:全量安装,或用--skill参数按安装名只装一个。验证:在对话里丢给它一个简报(例如做一个独立花艺工作室的官网),看它是否先吐出一行设计判断,而不是直接开始写代码。# 克隆仓库,检查 skills/ 目录 git clone 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直接复制进项目,或粘贴进对话即可。技能分两类,实现类输出代码,图像生成类只输出参考图。常用选择如下:你的任务安装名通用默认(v2 实验版)design-taste-frontendGPT/Codex 下更严格的布局与动效gpt-taste先出参考图再实现image-to-code改造已有项目redesign-existing-projects输出总是被截断、留占位注释full-output-enforcement只要参考图(网页 / 移动端 / 品牌板)imagegen-frontend-web/-mobile/brandkit写代码前的第一步:读懂简报并输出一行设计判断这一节解决整条链路最上游的问题:如何把一句口头需求拆成可执行的设计方向。技能的第一节(Brief Inference)要求代理在碰任何代码或参数之前,先扫描六类信号:页面类型:落地页(SaaS、消费、活动)、作品集、改造还是编辑型内容。用户用过的风格词:minimalistLinear 风brutalistpremium……参考信号:贴的截图、链的网站、点名的竞品。受众:B2B 采购决策人、审美敏感的消费者、扫作品集的招聘方。审美由受众决定,不由模型的偏好决定。已有品牌资产:logo、色彩、字体、摄影。改造类任务里这些是起点,不是可选输入。隐性约束:无障碍优先、公共部门、受监管行业。这类约束的优先级高于一切审美偏好。读完后,代理必须先用一行话宣布判断,格式是Reading this as: 为某受众做的某类页面,用某种语言,倾向于某个设计系统。例如:为技术买家做的 B2B SaaS 落地页,Linear 式极简语言,倾向 Tailwind Geist 克制动效。如果简报真的含糊到两种读法会走向完全不同的方向,只允许追问一个问题,不许连环追问;能自信推断时就直接宣布判断并往下做。三个 1 到 10 的旋钮:布局、动效、密度怎么调这一节解决把主观审美偏好转化成三个可调节参数的问题。读完简报后设定三个参数,后续所有布局、动效、密度决策都以它们为闸门:# taste-skill 默认基线(按简报推断调整,不要照抄) DESIGN_VARIANCE: 8 # 1 完美对称,10 艺术化非对称 MOTION_INTENSITY: 6 # 1 纯静态,10 电影级 / 物理模拟 VISUAL_DENSITY: 4 # 1 画廊留白,10 数据驾驶舱按信号推断取值,或直接套用途预设:任务VARIANCEMOTIONDENSITY主流 SaaS 落地页764代理 / 创意工作室983设计师作品集873开发者作品集654编辑型 / 博客643公共部门 / 信任优先325改造(保留品牌)匹配现状1匹配现状三档行为也各不相同:VARIANCE 1-3 是对称 12 列网格,4-7 引入负边距重叠与混合宽高比,8-10 才是错落式与分数网格;MOTION 1-3 只有悬停态,4-7 是滚动显现与视差,8-10 才动用 GSAP 级滚动叙事;DENSITY 8 以上要求数字全部等宽字体、去掉卡片容器。两条纪律值得记住:非对称布局在小于 768px 时必须塌缩为单列;动效已声明,动效必须出现,MOTION 高于 4 的页面如果动不起来,就把旋钮降到 3,交付干净的静态页,而不是半成品动画。设计系统选型:优先官方包,近似就标注近似这一节解决在什么地基上盖楼的问题。Taste-Skill 不是要替代你的设计系统,而是与官方设计系统建立一种诚实的映射关系:能用官方包的绝不手写仿制。简报读起来像直接用微软系 / 企业 SaaSfluentui/react-componentsGoogle / Material 风格material/web Material 3 令牌IBM 风数据分析carbon/reactcarbon/stylesGitHub 风开发者工具primer/css英 / 美政府公共服务govuk-frontend/uswds自持组件的现代 SaaSshadcn/ui(禁止以默认态交付)Tailwind 营销站Tailwind v4配套铁律:一个项目只允许一个设计系统,不混用;不要手搓官方系统的 CSS;不要导入令牌后覆盖掉九成。反过来,玻璃拟态、bento 网格、粗野主义、编辑风这类审美方向没有官方包,就用原生 CSS 实现,并在注释里诚实写明这是借鉴,不是官方素材。最典型的是 Apple Liquid Glass:Apple 只把它文档化在自家平台,不存在公开的 web 包,任何 web 实现都是backdrop-filter加层叠边界的近似,必须在代码里标注为近似,而不是冒充官方。预检:交付前必须诚实勾选的清单这一节解决最终质量由谁把关。Taste-Skill 把质量底线写成代理自己必须跑的清单(§14 Final Pre-Flight Check),任何一格不能诚实打勾,页面就不算完成。上图就是 taste-skill 产物:深色底、左侧排版加真实花艺摄影,没有 AI 紫渐变,没有三等卡片,Logo 墙、信任条各归其位。从完整清单里挑出最常翻车的八项:全页零破折号(—),引文、按钮、alt 文本都不许有。色彩锁:一个强调色贯穿全页,第七节不许突然换色。形状锁:一套圆角体系,圆按钮不许出现在方卡片页面里。Hero 必须装进首屏:标题两行以内,副文案 20 词以内,CTA 不滚动就可见。按钮对比度过 WCAG AA(4.5:1),白底白字直接判死;同一意图全页只留一个 CTA 文案。小字号眉标每三个 section 最多出现一次。真实图像优先:生成图、真实照片,禁止 div 假截图,纯文字页不算极简。MOTION 高于 3 的一切动效必须响应prefers-reduced-motion。完整清单有六十余项,覆盖内容自审、深色模式双模验证、移动端塌缩声明、动效组件清理函数,见 skills/taste-skill/SKILL.md 的 §14。边界与取舍:哪些页面不该用它这一节划清边界:什么任务该交给它,什么任务该明确放弃,以及 v1 与 v2 之间怎么取舍。taste-skill 在 §13 里自己声明了不管什么,并要求代理遇到这些简报时明说这不是我的活:超出范围的场景应该用什么数据仪表盘 / 管理后台Fluent、Carbon、Atlassian、Polaris 等官方设计系统重型数据表格TanStack Table / AG Grid代码编辑器Monaco / CodeMirror 官方主题原生移动端Apple HIG / Material 规范实时协作 UI(光标、冲突合并)对应领域方案,问题类型不同三条实操取舍,提前知道能少走弯路:默认装到的是 v2(实验版),它仍在迭代;如果工作流依赖 v1 的精确行为,显式安装design-taste-frontend-v1钉住旧版,完整差异见 CHANGELOG.md。图像生成技能只出图不出码,与image-to-code的区别在于:后者把生成图、分析、实现写成一条强制流水线,前者只是参考板。技能本身也会偷懒吗:输出被截断、留占位注释是模型的行为倾向,仓库内置了 research/laziness/ 的专项研究,讲清截断的成因与对策,配合full-output-enforcement使用。Taste-Skill 真正的贡献不在任何单条规则。破折号禁令、三等卡片禁令、Hero 行数上限,单独看都是小决定;不同之处在于它们被写成代理必须自己执行的清单,而清单上每一格都要求诚实打勾。它不仅解决AI 第一次生成的页面长得像 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 是一套可移植的 Agent Skills,作用是让 AI 编码代理在写前端代码时有品味:它强制模型先读懂需求简报、显式设定三项设计参数、调用官方设计系统,并通过一份预检清单后才能交付,使 AI 生成的落地页与作品集不再千篇一律。本文从一个真实任务出发,讲清这套机制为什么存在、三步装好之后每一步该做什么,以及它明确不管的边界在哪里。为什么 AI 生成的主页总是一个模子:问题不在 CSS这一节回答第一个问题:为什么模型的代码能力明明不弱,产出的页面却总是模板味。Taste-Skill 的仓库维护者把根因定位得很直接:多数糟糕的 LLM 设计输出,不是因为模型不会写样式,而是因为模型在读懂房间之前就跳到了默认审美。它会条件反射地给出同一套起手式:AI 紫渐变、深色网格上的居中 Hero、三张等宽特性卡片、玻璃拟态糊在一切上面、Inter 配 slate-900 的默认字体组合。这套运作方式很像航空业的预飞检查清单:先读懂航班任务(简报),再确认仪表读数(三项参数),选用标准件(官方设计系统),最后逐项核对预检清单。任何一格无法诚实打勾,这趟就不飞。仓库里的规则就是照着这个纪律写成的。以下是生产测试中反复出现的AI 特征(AI Tells)与对应反制规则:模板味症状具体表现Taste-Skill 的反制紫色渐变AI 紫、霓虹外发光按钮中性底色,全页只允许一个高对比强调色三等卡片一行三张完全相同的特性卡禁用,改双列错位、bento 网格或滚动固定结构衬线字体滥用只要有创意就上 Fraunces 等花体衬线默认无衬线,衬线必须有品牌层面的理由破折号堆砌标题、正文、引文里到处是—零容忍,改用句号、逗号或重构句子假产品截图用 div 矩形拼出伪终端、伪仪表盘用真实截图、生成图,或干脆不放滚动提示页面底部Scroll ↓字样禁用,用户不需要被提醒怎么滚动v2 版本之所以是一次大改写,就是因为这些特征在多次真实构建中跨项目复现:规则从建议升级成了硬规则加强制清单。快速上手:三步装好 Taste-Skill 并跑通这一节解决最短路径的安装与验证问题,不需要任何框架改动。克隆仓库,浏览skills/目录:每个子目录是一个技能,其中的SKILL.md就是代理自动加载的指令文件。选择安装范围:全量安装,或用--skill参数按安装名只装一个。验证:在对话里丢给它一个简报(例如做一个独立花艺工作室的官网),看它是否先吐出一行设计判断,而不是直接开始写代码。# 克隆仓库,检查 skills/ 目录 git clone 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直接复制进项目,或粘贴进对话即可。技能分两类,实现类输出代码,图像生成类只输出参考图。常用选择如下:你的任务安装名通用默认(v2 实验版)design-taste-frontendGPT/Codex 下更严格的布局与动效gpt-taste先出参考图再实现image-to-code改造已有项目redesign-existing-projects输出总是被截断、留占位注释full-output-enforcement只要参考图(网页 / 移动端 / 品牌板)imagegen-frontend-web/-mobile/brandkit写代码前的第一步:读懂简报并输出一行设计判断这一节解决整条链路最上游的问题:如何把一句口头需求拆成可执行的设计方向。技能的第一节(Brief Inference)要求代理在碰任何代码或参数之前,先扫描六类信号:页面类型:落地页(SaaS、消费、活动)、作品集、改造还是编辑型内容。用户用过的风格词:minimalistLinear 风brutalistpremium……参考信号:贴的截图、链的网站、点名的竞品。受众:B2B 采购决策人、审美敏感的消费者、扫作品集的招聘方。审美由受众决定,不由模型的偏好决定。已有品牌资产:logo、色彩、字体、摄影。改造类任务里这些是起点,不是可选输入。隐性约束:无障碍优先、公共部门、受监管行业。这类约束的优先级高于一切审美偏好。读完后,代理必须先用一行话宣布判断,格式是Reading this as: 为某受众做的某类页面,用某种语言,倾向于某个设计系统。例如:为技术买家做的 B2B SaaS 落地页,Linear 式极简语言,倾向 Tailwind Geist 克制动效。如果简报真的含糊到两种读法会走向完全不同的方向,只允许追问一个问题,不许连环追问;能自信推断时就直接宣布判断并往下做。三个 1 到 10 的旋钮:布局、动效、密度怎么调这一节解决把主观审美偏好转化成三个可调节参数的问题。读完简报后设定三个参数,后续所有布局、动效、密度决策都以它们为闸门:# taste-skill 默认基线(按简报推断调整,不要照抄) DESIGN_VARIANCE: 8 # 1 完美对称,10 艺术化非对称 MOTION_INTENSITY: 6 # 1 纯静态,10 电影级 / 物理模拟 VISUAL_DENSITY: 4 # 1 画廊留白,10 数据驾驶舱按信号推断取值,或直接套用途预设:任务VARIANCEMOTIONDENSITY主流 SaaS 落地页764代理 / 创意工作室983设计师作品集873开发者作品集654编辑型 / 博客643公共部门 / 信任优先325改造(保留品牌)匹配现状1匹配现状三档行为也各不相同:VARIANCE 1-3 是对称 12 列网格,4-7 引入负边距重叠与混合宽高比,8-10 才是错落式与分数网格;MOTION 1-3 只有悬停态,4-7 是滚动显现与视差,8-10 才动用 GSAP 级滚动叙事;DENSITY 8 以上要求数字全部等宽字体、去掉卡片容器。两条纪律值得记住:非对称布局在小于 768px 时必须塌缩为单列;动效已声明,动效必须出现,MOTION 高于 4 的页面如果动不起来,就把旋钮降到 3,交付干净的静态页,而不是半成品动画。设计系统选型:优先官方包,近似就标注近似这一节解决在什么地基上盖楼的问题。Taste-Skill 不是要替代你的设计系统,而是与官方设计系统建立一种诚实的映射关系:能用官方包的绝不手写仿制。简报读起来像直接用微软系 / 企业 SaaSfluentui/react-componentsGoogle / Material 风格material/web Material 3 令牌IBM 风数据分析carbon/reactcarbon/stylesGitHub 风开发者工具primer/css英 / 美政府公共服务govuk-frontend/uswds自持组件的现代 SaaSshadcn/ui(禁止以默认态交付)Tailwind 营销站Tailwind v4配套铁律:一个项目只允许一个设计系统,不混用;不要手搓官方系统的 CSS;不要导入令牌后覆盖掉九成。反过来,玻璃拟态、bento 网格、粗野主义、编辑风这类审美方向没有官方包,就用原生 CSS 实现,并在注释里诚实写明这是借鉴,不是官方素材。最典型的是 Apple Liquid Glass:Apple 只把它文档化在自家平台,不存在公开的 web 包,任何 web 实现都是backdrop-filter加层叠边界的近似,必须在代码里标注为近似,而不是冒充官方。预检:交付前必须诚实勾选的清单这一节解决最终质量由谁把关。Taste-Skill 把质量底线写成代理自己必须跑的清单(§14 Final Pre-Flight Check),任何一格不能诚实打勾,页面就不算完成。上图就是 taste-skill 产物:深色底、左侧排版加真实花艺摄影,没有 AI 紫渐变,没有三等卡片,Logo 墙、信任条各归其位。从完整清单里挑出最常翻车的八项:全页零破折号(—),引文、按钮、alt 文本都不许有。色彩锁:一个强调色贯穿全页,第七节不许突然换色。形状锁:一套圆角体系,圆按钮不许出现在方卡片页面里。Hero 必须装进首屏:标题两行以内,副文案 20 词以内,CTA 不滚动就可见。按钮对比度过 WCAG AA(4.5:1),白底白字直接判死;同一意图全页只留一个 CTA 文案。小字号眉标每三个 section 最多出现一次。真实图像优先:生成图、真实照片,禁止 div 假截图,纯文字页不算极简。MOTION 高于 3 的一切动效必须响应prefers-reduced-motion。完整清单有六十余项,覆盖内容自审、深色模式双模验证、移动端塌缩声明、动效组件清理函数,见 skills/taste-skill/SKILL.md 的 §14。边界与取舍:哪些页面不该用它这一节划清边界:什么任务该交给它,什么任务该明确放弃,以及 v1 与 v2 之间怎么取舍。taste-skill 在 §13 里自己声明了不管什么,并要求代理遇到这些简报时明说这不是我的活:超出范围的场景应该用什么数据仪表盘 / 管理后台Fluent、Carbon、Atlassian、Polaris 等官方设计系统重型数据表格TanStack Table / AG Grid代码编辑器Monaco / CodeMirror 官方主题原生移动端Apple HIG / Material 规范实时协作 UI(光标、冲突合并)对应领域方案,问题类型不同三条实操取舍,提前知道能少走弯路:默认装到的是 v2(实验版),它仍在迭代;如果工作流依赖 v1 的精确行为,显式安装design-taste-frontend-v1钉住旧版,完整差异见 CHANGELOG.md。图像生成技能只出图不出码,与image-to-code的区别在于:后者把生成图、分析、实现写成一条强制流水线,前者只是参考板。技能本身也会偷懒吗:输出被截断、留占位注释是模型的行为倾向,仓库内置了 research/laziness/ 的专项研究,讲清截断的成因与对策,配合full-output-enforcement使用。Taste-Skill 真正的贡献不在任何单条规则。破折号禁令、三等卡片禁令、Hero 行数上限,单独看都是小决定;不同之处在于它们被写成代理必须自己执行的清单,而清单上每一格都要求诚实打勾。它不仅解决AI 第一次生成的页面长得像 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），仅供参考