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 写个落地页它给你一个居中 Hero、紫蓝渐变、Inter 字体加载时再转个圆形的 spinner。四个特征齐了一眼AI 味。Taste-Skill 就是冲着这套模板脸来的一组给 AI 编码代理装的设计规则让它交出有质感的界面。30 秒搞清 Taste-Skill 是什么Taste-Skill 是一组开源的 Agent Skills每个技能就是一个可移植的 SKILL.md 指令文件装进项目后AI 代理读它、按它干活。它不是组件库也不绑框架管的是设计意图。核心就四点十余个技能变体按场景挑不用全装三个 1-10 的参数控制布局、动效、密度明确的反模板规则禁掉紫蓝渐变、居中 Hero 这些默认套路规则针对设计意图React、Vue、Svelte 都能用安装只需要一条命令npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只想装某一个技能加--skill参数传安装名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile没有 npx 环境也行把任意一份 SKILL.md 复制进仓库或者直接粘进 AI 对话里效果一样。你的情况对应哪个技能技能不用全装对号入座就行你的情况选哪个技能管什么从零开始风格还没想好taste-skill默认全能位会先读你的需求再定方向新手直接用它代码是旧的界面看着像 2010 年的redesign-skill先审计现有 UI再动手修布局、间距和层次不推倒重来手头有设计图想让它变成代码image-to-code-skill走生图、读图、写码的固定流水线图和代码对得上AI 每次都给你半成品输出到一半断掉output-skill逼模型把页面写完禁止用占位注释敷衍视觉方向已定柔和、极简或粗野soft-skill/minimalist-skill/brutalist-skill前者给安静高质感的观感中间那个是 Notion/Linear 式的克制风后者是瑞士字体加硬对比的机械感交付物是设计图不是代码imagegen-frontend-web/imagegen-frontend-mobile/brandkit只出图网页设计稿、移动端界面流、品牌板画完再丢给编码代理实现拿不准就先装默认的taste-skill跑一版觉得哪里不对再换技能或加技能。三个参数决定界面性格taste-skill 文件顶部有三个 1-10 的旋钮界面性格基本由它们决定默认值是 8 / 6 / 4DESIGN_VARIANCE: 8 MOTION_INTENSITY: 6 VISUAL_DENSITY: 4DESIGN_VARIANCE布局方差调低页面整整齐齐、左右对称像文件柜调高非对称、留白大胆像策展人的展厅。像装修时选规整对称还是留一半空墙。MOTION_INTENSITY动效强度调低只有悬停有反馈其余都静态调高滚动触发、磁性按钮、视差全上。像给界面配引擎小排量够用还是 V8看页面类型。VISUAL_DENSITY信息密度调低一个视口就一小块内容画廊式喘息调高数据排得密实驾驶舱式紧凑。像排版时选疏朗的杂志还是塞满信息的数据面板。改这几个数字就行不用动别的。落地页、作品集、官网这类场景直接用默认值往往就比 AI 的裸输出好一档。五条规则治一眼 AI这些规则散在技能文件里挑感知差异最大的五条讲别用 Inter 装高级。试试 Geist、Satoshi 或 Cabinet Grotesk。为什么Inter 是 AI 的默认答案出现频率高到它本身成了AI 味的标志。强调色只准一个饱和度压到 80% 以下全页锁死。为什么强调色一多就回到紫蓝渐变的套路锁定一种色整页才有统一的气质。DESIGN_VARIANCE 高于 4 时居中的大标题 Hero 直接禁止。为什么居中加渐变是模板脸的核心规则逼 AI 走分屏、左文右图、不对称留白这些结构。加载态用跟最终布局同形状的骨架屏别用转圈的小 spinner。为什么骨架屏告诉用户东西马上来圆形 spinner 只说明在加载信息量差一个档次。每个小节标题上方的小标签eyebrow最多每三个小节出现一个同一页面一种版式家族最多用一次别把左图右文来回镜像摆八个。为什么AI 默认给每个小节都配个小标签、给每个区块都套同一版式重复的节奏感正是模板脸的来源。另外给按钮的:active状态加一个 1px 的下沉或 0.98 的缩放模拟物理按压界面可被按下去质感立马上来。液态玻璃与磁性按钮的正确写法液态玻璃只写backdrop-blur出来的玻璃是磨砂贴纸。正确写法再加一层 1px 内边框border-white/10和一条内阴影shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]。为什么玻璃的质感来自边缘的光折射边框和内阴影就是在模拟这条物理边缘。磁性按钮最大的坑是用 React 的useState跟鼠标位置。为什么不行useState每次变化都触发整棵组件树重新渲染鼠标动一下渲染一次手机上直接掉帧。正确写法是用 Motion 的useMotionValue和useTransform在渲染周期之外计算位移。持续微交互脉冲、浮动、流光这类循环动画只加在确实靠活着传达信息的区块状态点、实时数据。为什么一张信息型的卡片转循环动画用户只会觉得吵。动效一律用弹簧参数type: spring别用线性缓动线性就是程序感的来源。三条性能红线别踩Code review 时值得口头强调的三条颗粒噪点滤镜只放在pointer-events-none的固定层上比如fixed inset-0的伪元素。为什么滤镜挂在滚动容器上GPU 会持续重绘整个容器移动端帧率直接垮掉。动画只动transform和opacity别碰top、left、width、height。为什么后四个触发重排浏览器得重新算布局硬件加速帮不上忙。z-index 不是装饰品。只在导航、弹窗、覆盖层这种系统层级里用别随手写z-50。为什么z-index 乱用后面加组件时你永远猜不出谁盖在谁上面。规则跑出来的页面长什么样这张项目头图上能直接数出规则驱动的细节大面积非对称留白没有居中三件套标题用的是非常见的无衬线字体单一强调色贯穿全图没有紫蓝渐变也没有三张并排的同款卡片。这些细节不是靠审美好是靠上一节那些硬性规则一条条顶出来的。下一步先装再调回到开头那套模板脸居中 Hero、紫蓝渐变、Inter、圆形 spinner装上 Taste-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），仅供参考