第一步AI 主动反问・项目逻辑梳理模板第一步先让 AI 主动提问梳理项目逻辑最值钱、最重要环节禁止操作不要一上来直接让 AI 写网页、丢视觉参考操作方法发送提示词让 AI 主动向你提问补齐项目全部信息解决痛点小白不会梳理需求、不会提问思维存在漏洞信息模糊会导致 AI 生成通用廉价模板实操案例爬虫打印交付黑客松项目告知 AI 项目方向让 AI 提问完善业务闭环作答规则不会的问题可空着回答不完善也没关系AI 自动补全逻辑本阶段目标把脑海模糊零散想法梳理成清晰、闭环的标准化项目方案为什么这一步最关键很多人在用 AI 开发网页时习惯一上来就丢参考图、催代码结果 AI 只能生成“通用模板”——看起来像样但完全不符合你的业务逻辑。问题出在信息输入太模糊。AI 不是真人产品经理它需要清晰、结构化的信息才能输出精准方案。“AI 主动反问”的核心价值把提问的主动权交给 AI让它像顾问一样引导你梳理思路。你不需要事先想全所有细节AI 会通过一系列问题帮你查漏补缺把脑海里的零散想法串联成闭环方案。这一步做扎实了后面的视觉设计和代码生成才会事半功倍。 通用提示词复制即用我正在做一个【项目类型/方向如黑客松参赛项目/创业项目/课程作业】 项目名称是【项目名称】核心方向是【一句话说清项目是做什么的】。我需要做一个可以【用途如路演展示/客户演示/上线运营】的网站。请你向我提出一系列关键问题帮助我梳理和完善这个项目的完整业务逻辑。 可以从以下维度提问项目定位、目标用户、核心功能、商业模式、技术架构、视觉风格、竞品差异等你觉得重要的维度都可以问。⚠️ 规则说明遇到我答不上来的问题你可以根据行业常识自行补全逻辑我回答得不完整也没关系你可以自己补充完善最后帮我输出一份完整的项目需求梳理文档第二步视觉参考・风格 逻辑匹配模板误区避坑不让 AI 直接照抄参考页面、不单纯套模板正确指令逻辑让 AI 拆解参考页面的视觉语言、设计逻辑结合自身项目定位重新独立设计页面架构保留参考优质设计留白、分层卡片、交互动效把设计风格和自己的业务深度融合输出要求生成结构化网页代码所有图片位置预留占位同步标注每个区块需要什么素材价值成型骨架消除空白页面焦虑不用凭空想象网站效果这是我给你的视觉参考【粘贴参考网站链接/截图或描述参考风格】请你先分析这份参考的视觉语言和页面逻辑重点拆解整体配色方案和色彩体系页面布局结构和留白节奏卡片/按钮/组件的设计风格字体层级和排版规范交互动效的特点然后结合我们刚才梳理的【项目名称】项目定位 重新独立设计一个符合本项目定位的网页结构。⚠️ 核心要求非常重要 把参考网站的视觉风格和我的项目业务逻辑做深度匹配 不是简单套模板也不是照抄参考。保留参考的高级感、留白设计、卡片风格、动效质感 但内容结构和信息架构要完全适配【项目名称】的业务场景。请先生成第一版结构化网页代码。 所有需要图片的地方请先预留占位 并标注清楚每个位置需要什么类型的图片。第三步批量图片・自动识别匹配模板小白传统素材痛点海量图片需手动命名、分文件夹、写路径、统一裁剪尺寸、一一对应模块细碎工作劝退新手操作方式全部图片放入同一个文件夹交给 Codex 自主处理AI 能力自动识别图片内容、分类、匹配对应页面占位无法判定位置会主动询问你卡片类页面优势只需定好单卡片排版全量图片一次性交付自动批量排版视觉统一容错方案少量图片匹配错误仅局部微调远少于手动调整几十张图片的工作量我把所有图片素材都放在了项目目录下的【文件夹路径如images文件夹】里 一共【数量】张。请你完成以下工作自动识别每张图片的内容和主题根据网页上的图片占位需求自动匹配分配到对应的位置不确定放哪里的图片可以先列出来问我确认自动适配图片尺寸和显示效果保持页面布局协调确保整体视觉风格统一⚠️ 注意 如果有匹配错误我后面会单独告诉你调整。 只需要调整有问题的没问题的不用动。