UI克隆工具：从PageFlows截图自动生成Next.js (Tailwind v4) 代码，WAT框架驱动

ui-clone by clownnvd/claude-code-skills

1 周安装量

GitHub

安装命令

npx skills add https://github.com/clownnvd/claude-code-skills --skill ui-clone

开发自动化 React

🇨🇳中文介绍

UI 克隆 — WAT 框架

将任何应用的 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`

🇺🇸English

UI Clone — WAT Framework

Clone any app's UI from PageFlows screenshots into Next.js (Tailwind v4). WAT = Workflows + Agent + Tools.

Quick Start

# 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

Three Workflows

Phase	Goal	Reference

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

FlyClaw：零登录航班聚合查询工具，Python实现多源航班信息与价格搜索

4,000,000 周安装

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

812,900 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

269,400 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

218,000 周安装

脚本	用途	关键参数
`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 点击交互可靠地会超时

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

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

147,400 周安装

UI克隆工具：从PageFlows截图自动生成Next.js (Tailwind v4) 代码，WAT框架驱动

🇨🇳中文介绍

UI 克隆 — WAT 框架

快速开始

三个工作流

🇺🇸English

UI Clone — WAT Framework

Quick Start

Three Workflows

相关 Skills

脚本

输出结构

视觉差异循环

PageFlows 认证

关键规则

Scripts

Output Structure

Visual Diff Loop

PageFlows Auth

Critical Rules

最新 Skills