ui-clone by clownnvd/claude-code-skills
npx skills add https://github.com/clownnvd/claude-code-skills --skill ui-clone将任何应用的 UI 从 PageFlows 截图克隆到 Next.js (Tailwind v4) 中。WAT = 工作流 + 智能体 + 工具。
# 1. 捕获所有屏幕
python scripts/pageflows_capture.py --app [app-name]
# 2. 查找共享组件
python scripts/find_shared_components.py --manifest .tmp/[app]/manifest.json
# 3. 提取设计令牌
python scripts/analyze_screen.py --image screenshots/[app]/[flow]/01-[name].png
# 4. 视觉差异对比(构建屏幕后)
python scripts/visual_diff.py \
--original screenshots/[app]/[flow]/01.png \
--url http://localhost:3000/[route]
# 5. 生成技能脚手架
python scripts/generate_skill_refs.py --app [app] --component-map .tmp/[app]/component-map.json
安装依赖: pip install -r scripts/requirements.txt
| 阶段 | 目标 | 参考文档 |
|---|---|---|
| 01 捕获 | 从 PageFlows 获取所有截图 | references/capture.md |
Clone any app's UI from PageFlows screenshots into Next.js (Tailwind v4). WAT = Workflows + Agent + Tools.
# 1. Capture all screens
python scripts/pageflows_capture.py --app [app-name]
# 2. Find shared components
python scripts/find_shared_components.py --manifest .tmp/[app]/manifest.json
# 3. Extract design tokens
python scripts/analyze_screen.py --image screenshots/[app]/[flow]/01-[name].png
# 4. Visual diff (after building a screen)
python scripts/visual_diff.py \
--original screenshots/[app]/[flow]/01.png \
--url http://localhost:3000/[route]
# 5. Generate skill scaffold
python scripts/generate_skill_refs.py --app [app] --component-map .tmp/[app]/component-map.json
Install deps: pip install -r scripts/requirements.txt
| Phase | Goal | Reference |
|---|---|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 02 构建 | 分析 + 通过视觉差异循环实现 | references/build.md |
| 03 打包 | 为未来的会话创建可复用的技能 | references/package-skill.md |
| 脚本 | 用途 | 关键参数 |
|---|---|---|
pageflows_capture.py | 从 PageFlows 捕获所有流程/屏幕 | --app [name] |
find_shared_components.py | 通过感知哈希检测共享 UI 区域 | --manifest [path] |
analyze_screen.py | 提取主色调 → 设计令牌 | --image [path] |
visual_diff.py | 比较原始截图与实现截图 | --original [path] --url [url] |
generate_skill_refs.py | 生成技能参考文件骨架 | --app [name] --component-map [path] |
screenshots/[app]/
[flow]/
01-[screen].png
02-[screen].png
.tmp/[app]/
manifest.json ← 所有流程 + 屏幕元数据
component-map.json ← 共享与唯一区域(构建顺序)
diffs/ ← 视觉差异对比输出(审查这些)
src/
app/
globals.css ← 设计令牌
(clone)/
layout.tsx ← 应用外壳
[flow]/page.tsx ← 每个屏幕
components/
[app]/
sidebar.tsx
topbar.tsx
差异显示 65% 匹配
→ 使用 Read 工具读取两张图片(原始 + 差异输出)
→ 识别具体不同的区域
→ 修复 CSS/布局
→ 重新运行 visual_diff
→ 匹配度 ≥80% 则通过
→ 在组件参考中记录修复
# 首次(手动登录):
agent-browser --headed open https://pageflows.com
# 登录后:
agent-browser state save pageflows-auth.json
专业账户:magicduy56@gmail.com — 已保存在 pageflows-auth.json 中。
| 规则 | 详情 |
|---|---|
在构建之前运行 find_shared_components | 避免重复实现同一个侧边栏 10 次 |
| 首先构建共享组件 | 它们出现在每个屏幕上 |
| 视觉差异目标:≥80% | 对于字体密集的屏幕使用 --threshold 70 |
| 认证大约 1 天后过期 | 如果截图看起来像登录页面,请重新认证 |
| 切勿在捕获中途关闭浏览器 | agent-browser close 会丢失会话 |
使用 eval + data-url 获取屏幕 URL | PageFlows 点击交互可靠地会超时 |
每周安装数
1
仓库
首次出现
今天
安全审计
安装于
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
| Get all screenshots from PageFlows |
references/capture.md |
| 02 Build | Analyze + implement with visual diff loop | references/build.md |
| 03 Package | Create reusable skill for future sessions | references/package-skill.md |
| Script | Purpose | Key Args |
|---|---|---|
pageflows_capture.py | Capture all flows/screens from PageFlows | --app [name] |
find_shared_components.py | Detect shared UI regions via perceptual hash | --manifest [path] |
analyze_screen.py | Extract dominant colors → design tokens | --image [path] |
visual_diff.py | Compare original vs implementation screenshot | --original [path] --url [url] |
generate_skill_refs.py | Generate skeleton skill reference files | --app [name] --component-map [path] |
screenshots/[app]/
[flow]/
01-[screen].png
02-[screen].png
.tmp/[app]/
manifest.json ← All flows + screen metadata
component-map.json ← Shared vs unique regions (build order)
diffs/ ← Visual diff outputs (review these)
src/
app/
globals.css ← Design tokens
(clone)/
layout.tsx ← App shell
[flow]/page.tsx ← Each screen
components/
[app]/
sidebar.tsx
topbar.tsx
diff shows 65% match
→ Read both images (original + diff output) with Read tool
→ Identify the specific region that differs
→ Fix the CSS/layout
→ Re-run visual_diff
→ Pass at ≥80%
→ Document fix in component ref
# First time (manual login):
agent-browser --headed open https://pageflows.com
# After login:
agent-browser state save pageflows-auth.json
Pro account: magicduy56@gmail.com — saved in pageflows-auth.json.
| Rule | Detail |
|---|---|
Run find_shared_components BEFORE building | Avoids reimplementing the same sidebar 10 times |
| Build shared components FIRST | They appear on every screen |
| Visual diff target: ≥80% | Use --threshold 70 for font-heavy screens |
| Auth expires ~1 day | Re-auth if screenshots look like login page |
| Never close browser mid-capture | agent-browser close loses session |
Use eval + data-url for screen URLs | PageFlows click interactions reliably timeout |
Weekly Installs
1
Repository
First Seen
Today
Security Audits
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
147,400 周安装