Coding Agent设计经验：HTML优于专业工具，建立设计系统宪法

AI 总结 · 连续创业者视角

深度使用Coding Agent半年经验：HTML是Agent友好的最佳载体，建立统一设计系统作为宪法，避免过度设计，核心是解决需求而非追求视觉炫技。

原文全文

深度使用Coding Agent大半年了，是时候总结下在产品设计层面积累的经验，如果能对大家有帮助就太好了，本文纯人工写作，无任何AI参与。

如果你一直在关注各位设计师和开发者分享的设计经验，会发现核心思想非常类似，并没有脱离互联网时代产品设计与软件工程的「金科玉律」，本文亦如是。

核心问题：方向比努力更重要

看着是一句废话，但这才是最核心的问题。方向错误，再怎么努力都是浪费。

比如Claude标志性的暖色背景+衬线字体，在去年还可以称之为好看，但现在已经成为没有认真打磨UI的典型特征，GPT喜欢用的绿色表单风格也是一样。

解决这个问题的唯一办法就是多看真正的好东西，尽量找到信息源头，避免二手信息。

设计不是艺术创作，核心是解决问题、满足需求、达成目标。好看既不是充分条件，也不是必要条件；好看是手段，而不一定是目的。

假设你要做一个网页版的IP质量检测工具，用户的需求是打开之后能快速看到IP分析结果，而你为了好看给界面加了很多高光、阴影、材质、three.js模型……网页加载速度被严重拖慢，产品体验被严重干扰——这就是设计方案与需求脱节了。

如果你对设计的要求极高，那仍然需要使用Figma、Paper一类的专业工具，但在绝大多数情况下HTML文件已是更好的选择，不管是前端项目还是原生项目。

HTML对Agent的友好程度可能仅次于Markdown，修改效率极高，不管是做样式还是交互都很方便，还能被各种Agent客户端内置的浏览器打开、批注、截图……想做什么就做什么。

引入合适的组件库能节省大量的时间和成本，基于个人偏好和项目完成度选择即可，常见的有Shadcn UI、Hero UI、Base UI等。

这是本篇文章最核心的技巧。设计系统的目的就是建立起Agent处理页面设计时的宪法，把色彩、字体、排版、间距、阴影、组件、布局、交互、文案风格等内容全部定清楚，收归到一个统一的HTML文件或文件夹中。

在项目开始前做好设计系统，能大量节省调整各种琐碎细节的时间。我每次在做完新模块之后，都会习惯性地问一句是否符合当前设计系统的规范。

目前的模型普遍有添加大量细节的倾向，要大胆删除那些不必要的东西。完成一轮调整后，还可以让Agent提取这些决策体现出来的设计原则并将其补充到设计系统中。

如果你对某个模块的设计感到困惑，可以让Agent多做几个方案来对比，但一定要在单独的HTML文件中进行，不要直接修改项目代码。

Shot，耐心打磨。不要迷信社交网络上各种一段Prompt就搞定的炫酷案例，你准备工作做得越好，想得越清楚，项目推进速度就越快，至于是一轮搞定、两轮搞定还是十轮搞定，并不重要。

—— 摘自 TG 频道：AI探索指南 - Telegram Channel

（原文源 AI探索指南 - Telegram Channel 国内不可直接访问；上文已内嵌原文全文）