设计规范 on Text Matrixhttps://txtmix.com/tags/%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/Recent content in 设计规范 on Text MatrixHugozh-cnTue, 21 Jul 2026 20:06:14 +0800Taste Skill：AI 前端构建的「反垃圾」技能框架https://txtmix.com/posts/tech/taste-skill-anti-slop-frontend-framework-for-ai-agents/Mon, 25 May 2026 20:16:19 +0800https://txtmix.com/posts/tech/taste-skill-anti-slop-frontend-framework-for-ai-agents/<h2 id="快速信息卡">快速信息卡</h2> <table> <thead> <tr> <th>项目</th> <th>信息</th> </tr> </thead> <tbody> <tr> <td>仓库</td> <td><a href="https://github.com/Leonxlnx/taste-skill" target="_blank" rel="noopener noreffer ">Leonxlnx/taste-skill</a></td> </tr> <tr> <td>Stars</td> <td>50,329+</td> </tr> <tr> <td>Forks</td> <td>3,479+</td> </tr> <tr> <td>License</td> <td>MIT</td> </tr> <tr> <td>语言</td> <td>JavaScript</td> </tr> </tbody> </table> <h2 id="学习目标">学习目标</h2> <p>读完本文后，你应该能够：</p> <ol> <li><strong>理解 Taste Skill 的定位</strong>：解决 AI 生成前端的&quot;同质化问题&quot;</li> <li><strong>掌握核心设计参数</strong>：DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY</li> <li><strong>使用工作流程</strong>：图像优先流和直接代码流</li> <li><strong>选择对的技能</strong>：代码技能 vs 图像生成技能</li> <li><strong>判断适用场景</strong>：知道什么时候该用、什么时候不该用</li> </ol> <h2 id="目录">目录</h2> <ol> <li><a href="#%e6%a0%b8%e5%bf%83%e5%88%a4%e6%96%ad" rel="">核心判断</a></li> <li><a href="#%e7%b3%bb%e7%bb%9f%e5%9c%b0%e5%9b%be" rel="">系统地图</a></li> <li><a href="#%e6%a0%b8%e5%bf%83%e8%ae%be%e8%ae%a1%e5%8f%82%e6%95%b0" rel="">核心设计参数</a></li> <li><a href="#%e5%b7%a5%e4%bd%9c%e6%b5%81%e7%a8%8b" rel="">工作流程</a></li> <li><a href="#%e8%ae%be%e8%ae%a1%e5%8e%9f%e5%88%99%e4%b8%8d%e5%8f%aa%e6%98%af%e5%a5%bd%e7%9c%8b" rel="">设计原则：不只是&quot;好看&quot;</a></li> <li><a href="#%e4%b8%8e%e5%85%b6%e4%bb%96%e6%96%b9%e6%a1%88%e7%9a%84%e5%af%b9%e6%af%94" rel="">与其他方案的对比</a></li> <li><a href="#%e9%80%82%e7%94%a8%e5%9c%ba%e6%99%af" rel="">适用场景</a></li> <li><a href="#%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98" rel="">常见问题</a></li> <li><a href="#%e8%87%aa%e6%b5%8b%e9%a2%98" rel="">自测题</a></li> <li><a href="#%e8%bf%9b%e9%98%b6%e8%b7%af%e5%be%84" rel="">进阶路径</a></li> <li><a href="#%e6%80%bb%e7%bb%93" rel="">总结</a></li> </ol> <p>Taste Skill 解决的是 AI 生成前端时的&quot;同质化问题&quot;——当 Codex、Cursor 或 Claude Code 按照默认方式写前端时，它们的输出往往带着一套隐性的偷懒逻辑：居中卡片、渐变按钮、AOS 动画、Inter 字体，写多了看起来都一样。Taste Skill 把&quot;好的设计&quot;显式化成一套可配置的技能指令，让 AI 照着做，而不是靠随机性碰。</p>