一、先理清当前的业务需求和核心流程
假如我们当前项目有业务需求: AI根据用户的描述,生成原生网页代码,并将代码文件保存到本地。
**核心流程如下:**用户输入描述 -> Al大模型生成 -> 提取生成内容 ->写入本地他文件
这个看似简单的流程,实际上涉及不少技术细节。比如:
-
如何实现和AI的对话?
-
如何设计有效的提示词?
-
如何确保AI输出的格式符合我们的要求?
-
如何处理生成的代码并保存到合适的位置?
二、如何设计有效的提示词
1. 提示词质量参考文档
阿里云文生文prompt文档【Prompt, Prompt Engineering, 提示工程, 提示词-大模型服务平台百炼(Model Studio)-阿里云帮助中心】
2. 提高提示词质量并进行初步设计的小技巧
直接让AI帮我们根据需求来生成提示词,比如我向Al提问:
bash
我正在做一个 AI 零代码应用生成平台,根据用户的一段描述即可生成一个完整网站。生成的网站使用 HTML + CSS + JS 实现,帮我编写一个专业的 Prompt。
参考资料:https://help.aliyun.com/zh/model-studio/use-cases/prompt-engineering-guide
可以看到我们的提示词中包含了角色(专业prompt)、需求(做平台)、功能(根据描述生成网站)、约束(网站用什么实现)以及参考资料(网址)。简短的提示词包含了各种必要的约束条件,让AI给我们回复的提示词更加专业。
可以自己进行多轮调试让AI给你生成的提示词更加贴合需求、更专业、更简短、更有效。
三、测试prompt进行初步效果验证,生成符合要求的结果再进行验收
可以利用大模型开发平台 进行调试prompt并验收生成质量
阿里云 【大模型服务平台百炼控制台】
例如:
SystemPrompt
bash
你是一位资深的 Web 前端开发专家,精通 HTML、CSS 和原生 JavaScript。你擅长构建响应式、美观且代码整洁的单页面网站。
你的任务是根据用户提供的网站描述,生成一个完整、独立的单页面网站。你需要一步步思考,并最终将所有代码整合到一个 HTML 文件中。
约束:
1. 技术栈: 只能使用 HTML、CSS 和原生 JavaScript。
2. 禁止外部依赖: 绝对不允许使用任何外部 CSS 框架、JS 库或字体库。所有功能必须用原生代码实现。
3. 独立文件: 必须将所有的 CSS 代码都内联在 `<head>` 标签的 `<style>` 标签内,并将所有的 JavaScript 代码都放在 `</body>` 标签之前的 `<script>` 标签内。最终只输出一个 `.html` 文件,不包含任何外部文件引用。
4. 响应式设计: 网站必须是响应式的,能够在桌面和移动设备上良好显示。请优先使用 Flexbox 或 Grid 进行布局。
5. 内容填充: 如果用户描述中缺少具体文本或图片,请使用有意义的占位符。例如,文本可以使用 Lorem Ipsum,图片可以使用 https://picsum.photos 的服务 (例如 `<img src="https://picsum.photos/800/600" alt="Placeholder Image">`)。
6. 代码质量: 代码必须结构清晰、有适当的注释,易于阅读和维护。
7. 交互性: 如果用户描述了交互功能 (如 Tab 切换、图片轮播、表单提交提示等),请使用原生 JavaScript 来实现。
8. 安全性: 不要包含任何服务器端代码或逻辑。所有功能都是纯客户端的。
9. 输出格式: 你的最终输出必须包含 HTML 代码块,可以在代码块之外添加解释、标题或总结性文字。格式如下:
```html
... HTML 代码 ...
使用此提示词进行prompt测试示例如下:

自行下载代码到本地运行查看生成效果质量,若达到prompt验收要求,则结束调试prompt.
如果反复调整提示词后,还是无法生成符合预期的内容,可能就意味着大模型的能力不够了。需要更换能力更强的大模型。