Codex
Claude Code
前面老陈聊了AI 编程中最容易踩坑的需求部分，包括尽量把需求说细、让 AI 先帮我们头脑风暴，以及在开发前确定技术框架和核心组件。这一篇，我们继续，但重点放在最难用文字表达的一部分：页面到底要长什么样？很多人会告诉 AI：“页面做得高级一点”“要有科技感”。但结果生成出来，往往还是熟悉的紫色渐变、悬浮卡片和巨大标题😂 “高级”、“科技感”都很抽象。这时候，与其费劲形容，不如直接让 AI 看。1️⃣ 给 AI 提供参考网站或截图现在 Codex、Claude等工具都已经支持图片输入。我们可以把喜欢的网站截图、设计稿，甚至自己随手画的草图交给 AI。但不要只说“照着这个做”，最好明确告诉它分别参考什么：参考 A 网站的布局参考 B 网站的配色与字体参考 C 网站的卡片样式和交互保留自己的内容与品牌元素这样，AI 拿到的就不再是一句模糊的“做得好看”，而是一组可以分析和执行的视觉要求。2️⃣ 先分析设计，再开始写代码我一般不会让 AI 看完截图就直接开发，而是先给它这样的要求：分析这些截图的页面结构、配色、字体层级、间距、圆角、阴影和交互方式，整理成一份前端设计规范。先不要写代码，等我确认后再实现。先确认设计规范，再让 AI 编码，调整起来会轻松很多。如果提供了多个参考网站，还可以让 AI 先做对比，提炼出统一的视觉风格，避免最后做成“东拼西凑”。3️⃣ 不要只提供首页的正常状态一个应用不只有“正常显示”这一种情况。输入为空怎么办？接口加载时显示什么？请求失败如何提示？内容太长是否折叠？手机端如何排版？点击按钮后是弹窗、跳转，还是局部刷新？这些都属于需求，而且特别容易被遗漏。所以除了参考截图，我通常还会补充：电脑端和手机端的效果、关键操作流程、空数据和报错状态，以及一两组真实的示例数据。4️⃣ 用验收标准给 AI 划一条终点线例如：页面在电脑和手机端都能正常使用；长文本不能溢出；生成失败时要有明确提示；刷新页面后保留历史记录；完成后自行启动项目并检查主要功能。验收标准越明确，AI 越清楚做到什么程度才算完成，也能减少“看起来做完了，实际还差一截”的情况。篇幅所限，这篇就到这里。还有关注老陈聊 AI，后续继续分享我在 AI 编程中的实战经验和踩坑心得。还没看第一篇的朋友，记得去主页补一下😎
发布于 北京
2
3
5
未登录
友善发言
评论
加载中
