前言

大家好，我是 wangxinyang。

在日常的开发或做一些展示类项目时，我们经常需要快速搭建一个单页网站。现在大家习惯用 AI 来生成代码，但最常遇到的痛点是：“结构虽然跑得通，但界面总有一股上世纪的复古味”，或者说总是一股AI味，总让人觉着网页配色或者说是排版显得不是很高级。如果我们直接去套开源模板，又很难找到另自己满意的，往往不够灵活，自己一点点手写 CSS 调像素又极其低效。

其实，AI 做不好 UI 的根本原因，是我们的提示词（Prompt）缺乏严谨的设计规范约束。

今天和大家分享一套能快速落地高质感网页的组合技：VS Code (配合 CodeX 插件) + DesignPrompt。

为了让大家直观看到这套工作流的实际效果，我拿所在地的一个知名景点——“鼎湖山”作为前端测试素材，带大家完整演示一遍。没有复杂的理论，零基础小白也能零压力掌握。

(注：本教程默认你已经在 VS Code 中安装并配置好了 CodeX 插件。如果还没有安装CodeX 插件的小伙伴可以先去看一下CodeX 插件安装教程。当然不一定都使用Codex，在 VS Code 中其他AI插件也能实现，大家选择自己喜欢的方式就行，本文则使用Codex)

🛠️ 核心思路：把设计与编码解耦

在进入实战前，先明确我们手里两个工具的分工逻辑：

  1. DesignPrompt (设计系统生成器): 负责“定审美”。它能将你脑子里模糊的“高端一点”、“好看一点”，转化为 AI 能精确解析的专业设计语言（如网格系统、留白比例、层级对比等）。网站直达：DesignPrompt

  2. CodeX (VS Code 插件): 负责“干苦力”。作为你的 AI 结对程序员，它接收设计规范和内容需求后，直接在编辑器里生成结构化的 HTML/CSS 代码。

总结：DesignPrompt 出图纸，CodeX 负责搬砖。

🚀 实战演示：构建「鼎湖山」展示页

我们的测试目标是生成一个包含全屏首图（Hero Section）、网格状内容区（Bento 布局）的现代单页网站。

先看成品：https://wangxinyang.top/Dinghushan/

第一步：在 DesignPrompt 获取视觉约束条件

网页要有现代感，“呼吸感”和“克制”是关键。我们需要先拿到一套设计规范。

1.打开 DesignPrompt 网站，进入后可以看到有非常多的网站模板，大家可以选择自己喜欢的，可以点击进去预览一下。

2.我这里选择Organic，感觉他还挺好看的，符合我的审美，咱们点击Copy，就把这个网页模板的提示词完整复制下来了。

3.然后我们再进入到我们VS Code中，打开Codex聊天面板，把刚刚复制的提示词粘贴到codex聊天对话框中，并在最顶上加上一句“帮我制作一个中国肇庆市鼎湖区鼎湖山介绍网页“。

然后就等Codex自己猛猛干活就好，咱们继续休息

😀Codex经过11min的干活，已经生成了大致的网页框架

咱们去检验一下

确实不错，这只是一次成型哦，如果是自己从0开始构建的话，没有DesignPrompt的提示词，估计网页又是AI的黑紫风格了，上面是还没有放入图片的，所以后期咱们是可以自己放入图片，来补充内容。

第二步：替换真实素材，完成最终落地

框架搭建好后，剩下的就是“填数据”。

  1. 替换图片： 在代码中搜索 unsplash，将这些占位图的链接，替换成你本地真实的鼎湖山风景图（建议将图片放在同级目录的 images 文件夹下，通过相对路径引用，如 <img src="./images/feishuitan.jpg">）。

  2. 微调文案： 根据实际的展示需求，在 HTML 标签中修改具体的描述文字。

如果不知道该填入什么图片，也可以问AI，AI会给你答案。

💡 进阶工作流建议

如果你想把这个页面做得更复杂，这里有几个务实的建议：

  • 模块化生成（关键）： 对于复杂的页面，不要试图用一句话让 AI 生成几千行的代码。像搭积木一样，先让 CodeX 生成首屏，预览满意后，再新建一个对话让它写内容区的 Grid 布局，最后手动拼接。这样可控性更高，查错也更容易。

  • 重视约束条件： 记住，AI 的代码能力很强，但它不懂你的业务审美。养成先通过 DesignPrompt 获取“视觉约束条件”，再让 AI 写代码的习惯，能极大减少后续手调 CSS 的痛苦。

以上就是这套现代网页制作流的完整演示。这套方法不仅适用于景点展示，用来做项目主页、个人简历或产品落地页同样高效。

感兴趣的朋友可以随便找个身边的素材自己跑一遍。如果在实操过程中遇到前端布局或 AI 提示词相关的问题，欢迎在评论区交流