用Coding Agent做好产品设计：半年实战经验
在过去半年深度使用代码类智能体工具后，笔者整理了一套面向产品设计环节的实践经验，所有内容均为人工撰写，未借助AI辅助生成，希望能为同行提供一些参考。
如果你长期关注设计师与开发者分享的设计经验，会发现其核心思想始终围绕互联网时代产品设计与软件工程的基本准则，本文也不例外。接下来将详细分享具体的实践方法。
很多人容易陷入视觉优先的误区，但设计本质上不是艺术创作，其核心目标是解决实际问题、满足用户需求、达成业务目标，美观只是实现目标的手段之一，绝非必要或充分条件。比如假设你正在开发一款网页版IP质量检测工具，用户的核心诉求是打开页面后能快速获取IP分析结果，但你为了视觉效果添加了大量高光、阴影、3D模型等装饰元素，导致页面加载速度大幅下降，用户体验被严重破坏——这就是设计方案偏离了核心需求的典型案例。
很多人会觉得这是一句正确的废话，但这恰恰是整个设计流程最核心的起点。如果方向出错，再多的努力都是白费。比如曾经流行的Claude暖色背景搭配衬线字体设计，或是GPT常用的绿色表单风格，在当下已经成为缺乏精细化打磨的视觉符号，盲目跟风只会让产品显得过时。想要建立正确的审美认知，最好的方式是直接接触优质的设计案例，从信息源头获取参考，避免被二手的、经过加工的内容误导。
如果你的项目对设计精度要求极高，依然可以使用Figma、Paper这类专业设计工具，但在绝大多数场景下，HTML文件都是更优的选择，无论是前端项目还是原生应用开发。HTML对智能体工具的友好程度仅次于Markdown，修改效率极高，无论是调整样式还是添加交互都十分便捷，还能直接在各类智能体客户端内置的浏览器中打开、批注、截图，几乎没有使用限制。
引入适配项目的组件库可以节省大量的开发和设计时间成本，你可以根据个人使用习惯和项目进度来选择合适的组件库，常见的包括Shadcn UI、Hero UI、Base UI等。
这是本文最核心的实践技巧。设计系统的作用相当于智能体处理页面设计的统一规范，你需要将色彩、字体、排版规则、间距标准、阴影效果、组件规范、布局逻辑、交互模式以及文案风格等所有细节全部整理清楚，统一收纳在一个HTML文件或文件夹中。在项目启动前提前搭建好设计系统，可以帮你省去大量调整琐碎细节的时间。我每次完成一个新模块的设计后，都会习惯性检查是否符合当前设计系统的规范，确保整体风格统一。
当前的AI模型普遍倾向于生成细节丰富的设计方案，但很多额外的元素其实是不必要的。你需要大胆删减那些对核心功能没有帮助的装饰内容。完成一轮调整后，还可以让智能体提取本次调整中体现的设计原则，将其补充到你的设计系统中，不断完善规范。
如果你对某个模块的设计方案没有把握，可以让智能体生成多个不同的设计方向进行对比，但一定要在独立的HTML文件中进行尝试，不要直接修改正在开发的项目代码，避免造成不必要的混乱。
不要被社交网络上那些只需要一段提示词就能完成的炫酷案例误导。你前期的准备工作越充分，对需求和目标想得越清晰，项目推进的速度就越快。至于方案是一次通过、两次调整还是经过多轮打磨，其实并不重要，最终的落地效果才是核心。
