告别模板脸：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 前端生成注入设计判断力的技能包用来约束 AI 别再生成模板化的页面先推断页面气质再拨动三个设计参数最后按规则避开那些一眼假的AI 味写法。为什么 AI 做的前端界面总是一样你大概见过太多这样的页面内容通篇居中、什么都往卡片里塞、配色不是紫就是蓝、按钮还带一圈渐变光晕。这不是哪个模型手气差而是训练语料里这类安全写法占了多数模型自然朝平均脸靠拢。taste-skill 的思路不是再训一个模型而是把设计师做决策的习惯写成规则让 AI 照着执行动笔之前先读懂需求——页面是什么类型、给谁看、想要什么气质、手上有什么品牌资产、有没有合规约束把设计决策压缩成三个可拨动的参数而不是让模型凭感觉发挥内置一套反平庸规则明令限制居中布局、卡片滥用和俗套配色。一句话总结它把品味从玄学变成了参数。三步装好 taste-skill # 1. 克隆仓库 git clone https://gitcode.com/GitHub_Trending/ta/taste-skill # 2. 进入目录把技能装进你的 AI 助手 npx skills add ./taste-skill也可以只装某一个模块npx skills add ./taste-skill --skill design-taste-frontend装完后技能文件会落在你项目的 skills/ 目录下每个模块一个 SKILL.md比如 skills/taste-skill/SKILL.md。想让 AI 按哪种气质干活直接指定对应技能即可。项目 README 里有各模块的完整说明CHANGELOG 可以查到参数和行为随版本的演进。三种参数的调法DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY这是 taste-skill 里最值得花时间的部分。三个参数都是 1 到 10 的刻度写进需求描述就行DIALS DESIGN_VARIANCE: 7 MOTION_INTENSITY: 4 VISUAL_DENSITY: 3DESIGN_VARIANCE 管布局敢不敢歪。1–3 分是规整网格、均匀间距的老实排法4–7 分开始出现非对称留白、宽窄不一的栏位、错落的模块8–10 分则是接近海报级的编排大留白、打破网格。MOTION_INTENSITY 管动效的份量。1–3 分基本只有悬停反馈没有自动动画4–7 分是 0.3 秒上下的缓动过渡、列表级联延迟8–10 分才有滚动触发、视差这类编排级效果。类比一下这个参数相当于给动效配音量旋钮大多数页面停在 4–7 就足够了。VISUAL_DENSITY 管信息排得多满。1–3 分是画廊式的大留白4–7 分是标准网页的疏密平衡8–10 分适合数据驾驶舱紧凑、小间距、一屏塞下更多信息。参数不是魔法值组合方式跟着项目性质走。几个常见起点SaaS 数据后台DESIGN_VARIANCE: 3 / MOTION_INTENSITY: 2 / VISUAL_DENSITY: 8品牌官网DESIGN_VARIANCE: 8 / MOTION_INTENSITY: 6 / VISUAL_DENSITY: 3个人作品集DESIGN_VARIANCE: 9 / MOTION_INTENSITY: 5 / VISUAL_DENSITY: 2选对技能模块skills/ 目录里的分工skills/ 下有一组各管一摊的技能按气质和工作流挑taste-skill默认全能款设计推断加参数控制通用项目直接上它gpt-tasteskill面向 GPT 类模型的变体重点强化了布局多样性image-to-code-skill走参考图 → 分析 → 实现的图优先流程redesign-skill专做存量项目审计现有界面、修复问题、局部重构soft-skill / minimalist-skill / brutalist-skill三种气质变体分别对应柔和高级感、Notion 和 Linear 式的克制产品 UI、以及瑞士字体加锐利对比的粗野风。另外还有三个出图方向的技能imagegen-frontend-web 出网页设计稿hero 区、落地页、多区块imagegen-frontend-mobile 出 iOS/Android 移动端稿brandkit 出品牌方向的整套东西——logo 思路、配色方案、字体系统。组合起来用比单个技能更顺手。例如做新品牌站brandkit 定基调 → imagegen-frontend-web 出稿 → 选定方向后交给 taste-skill 写代码。改造老项目则走 redesign-skill先审计出清单再按清单修比整体重写风险小得多。生成效果长什么样examples/floria-top.webp 是 taste-skill 产出页面的顶部区域导航、非对称的 hero 区块、错落排列的卡片没有通栏紫蓝渐变留白和配色都落在克制但有设计感的区间里。项目里引用的几个量化案例可以感受一下方向性的变化数字来自特定项目你的基线不同结果也会不同某 SaaS 平台重构后页面加载时间从 3.2 秒降到 1.8 秒首次内容绘制从 2.1 秒降到 1.2 秒用户满意度调研从 68% 升到 89%组件与设计规范的贴合度从 65% 提升到 94%某电商把购物车页从单列改成图文分屏、按钮对比度调高后转化从 3.2% 提到 4.7%约 47% 的相对提升一个移动应用流程走imagegen 出图 → image-to-code 实现的路子团队反馈开发时间约省了六成多设备下的一致性表现明显好于直接手写。把这些数字当可达成的量级看别当承诺。真正稳定的收益是设计决策有了参数和规则改起来可度量、可回滚。从 Demo 到上线taste-skill 的落地清单动效和性能上taste-skill 生成的代码默认遵守几条硬标准动画只走transform和opacity避开引发重排的属性图片与模块按需加载配合loadinglazy和 Intersection Observer字体控制在少数几款用font-display: swap避免首屏文字闪烁。无障碍方面按 WCAG 2.1 AA 走正文对比度至少 4.5:1键盘能走完全流程语义化标签给屏幕阅读器留足信息。响应式断点建议按内容定而不是按机型定内容开始拥挤、需要多列、屏幕足够大分别对应三档断点而不是照抄一组固定像素。两个常见的坑三个参数一起拉高。动效和布局都往 8 以上推首屏会又慢又吵。改参数一次只动一个截图对比确认效果再动下一个把密度参数当成越满越好。数据看板给到 8 合理品牌站给到 8 就是把画廊做成了报表。下一步建议从一个页面开始别一上来就重构整个产品挑一个页面首页或定价页跑通全流程写清楚四件事——页面类型、目标受众、气质关键词、已有品牌资产让 taste-skill 先做设计推断用上一节的三个参数起步生成第一版把不满意的点逐条记下并对应到三个参数里的一项再迭代稳定后把这套参数组合固定为团队的默认值再复制到第二个页面上验证。参数稳定下来之后可以接着试 imagegen 系列技能出设计稿或者用 redesign-skill 给存量页面做一轮审计把 taste-skill 用到整个前端工作流里。【免费下载链接】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），仅供参考