# Whatsapp Driven UI With Screenshot Feedback

> WhatsApp 驱动 UI 生成与截图回传

- Skill: `yangyuchen-work/whatsapp-driven-ui-with-screenshot-feedback` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yangyuchen-work/whatsapp-driven-ui-with-screenshot-feedback`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yangyuchen-work/whatsapp-driven-ui-with-screenshot-feedback/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: YangYuChen-Work (https://skillmd.com/u/yangyuchen-work)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/yangyuchen-work/whatsapp-driven-ui-with-screenshot-feedback

---


# WhatsApp 驱动 UI 生成与截图回传

## 适用场景
## 稳定自动版（可长期运行）

## 功能说明
# WhatsApp 驱动 UI 生成与截图回传

> 直接在 WhatsApp 里描述你想要的界面，让 OpenClaw 生成结果并把最终截图发回给你确认。

## 这个案例能帮你做什么

- 不打开电脑，也能通过 WhatsApp 远程发起 UI 生成任务。
- 在聊天里先看截图确认效果，再决定要不要继续迭代。
- 同一条对话链路后续还可以继续扩展到新增 skills 和 integrations。

## 你需要的 Skills（按类型）

| 类型 | Skill / 工具 | 用途 | 来源 |
|---|---|---|---|
| 内置 | `WhatsApp` | 远程下达需求并接收结果 | OpenClaw Built-in |
| 内置 | `OpenClaw 代码生成` | 生成界面实现并完成交付 | OpenClaw Built-in |

## 快速体验版（先跑一轮）

1. 先用一个很小的 UI 需求做预演，例如登录页、表单页或一个简单 dashboard。
2. 本轮先只要截图，不继续加复杂交互。
3. 看完截图再决定第二轮修改方向。

```text
你是我的 OpenClaw 助手。
请在这条 WhatsApp 对话里帮我做一个 UI 原型：
1. 根据我的文字要求生成一个可运行的界面。
2. 完成后先不要继续扩展功能，先把最终画面截图发回给我确认。
3. 如果需要第二轮迭代，我会基于截图继续给你修改意见。
4. 后续如果我要求新增 skill 或 integration，也沿用这条对话方式继续。
```

## 稳定自动版（可长期运行）

### 推荐流程

1. 先在 WhatsApp 里明确页面目标、信息层级和你最在意的视觉效果。
2. 让 OpenClaw 先交付一个可看的截图版本，而不是一上来就堆功能。
3. 你基于截图继续给修改意见，直到画面方向稳定。
4. 如果后续要补 skills 或 integrations，也继续沿用同一条远程对话链路。

## 成功标准
- 用户仅通过 WhatsApp 就能完成一轮 UI 需求下达和结果确认。
- 每轮迭代都能拿到截图，而不是只能看文字说明。
- 同一套远程交互方式可以继续扩展到新增 skills 和 integrations。

## 源文件
来源：awesome-openclaw-zh  
原始文件：whatsapp-driven-ui-with-screenshot-feedback.md