用 AI 做前端时，最常见的做法是直接说：“帮我做一个高级、有设计感的页面。”但这句话几乎没有提供具体的视觉信息。编程 Agent 既要决定页面长什么样，又要马上开始写代码，最后很容易回到熟悉的居中标题、渐变背景和三张功能卡片。
更合适的方法，是把 UI 设计和代码实现拆成两个阶段。先把页面用途、目标用户、主要内容、视觉方向和参考案例交给生图大模型，让它生成一张完整的页面效果图。此时先不考虑代码，而是专注调整布局、配色、字体、信息层级和整体氛围，直到设计方向符合预期。
设计图确认后，再把图片交给 Codex 等编程 Agent。让它先分析页面结构、组件划分、间距、颜色和字体，再结合项目原本的技术栈实现代码。这样，图片就成了设计和开发之间的共同参照，很多很难用文字描述的视觉细节，也有了明确标准。
最后还要在浏览器中对照设计图检查实际效果，继续处理移动端布局、交互状态、文字溢出和可访问性。图片只是设计稿，不是最终页面。先解决“页面应该长什么样”，再解决“怎样把它实现出来”，通常比反复要求 AI“再高级一点”更有效。
#AI编程 #前端开发 #UI设计 #VibeCoding