AI 生成的前端为什么都一个样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-skillTaste-Skill 是一套让 AI 生成的前端界面摆脱模板脸的设计方法论它先让 AI 读懂简报、给出一句设计判读再拧布局、动效、密度三个旋钮然后才动代码产出不再是紫色渐变加三张等宽卡片。Taste-Skill 是什么站在 AI 旁边的调音师先想一个场景AI 像一支技术不错但没有耳朵的乐队你让它随便来点它就弹一首标准流行乐——紫色渐变背景、居中大标题、三张卡片排排坐。功底合格但一眼就是AI 味。Taste-Skill 不教乐队演奏而是在旁边放一位调音师先听清楚台下观众要什么再把调音台上的三个旋钮拧到位上台前最后走一遍声检。所谓品味被它预先写成规则AI 只能在规则内发挥。AI 如何读懂简报动代码前先给一句设计判读AI 设计翻车最常见的原因是它拿到需求就直接写代码。Taste-Skill 强制它先做一轮简报推理这是什么页面落地页、作品集还是内容站给谁看B2B 采购、招聘经理还是普通用户你用了哪些形容词简约、高端还是顽皮手里已有什么品牌资产推理完它先输出一句话再动手比如我把它读成面向技术买家的落地页极简语言动效克制。这句话就是调音师告诉你打算调哪首曲子——读偏了你现在纠正是零成本需求含糊时它只追问一个问题绝不连珠炮十问。三个调音旋钮怎么拧布局、动效、密度 ️判读之后拧三个旋钮各 1 到 10布局实验度排版敢不敢不对称、动效强度动画做到多深、每屏信息量一屏塞多少内容。默认 8/6/4但关键不在数字在拧动之后发生什么你的场景建议搭配页面上看到的变化咖啡品牌落地页想要高级感布局 7 / 动效 5 / 密度 3大留白、全站只留一个强调色、元素滚动时依次浮现开发者作品集要个性布局 9 / 动效 8 / 密度 3错落的非对称排版、滚动驱动的转场企业服务站要可信布局 3 / 动效 2 / 密度 5居中对齐、几乎无动画、信息密而整齐密度拧到 8排版从美术馆变驾驶舱动效拧到 8就该用滚动驱动库而不是手写监听。每个档位都对应具体规则AI 没有自由发挥的空间。选地基成熟场景直接用官方设计系统旋钮定好后选地基。项目落在成熟场景——企业仪表盘、GitHub 风格开发者工具——它要求直接安装官方设计系统Fluent、Material、Carbon、Primer不让你手写一套像 Carbon 的 CSS且一个项目最多混用一套。纯美学方向玻璃拟态、粗野主义、杂志感没有官方包就用原生 CSS并在注释里注明这是近似实现。这也决定了它怎么接进你现有的项目默认栈是 React/Next.js 加 Tailwind服务端组件优先设计令牌统一走 CSS 变量。两条常用路径一是先出图用 imagegen 类技能生成参考视觉再交给编码智能体翻译成代码二是翻唱老歌改造现有站点时先审计、保留原有配色和字体再渐进调整。AI 有干一半就停的毛病就再挂一个 output-skill。技能都在 skills/ 目录每个只管一件事不必全装。上台前声检产出要过的几道硬门禁 调音的最后一环是声检。Taste-Skill 的产出在以下项目过关前不算完成布局320px 到 1920px 各断点不炸悬停、聚焦、禁用状态齐全可访问性文本对比度至少 4.5:1WCAG AATab 键能走到所有交互元素用户开了减少动态效果后动画自动静止性能LCP 小于 2.5 秒、INP 小于 200ms、CLS 小于 0.1完成前跑一遍 Lighthouse。数字看着苛刻逻辑很简单不让 AI 自己宣布完成让仪表说话。新手最小路径五分钟装好避开三个坑五分钟路径git clone https://gitcode.com/GitHub_Trending/ta/taste-skill拉下仓库再用一行npx skills add把技能装进你的智能体或者直接把对应的SKILL.md贴进对话。新做落地页装默认口味技能就够改造现有站点换 redesign 技能。三个常见坑。其一产出一眼 AI 味多半是简报没写具体判读跑偏给它三个具体词比如给投资人看、高端、动效克制。其二AI 用到了没装的库规则要求它先查package.json并给出安装命令别跳过。其三手机顶部会跳动那是h-screen的老毛病正确写法是100dvh见到就换。把旋钮调对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），仅供参考