vibe-coding-web

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

vibe-coding-web

★ 18 Open GitHub ↗

实践 Demo：用 AI 生成 Web UI，高度还原设计图。

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vibe-coding-web

实践 Demo：用 AI 生成 Web UI，高度还原设计图。

**主要工具：**
- Gemini CLI(gemini-2.5-pro)
- Figma MCP(beta)

**输出内容：**
- 生成的 3 个页面
- “生成页面”提示词
- 提示词执行历史（没有调优过程）

---

**目录：**
[TOC]

## 本地预览生成的页面

**下载源码，并启动：**
```sh
$ git clone git@github.com:daifee/vibe-coding-web.git
$ cd vibe-coding-web
$ npm install
$ npm start
```

**页面 URL：**
- 欢迎页：http://localhost:3000
- 登录页：http://localhost:3000
- 仪表板页：http://localhost:3000/dashboard

**温馨提示：** 浏览器模拟手机预览

## 比较设计图与页面截图

### 1. 欢迎页

### 2. 登录页

### 3. 仪表盘页

## 实践经验

### 选择 Agent 和 LLM

- Agent 必须支持 OCR 读取视觉信息（调用 Figma MCP 的`get_image`工具）
- 用视觉信息理解能力强的模型（`gemini-2.5-pro`, `claude-4-sonnet`效果好）；
- 快速验证模型能力：在网页版上传页面截图，查看生成页面效果
  - 满足条件：布局正确，但颜色、尺寸偏差；
  - 因为还需要`get_code`工具的精准代码信息（CSS）
- Cursor(`claude-4-sonnet`) 效果不好（可能是项目上下文信息影响，任务不纯粹）
- QWen Code 效果不好（还没有 OCR 能力；感觉是“粘贴”`get_code`拿到的代码）

### 页面效果差距很大

**尝试确认以下信息：**
- Agent, LLM 能力：能否根据设计稿截图生成页面（布局正确，只缺细节）
- Figma MCP 工具：根据日志确认是否调用了`get_code`, `get_image`
- 分析生成的代码，猜测原因，优化提示词。例如我遇到效果差现象：
  - 代码都用`absolute`布局：Figma 代码都是 `absolute` 布局，LLM 就直接用了
  - 尺寸没有用响应式单位：其实与上面是同原因（LLM 直接用`get_code`的信息，懒得分析、计算）
  - 代码错误，运行不起来：LLM 没注意运行环境、框架等依赖
- 可能语言、框架还不是 AI 友好型😂

### 提示词优化经验

项目中有提示词模板、执行历史，可供参考。
- `./.prompt/prompt.md`: 执行入口；依赖具体模板
- `./.prompt/history`: 执行历史；文件名为执行时间戳

#### 指令化

为“常用任务”设计提示词模板，并定义指令。保存到项目中，团队共享。

例如本项目定义了 2 个指令（`./.prompt/prompt.md`）：
1. **生成页面**
2. **自定义**

提示：设计“自定义”指令是为了方便记录指令执行历史

**使用示例：** `执行 @.prompt/prompt.md 中的“生成页面”任务`

#### 优化提示词

“生成页面”提示词（`.prompt/generate-page.md`）经过了多次测试、优化。过程终结的经验：

1. 限制指令的效果好，控制处理边界
   - 感觉 LLM 是选择性的“惰性”、“发散性”
   - `generate-page.md`中定义了”禁止事项“指令
2. 指令会相互污染，优化过程注意 LLM 输出的日志：
   - `generate-page.md`优化过程中，我添加”图像注意事项“指令，然后 LLM 误会不用执行`get_code`了
3. 任务要纯粹，遵循程序设计的”职责分离“原则。大任务就考虑拆分。
4. 项目架构做好分层设计，方便定义任务边界，让改动范围清晰、可控。
5. 提示词要明确”组件和“、”模块化“要求。保证代码质量可控。

#### 人工审查结果

还是离不开碳基生物：

1. 运行、预览生成的页面效果
2. 审查 AI 生成的代码，Cursor 的预测功能（tab）就有用武之地了

## 继续提效

> 把整个 React APP 简化抽象为”输入/输出模型“：输入(State) -> APP(render state+component) -> 输出(UI)`

- 与设计师协作利用好`get_code_connect_map`, `get_variable_defs`工具
- AI 生成 services 层代码（OpenAPI格式文档）
- 完成 page-a 页面功能；让 AI 学习 page-a 的实现，然后完成 page-b, page-c

TODO

**最终都会被 Agent 代替，可能就是 Figma**

### 链接

- Figma MCP官方教程：https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server

vibe-coding-web

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README