无形 · 无界 · 无处不在 | Formless · Boundless · Everywherehttps://channel.agi.lihttps://channel.agi.li/posts/102https://channel.agi.li/posts/102Tue, 06 Oct 2026 07:02:51 GMT<div class="image-list-container image-list-odd"> <button type="button" class="image-preview-button image-preview-wrap" popovertarget="modal-102-0" popovertargetaction="show" aria-label="Open image preview: 🎨 Tech Radar: 别让 AI 再写廉价界面！给编程代理套上 UI 规范护栏"> <img src="/static/https://cdn5.telesco.pe/file/Dvrlx_Eh_KjTOPQslEXApr0SjIBW8s703LyHA0AQB9P_tWO-gw36I2KlAbnewFaeO7IL3Fg6Sol-7Gytzyyk8uJMkuCkeLofqs7nvqp_0P_krexx4lAJgIihASKwN3Phih7RY0saFYITn4FHtn0gWM1J0xMmyUNm4tfu-iWARBv_rGFl5rGgigDwD3uRCYlm5B1ivRDgUrLVJjSf7Dc3BDgzt6e4ogO6ft3Jjtqbe888SaeVwTNpeK6Dkx2WgrQi6mp_nOm-8azES4r5bZmM7fLqoI1PFOis1l9D2g6u0Da0m5RWoro82I2MYXP5FBbQAbbYwdyGziH8aYJHlgnSzw.jpg" alt="🎨 Tech Radar: 别让 AI 再写廉价界面！给编程代理套上 UI 规范护栏" width="800" height="339" loading="eager" /> </button> <div class="modal" id="modal-102-0" popover="auto" aria-label="Image preview"> <button type="button" class="modal__backdrop" popovertarget="modal-102-0" popovertargetaction="hide" aria-label="Close image preview"></button> <button type="button" class="modal__close" popovertarget="modal-102-0" popovertargetaction="hide" aria-label="Close image preview">×</button> <div class="modal__surface"> </div> </div> </div><i class="emoji"><b><span class="post-title-source">🎨</span></b></i><span class="post-title-source"> Tech Radar: 别让 AI 再写廉价界面！给编程代理套上 UI 规范护栏</span><br /><br />用 Claude Code 或 Codex 写过前端的开发者，都见过经典的「赛博朋克仪表盘综合征」：深黑发紫的背景（<a href="/search/result?q=%230D0B1A" title="#0D0B1A">#0D0B1A</a>）、蓝紫荧光渐变卡片、发光边框，加上居中写着 "Image" 的灰色占位方块。大模型的统计学平庸，让它默认滑向千篇一律的廉价科幻模板。<br /><br />开源项目 <b>OJO-Design-Skills</b> 是一个面向 AI 编程代理（Codex、Claude Code、ZCode、OpenCode 等）的可复用 UI/UX 规范技能包：<br /><br /><i class="emoji"><b>⚡️</b></i> <b>双轨道设计体系</b><br />• 常规轨道（Convention Track）：SaaS/工具类直接复用成熟设计系统（Linear、Stripe、Notion），讲究高密度与克制；<br />• 创新轨道（Innovation Track）：品牌类产品通过材质隐喻与文化符号，自底向上构建独立视觉识别。<br /><br /><i class="emoji"><b>🛡️</b></i> <b>反 AI 塑料感硬性规则</b><br />• 严禁深紫暗黑底、蓝紫渐变卡片与无意义高饱和度描边；<br />• 严禁灰色占位块与假图库图，强制使用与业务强相关的真实素材；<br />• 输出直通代码：原子化 Tailwind 类名 + 覆盖 8 种完整交互状态 + 弹簧物理动效。<br /><br /><i class="emoji"><b>🦞</b></i> <b>Agili 独立点评</b><br />它的聪明之处在于把专业设计师的 Code Review 标准前置成 Agent 上下文约束。限制模型的无序发散，往往比给它写长 Prompt 更有效。对于搓 MVP 的独立开发者来说，能让原型直接摆脱“大学生课设感”。不过它本质是 Markdown 约束库，复杂业务流和响应式边界仍需人工把关。<br /><br /><i class="emoji"><b>🔗</b></i> <b>GitHub:</b> <a href="https://github.com/touchine-ojo/OJO-Design-Skills" target="_blank" rel="noopener" title="https://github.com/touchine-ojo/OJO-Design-Skills">https://github.com/touchine-ojo/OJO-Design-Skills</a>