Taste-Skill：AI前端设计如何摆脱“AI味“？三根参数轴把审美拧成旋钮

Taste-SkillAI前端设计如何摆脱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前端设计的反平庸规则集也是目前少有的把设计工程化落成可执行文件的项目它先让 AI 读懂需求再拧动三根 1-10 的参数轴然后才允许动笔写代码交付前还要过一张质检清单。整套规则以可安装的 SKILL.md 形式组织在skills/目录下仓库里还附了真实生成的成品案例。git clone https://gitcode.com/GitHub_Trending/ta/taste-skill下面三张图都由仓库内的 taste-skill 生成原文件在examples/目录是一个花艺品牌站的上屏、全页与页尾正好用来对照后文的参数讨论。 AI 做的页面为什么都一个样AI味的根源不在代码能力而在模型有一组从不被你需求覆盖的默认值。大多数设计请求里模型的第一反应不是分析页面而是调用训练数据里出现频率最高的模板。模型自己会伸手拿的默认件taste-skill/SKILL.md里逐条拉黑了一批默认审美这份清单本身就回答了AI味是什么默认审美为什么一眼 AIAI 紫渐变加暗色网格底跨页面出现频率最高的背景套路深色底上的居中英雄区最保险的选择也是信息量最低的选择三张等宽功能卡片最省事的填一行方式到处叠通用玻璃拟态一个效果贴满所有表面Inter 字体加 slate-900 配色被过度使用的中性默认每个版块标题上方加全大写小标签节奏完全一样的模板感为什么先读房间必须排在代码前面taste-skill v2 的第一条规则不碰代码、不拧任何旋钮之前先给出一句话设计判读格式是我把它读成给某类受众的某类页面用某种调性语言倾向某套设计系统。这句话逼 AI 在动手前回答三件事这是什么页面、给谁看、什么调性。当这一步完成后面的所有网格、动效、间距决策都有了依据而不是从模板里直接抄。 写代码之前AI 怎么读懂你的需求需求分析拆成三步认页面类型、映射调性词、锁定受众三步的产物直接喂给下一章的参数轴。什么页面、给谁看类型与受众识别页面类型决定设计语言的第一反应受众决定克制的程度。同一句做个落地页四种答案完全不同页面类型AI 的第一反应常见例子SaaS 落地页先给价值主张转化路径不滚动就要可见企业软件、云服务设计师作品集视觉主导个性本身就是品牌创意工作室、个人品牌企业服务网站信任优先形象专业动效收敛B2B 解决方案、咨询服务编辑型内容阅读体验优先行宽行距信息层次到位博客、杂志、文档类型定了以后第二个问题是受众。规则里说得很直白是受众选审美不是模型选。看页面的人最先在意什么B2B 采购团队数据可信度、合规边界、企业级能力技术决策者架构、性能指标、接入成本设计敏感型消费者美学体验、情感连接、品牌叙事普通用户好不好用、找不找得到入口、价值主张清不清晰把简约高端翻译成数字调性词必须落成具体的参数读数不能只当样式标签用。当你随口说出一个词它会被这样读取你用的调性词参数读数成品长什么样创意变化度 9-10、动效 8-10实验性布局、交互元素、滚动叙事高端变化度 7-9、动效 6-8非对称构图、材质纹理、精细动效科技感密度 4-6、冷色板严格网格、数据可视化元素简约变化度 3-5、密度 2-3对称布局、充足留白、单一强调色需求含糊时只准问一个问题规则写得很硬只有当两种判读会真正分叉时才提一个澄清问题比如你更想靠近 Linear 式的克制还是 Awwwards 式的实验禁止一次抛一串问题能从上下文自信推断时直接宣布判读结论继续干活不打断。️ 框架核心三根参数轴怎么拧后面所有布局、动效、密度决策都受三根 1-10 的旋钮门控默认 8/6/4。这就是 Taste-Skill 做设计参数化的核心把主观判断变成三个可以对话式调整的值改口味不用改文件直接在对话里覆盖。DESIGN_VARIANCE布局允许偏离网格多少这根轴管布局的实验程度区间布局行为1-312 列网格、等分 fr 间距、居中对齐稳当4-7负边距重叠、4:3 与 16:9 混排、左对齐标题压居中内容8-10错落式布局、分数单位网格、20vw 量级的大空区同一屏代码层面的差别/* 变化度 3无聊但稳的 12 列 */ grid-template-columns: repeat(12, 1fr); gap: 1.5rem; /* 变化度 8分数单位加负边距布局开始歪 */ grid-template-columns: 2fr 1fr 1fr 0.5fr; gap: 0 3rem; margin-left: -5vw;另有一条硬规则变化度在 4-10 时768px 以下的小屏必须把非对称布局收回严格单列否则移动端直接判不合格。MOTION_INTENSITY页面允许动多少这根轴管动画的深度区间动效长什么样技术手段适合1-3只有悬停、按压反馈纯 CSS 过渡文档站、内部工具4-7滚动触发、级联入场、视差CSS 动画、Motion营销页、作品集8-10滚动劫持、物理模拟GSAP、Three.js创意展示、互动体验两条配套原则每个动画必须能用一句话说清沟通目的引导注意力、展示状态变化、增强空间感、制造情绪说不出就删当MOTION_INTENSITY大于 4页面必须真的在动写不出能跑的动效就降档交付干净的静态页禁止半成品动画。VISUAL_DENSITY一屏装多少信息这根轴管每屏的信息承载区间一句话形容落地手感1-3画廊一屏只给一个主角大留白版块间距 py-32 到 py-48元素极简4-7日常网页信息与可读性平衡标准间距节奏8-10驾驶舱数据密集、禁卡片壳紧凑间距、1px 分隔线、数字一律等宽字体 现成设计系统什么时候直接用什么时候自己写有官方包就别手搓 CSS没有官方系统的美学方向用原生实现并在注释里标明来源。官方包直接用别重造已经存在的轮子当你把需求读成某个成熟系统的场景就装官方实现且一个项目只允许一套系统禁止把 Fluent 和 Carbon 混在同一棵树里场景首选官方包安装命令Microsoft 生态、企业级应用Fluent UInpm install fluentui/react-componentsIBM 风格、数据分析界面Carbonnpm install carbon/react carbon/stylesGoogle 风格产品、Material 3 主题Material Webnpm install material/webGitHub 风格、开发者工具Primernpm install primer/css技能文件的附录里还列了更多Shopify 生态用 Polaris公共部门场景用 govuk-frontend 或 uswds各自都给了真实可用的安装命令让 AI锚在现实上而不是凭训练数据想象。没有官方系统的美学用原生 CSS 写并标注出处玻璃态、粗野主义、编辑感杂志、暗色科技这类方向没有唯一的官方包用原生 CSS 实现注释里诚实写明这是近似不是官方物料比如 Apple 的 Liquid Glass 只有平台原生实现Web 上的backdrop-filter方案只能标成近似实现/* 玻璃态注释注明这是 Web 近似不是官方包 */ .glass { backdrop-filter: blur(24px) saturate(180%); background: linear-gradient(135deg, rgb(255 255 255 / .3), rgb(255 255 255 / .08)); border: 1px solid rgb(255 255 255 / .32); }/* 粗野主义不引库原生 CSS 就是全部 */ .brutalist { font-family: monospace; border: 3px solid #000; box-shadow: 8px 8px 0 #000; } 交付前质检单从响应式到性能阈值这套规则在输出代码前跑一份预检清单任何一项打不了勾页面就不算完成。当你准备交付一个页面时让 agent 先过这张单子再谈发布。布局与交互状态不齐不准发货布局侧看四件事320px 到 1920px 全断点验证、信息优先级靠尺寸颜色间距传达、所有元素遵循同一套网格对齐、悬停/焦点/激活/禁用等交互状态齐全。清单里还有不少可机械执行的检查例如统计所有版块标题上方的全大写小标签数量超过版块数除以 3直接判负页面上出现两个意图相同的 CTA联系我们和聊聊同页并存同样判负。可访问性对比度、键盘、减动效替代要求底线文本对比度WCAG AA正文 4.5:1键盘可达Tab 能到所有交互元素焦点环可见屏幕阅读器语义化 HTML 加恰当的 ARIA 标签运动敏感prefers-reduced-motion 下给静态替代性能阈值与数据驱动的迭代阈值是硬线LCP 低于 1.5s、CLS 低于 0.1、INP 低于 200ms、TBT 低于 300ms。指标目标线怎么查CLS 累积布局偏移低于 0.1真实用户监控LCP 最大内容绘制低于 1.5sLighthouse 审计INP 交互到下一帧低于 200msChrome 性能面板TBT 总阻塞时间低于 300msWeb Vitals 数据规则本身也在按实测数据持续迭代仓库research/目录沉淀了研究笔记预检清单里的AI 味模式大多来自真实模型的落地页测试结果每发现一个新套路就往清单里补一条形成实测、沉淀、规则化的闭环。 三条落地工作流图像先行、重设计、组合起点不同用的技能就不同仓库把它们拆成了独立文件。图像先行先画图再写码skills/image-to-code-skill/的流程固定四步先用图像生成工具产出分区参考图某个区看不清就为它单独重画一张干净的不从大图上裁再从图里提取色彩、布局、材质与字号关系然后把视觉特征映射成 CSS 属性和组件结构最后按实现效果回头调参数。关键在顺序图是设计源代码只是翻译层禁止跳过图直接自由发挥。重设计先审计留品牌渐进改skills/redesign-skill/面向存量项目动作顺序是扫描代码库、诊断问题列全所有通用模式和缺失状态、再沿现有技术栈定向改进而不是推倒重写。品牌资产色板、字体、标志是起点材料不是可选输入页面 slug、主导航标签、表单字段名这类东西未经明确同意一律不动因为会破坏 SEO 与埋点改完用新旧对比验证效果。多技能组合什么项目配什么技能项目类型挑选的技能组合得到什么创业 MVP 验证taste-skill imagegen-frontend-web先把视觉概念定下来再交给编码 agent企业级应用taste-skill output-skill防半成品强制完整输出、不留占位注释存量创意作品集soft-skill redesign-skill内容保留表达提质电商落地页gpt-tasteskill image-to-code-skill图像先行转化与视觉吸引一起拉️ 技术默认值选框架与代码卫生技能文件里还有一套默认工程架构前提是技术栈从需求里读出来不从习惯里读。按需求选栈Next.js、状态分层、动效隔离// 栈由需求决定不由习惯决定 const framework briefHasSEO ? Next.js : React; const styling isQuickPrototype ? Tailwind : CSS Modules; const motionLib motionIntensity 7 ? GSAP Motion : Motion;在此之上是三条卫生习惯服务器组件优先需要交互的地方才挂use client状态分层本地 UI 用 useState全局状态才轮到 Zustand 或 Jotai所有动画逻辑隔离在独立的客户端叶子组件里鼠标位置、滚动进度这类连续值绝不允许进 useState。主题切换与设计一致性则统一走 CSS 变量这套设计令牌。从第一版就该做的性能细节这组细节关系到做完的页面不慢应在首版就落地图片走next/imageWebP、响应式尺寸、首屏优先加载路由级动态导入做代码分割压初始包体积字体自托管并配font-display: swap生产环境不直接引 Google Fonts 的 link 标签静态资源长期缓存API 响应按需缓存。️ 配置速查不同目标下的三参数组合不知道从哪下手时先按目标查一组初值再按反馈微调。按目标定初值建信任、激创意、推转化、简操作想达成什么变化度动效密度激发创意7-106-93-5提高转化5-74-75-7建立信任3-52-44-6简化操作3-42-36-8三套可直接套用的 YAML 配置# SaaS 落地页信任感优先动效为转化服务 DESIGN_VARIANCE: 7 MOTION_INTENSITY: 6 VISUAL_DENSITY: 4 stack: Tailwind shadcn/ui fonts: Geist Geist Mono palette: slate-950 / emerald-500# 设计师作品集高变化低密度个性即品牌 DESIGN_VARIANCE: 9 MOTION_INTENSITY: 8 VISUAL_DENSITY: 3 stack: 原生 CSS Motion fonts: Cabinet Grotesk JetBrains Mono palette: zinc-900 / rose-400# 企业服务网站官方系统加企业字体配对 DESIGN_VARIANCE: 4 MOTION_INTENSITY: 3 VISUAL_DENSITY: 5 stack: Carbon Design System fonts: IBM Plex Sans IBM Plex Mono palette: gray-900 / blue-600Taste-Skill 把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），仅供参考