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 前端设计工具产出的往往是深色背景、紫色渐变、三张等宽卡片、居中大标题。十个页面长得像同一个模板。问题不在代码能力而在模型不理解你的意图时会退回平均审美的默认值。Taste-Skill 的思路是设计参数化把品味变成一套 AI 能执行的规则让 Cursor、Codex、Claude Code 这类 Agent 停止生产模板页。 先问三个问题再写代码大多数 AI 工具收到需求后直接需求进、代码出跳过了最关键的设计推理。Taste-Skill 在动代码前插了一步设计判读模型先读取页面类型、你用的形容词、你给的参考、目标观众、已有品牌资产、隐性约束无障碍优先、受监管行业这几类信号再输出一行固定格式的设计判读例如Reading this as: 面向技术买家的 B2B SaaS 落地页Linear 式极简语言倾向 Tailwind Geist 克制动效。只有当判读真正分叉时才追问而且只问一个问题绝不连珠炮。翻译成大白话就是写码前先做三连问这是什么页面页面类型决定设计语言SaaS 落地页讲价值主张与转化路径作品集讲视觉个性企业站讲信任感博客和编辑型内容讲阅读体验与信息层次。要什么气质你用的描述词会被翻译成具体参数而不是空泛的样式标签简约对应居中布局、充足留白、单色调高端对应非对称构图、精细动效、材质纹理创意则把布局实验性和交互元素拉到最满。给谁看观众决定视觉策略而不是 AI 的个人口味B2B 采购团队看数据可信度与合规性设计敏感型消费者看品牌故事与情感连接技术决策者看架构与性能普通用户看直观导航和清晰的价值主张。这三连问看似简单却是AI 听懂了你和AI 自说自话的分界线。 三个旋钮调感觉判读明确后第二步是调感觉。可以把它想成做菜同样的食材内容和组件放多少盐、怎么摆盘味道完全不同。Taste-Skill 把品味抽象成三个旋钮都是 1 到 10之后所有布局、动效、密度决策都被它们卡控。文件里带默认值8/6/4调参直接在对话里说不用改文件。旋钮一DESIGN_VARIANCE摆盘自由度。管布局敢不敢偏离居中。低档1-3是经典 12 列网格、居中对齐、间距等分中档4-7开始用负边距重叠、混合宽高比、非对称对齐高档8-10出现错落式布局、分数单位网格、大尺度留白。三个参数怎么选的实战口径企业页、文档站压在 3-5作品集和创意站从 7-10 起步。旋钮二MOTION_INTENSITY火候。管页面动不动。低档只有 hover 和按压态CSS 过渡就够中档4-7是滚动进场、视差交给 Motion 库高档8-10上滚动劫持、物理模拟、GSAP 或 Three.js。硬规则是每个动画必须能用一句话说清它在传达什么引导注意力、展示状态变化、推进叙事说不清就别做。而且动效要说真话旋钮设到 7页面就必须真动做不出来就降到 3交一个干净的静态页不要半成品。旋钮三VISUAL_DENSITY盘子满不满。管一屏塞多少信息。低档1-3像美术馆大留白、只强调一个焦点中档4-7是常规网页间距信息与可读性平衡高档8-10是驾驶舱模式数据密集数字一律等宽字体。三个参数怎么选的高频组合场景VARIANCEMOTIONDENSITYSaaS 落地页764设计师作品集873高端消费品牌763公共服务 / 合规站点325旋钮之上还压着一份AI 破绽清单AI 紫渐变、Inter slate-900、三张等宽卡片、默认滥用衬线体、高端品牌的米色 黄铜配色、破折号装饰默认全部禁用除非需求明确点名。这是反模板脸最直接的体现。仓库里也附带真实产出比如这个用默认技能做出的花艺品牌 Floria 用起来的三种方式仓库里十几个技能各管一件事安装方式相同按场景挑有参考图或者想先看效果imagegen-frontend-web、imagegen-frontend-mobile、brandkit 三个技能只出参考图落地页 moodboard、移动端流程、品牌板不写一行代码。你可以在带图像能力的 Agent 里先出图再把图交给编码 Agent也可以直接用 image-to-code-skill 跑生图 → 析图 → 写码完整链路提示词里交代一句即可follow the skill: generate images, then analyze, then code。有现成页面要翻新redesign-skill 的原则是先审计再动手先提取现有品牌令牌、信息架构和 SEO 基线SEO 迁移是重设计的头号风险再按优先级逐项改进字体 → 间距 → 色彩 → 动效 → hero 重构。同时有几样东西绝不静默改动URL 结构、导航文案、表单字段名、法律文案。保留品牌模式下现有旋钮值原样保留、动效 1全面翻新则变化度和动效各 2、密度不变。全新需求用默认的 taste-skill读简报 → 定三个旋钮 → 选地基。需求指向成熟设计系统时别重复造轮子直接装官方包Microsoft 生态、企业应用npm install fluentui/react-componentsGoogle / Material 风格npm install material/webIBM、数据分析界面npm install carbon/react carbon/stylesGitHub 风开发者工具npm install primer/css规矩很硬一个项目只用一个设计系统不许手写 CSS 复刻官方体系。需求是美学方向玻璃态、Bento、粗野主义、暗色科技而没有官方包时就用原生 CSS 做并在注释里诚实标注近似实现Apple Liquid Glass 就是按近似实现处理的。全新构建的默认技术栈也被写死React/Next.js 且服务端组件优先动效逻辑隔离进带 use client 的叶子组件Tailwind v4 Motion原 Framer Motion图标只用 Phosphor/Radix/Tabler不手绘 SVG字体自托管或走 next/font配 font-display: swap本地状态用 useState但指针、滚动进度这类连续值必须走 Motion 的 motion value否则移动端渲染树会顶不住。如果 Agent 爱留 TODO 交半成品加 output-skill想要更严的布局与动效约束用 gpt-taste视觉方向已定时直接加 soft-skill、minimalist-skill 或 brutalist-skill。安装一行命令完整规则集见 skills/taste-skill/SKILL.mdv1 到 v2 的变更见 CHANGELOG.mdgit clone https://gitcode.com/GitHub_Trending/ta/taste-skill然后把对应 SKILL.md 拷进项目或直接粘进对话即可。✅ 交付前自检清单最后一关是交付前自检清单一条一句话任何一条不过关就算没做完。完整清单有 60 多项最容易踩的 8 条如下Hero 是否装进首屏标题不超 2 行、副文案不超 20 词、CTA 不滚动就可见导航在桌面端保持单行高度不超 80px按钮、表单、占位文字对比度都过 WCAG AA4.5:1所有交互元素可键盘触达hover / focus / active / disabled 状态齐全动效有 prefers-reduced-motion 的静态回退移动端断点逐节写明用 min-h-[100dvh] 而不是 h-screenLCP 2.5s、INP 200ms、CLS 0.1过一遍 Lighthouse全页零破折号—这是模型最常见的AI 痕迹硬性禁止这份交付前自检清单的意义不在条目多而在把我觉得好看变成逐条可验证。把品味变成流程Taste-Skill 的用法一句话带走读简报、定旋钮、选系统、交付前自检好不好看就从玄学变成了流程。项目自己也按同一逻辑迭代v2 基于真实翻车案例整体重写区块库在持续扩充research/ 目录里还放着模型为什么会偷懒的专项研究。【免费下载链接】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-skill把帮我做个落地页丢给 AI 前端设计工具产出的往往是深色背景、紫色渐变、三张等宽卡片、居中大标题。十个页面长得像同一个模板。问题不在代码能力而在模型不理解你的意图时会退回平均审美的默认值。Taste-Skill 的思路是设计参数化把品味变成一套 AI 能执行的规则让 Cursor、Codex、Claude Code 这类 Agent 停止生产模板页。 先问三个问题再写代码大多数 AI 工具收到需求后直接需求进、代码出跳过了最关键的设计推理。Taste-Skill 在动代码前插了一步设计判读模型先读取页面类型、你用的形容词、你给的参考、目标观众、已有品牌资产、隐性约束无障碍优先、受监管行业这几类信号再输出一行固定格式的设计判读例如Reading this as: 面向技术买家的 B2B SaaS 落地页Linear 式极简语言倾向 Tailwind Geist 克制动效。只有当判读真正分叉时才追问而且只问一个问题绝不连珠炮。翻译成大白话就是写码前先做三连问这是什么页面页面类型决定设计语言SaaS 落地页讲价值主张与转化路径作品集讲视觉个性企业站讲信任感博客和编辑型内容讲阅读体验与信息层次。要什么气质你用的描述词会被翻译成具体参数而不是空泛的样式标签简约对应居中布局、充足留白、单色调高端对应非对称构图、精细动效、材质纹理创意则把布局实验性和交互元素拉到最满。给谁看观众决定视觉策略而不是 AI 的个人口味B2B 采购团队看数据可信度与合规性设计敏感型消费者看品牌故事与情感连接技术决策者看架构与性能普通用户看直观导航和清晰的价值主张。这三连问看似简单却是AI 听懂了你和AI 自说自话的分界线。 三个旋钮调感觉判读明确后第二步是调感觉。可以把它想成做菜同样的食材内容和组件放多少盐、怎么摆盘味道完全不同。Taste-Skill 把品味抽象成三个旋钮都是 1 到 10之后所有布局、动效、密度决策都被它们卡控。文件里带默认值8/6/4调参直接在对话里说不用改文件。旋钮一DESIGN_VARIANCE摆盘自由度。管布局敢不敢偏离居中。低档1-3是经典 12 列网格、居中对齐、间距等分中档4-7开始用负边距重叠、混合宽高比、非对称对齐高档8-10出现错落式布局、分数单位网格、大尺度留白。三个参数怎么选的实战口径企业页、文档站压在 3-5作品集和创意站从 7-10 起步。旋钮二MOTION_INTENSITY火候。管页面动不动。低档只有 hover 和按压态CSS 过渡就够中档4-7是滚动进场、视差交给 Motion 库高档8-10上滚动劫持、物理模拟、GSAP 或 Three.js。硬规则是每个动画必须能用一句话说清它在传达什么引导注意力、展示状态变化、推进叙事说不清就别做。而且动效要说真话旋钮设到 7页面就必须真动做不出来就降到 3交一个干净的静态页不要半成品。旋钮三VISUAL_DENSITY盘子满不满。管一屏塞多少信息。低档1-3像美术馆大留白、只强调一个焦点中档4-7是常规网页间距信息与可读性平衡高档8-10是驾驶舱模式数据密集数字一律等宽字体。三个参数怎么选的高频组合场景VARIANCEMOTIONDENSITYSaaS 落地页764设计师作品集873高端消费品牌763公共服务 / 合规站点325旋钮之上还压着一份AI 破绽清单AI 紫渐变、Inter slate-900、三张等宽卡片、默认滥用衬线体、高端品牌的米色 黄铜配色、破折号装饰默认全部禁用除非需求明确点名。这是反模板脸最直接的体现。仓库里也附带真实产出比如这个用默认技能做出的花艺品牌 Floria 用起来的三种方式仓库里十几个技能各管一件事安装方式相同按场景挑有参考图或者想先看效果imagegen-frontend-web、imagegen-frontend-mobile、brandkit 三个技能只出参考图落地页 moodboard、移动端流程、品牌板不写一行代码。你可以在带图像能力的 Agent 里先出图再把图交给编码 Agent也可以直接用 image-to-code-skill 跑生图 → 析图 → 写码完整链路提示词里交代一句即可follow the skill: generate images, then analyze, then code。有现成页面要翻新redesign-skill 的原则是先审计再动手先提取现有品牌令牌、信息架构和 SEO 基线SEO 迁移是重设计的头号风险再按优先级逐项改进字体 → 间距 → 色彩 → 动效 → hero 重构。同时有几样东西绝不静默改动URL 结构、导航文案、表单字段名、法律文案。保留品牌模式下现有旋钮值原样保留、动效 1全面翻新则变化度和动效各 2、密度不变。全新需求用默认的 taste-skill读简报 → 定三个旋钮 → 选地基。需求指向成熟设计系统时别重复造轮子直接装官方包Microsoft 生态、企业应用npm install fluentui/react-componentsGoogle / Material 风格npm install material/webIBM、数据分析界面npm install carbon/react carbon/stylesGitHub 风开发者工具npm install primer/css规矩很硬一个项目只用一个设计系统不许手写 CSS 复刻官方体系。需求是美学方向玻璃态、Bento、粗野主义、暗色科技而没有官方包时就用原生 CSS 做并在注释里诚实标注近似实现Apple Liquid Glass 就是按近似实现处理的。全新构建的默认技术栈也被写死React/Next.js 且服务端组件优先动效逻辑隔离进带 use client 的叶子组件Tailwind v4 Motion原 Framer Motion图标只用 Phosphor/Radix/Tabler不手绘 SVG字体自托管或走 next/font配 font-display: swap本地状态用 useState但指针、滚动进度这类连续值必须走 Motion 的 motion value否则移动端渲染树会顶不住。如果 Agent 爱留 TODO 交半成品加 output-skill想要更严的布局与动效约束用 gpt-taste视觉方向已定时直接加 soft-skill、minimalist-skill 或 brutalist-skill。安装一行命令完整规则集见 skills/taste-skill/SKILL.mdv1 到 v2 的变更见 CHANGELOG.mdgit clone https://gitcode.com/GitHub_Trending/ta/taste-skill然后把对应 SKILL.md 拷进项目或直接粘进对话即可。✅ 交付前自检清单最后一关是交付前自检清单一条一句话任何一条不过关就算没做完。完整清单有 60 多项最容易踩的 8 条如下Hero 是否装进首屏标题不超 2 行、副文案不超 20 词、CTA 不滚动就可见导航在桌面端保持单行高度不超 80px按钮、表单、占位文字对比度都过 WCAG AA4.5:1所有交互元素可键盘触达hover / focus / active / disabled 状态齐全动效有 prefers-reduced-motion 的静态回退移动端断点逐节写明用 min-h-[100dvh] 而不是 h-screenLCP 2.5s、INP 200ms、CLS 0.1过一遍 Lighthouse全页零破折号—这是模型最常见的AI 痕迹硬性禁止这份交付前自检清单的意义不在条目多而在把我觉得好看变成逐条可验证。把品味变成流程Taste-Skill 的用法一句话带走读简报、定旋钮、选系统、交付前自检好不好看就从玄学变成了流程。项目自己也按同一逻辑迭代v2 基于真实翻车案例整体重写区块库在持续扩充research/ 目录里还放着模型为什么会偷懒的专项研究。【免费下载链接】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），仅供参考