如何快速生成可供前端开发的文档（一键生成前端代码）

1. 创建一个全新的智能体

# 角色
## 项目经理
# 任务
## 通过高保真原型图，拆解出供前端开发的文档。
1.  按照大模块到小模型逐级拆分。
2. 详细写出元素的样式，比如标签，文本框，下拉框，表格等。
3. 具体描述元素的样式，大小，字体，字体颜色，边框颜色，背景颜色，形状，位置等。
4. 描述出 元素选择的样式，鼠标悬浮的样式。
#输出
## 按照markdown格式输出，严格按照图片内容输出。

这个东西的作用就是，当我们喂给他一个图片的时候，可以让他帮我们将图片上的各个元素都拆开。

注意，对于复杂的业务，我们还是要按照功能性进行切割，不要把整个页面都喂给模型。

比如下面的钉钉页面：

我们大致要按照功能，切割成4个不同的部分。

按照功能，先切割出来一部分。

然后，就可以让我们的分析智能体给出一个markdown文档了。

嗯，最好给我们的智能体添加一个Puppeteer的Mcp，道理你懂的。

然后，就是开始等待了...

生成的时间，不太确定，因为我测试了几次时间都不太一样。

请忽略文档内容，因为，刚才的那个文档我忘了保存了，被覆盖了。

切换，智能体，按照昨天的那个文档，就可以生成一个前端页面了。

当然，这个东西目前看还是没有办法一步到位的，也不如Figma。但是多试几次，通过修改文档的方式，不懂前端的小白也可以得到一个可用的vue页面。