dididy/ui-skills

# ui-skills — 将任意网站克隆为 React + Tailwind 一个 [Claude Code](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview) 插件，可将任意在线网站逆向工程为生产就绪的 React + Tailwind 组件 —— 基于实际源码，而非截图。 给它一个在线 URL，它便能提取计算后的 CSS、DOM 结构、JS 交互、响应式断点和动画 —— 来自 `getComputedStyle` 的实际值，而非基于像素的猜测。同时也接受截图和屏幕录制作为备用输入（通过 Claude Vision 分析），但只有 URL 输入能提供精确值。 包含两项技能： 1. **`ui-reverse-engineering`** —— 完整流水线：URL → DOM/CSS/JS 提取 → React + Tailwind 组件 2. **`transition-reverse-engineering`** —— 精确动画提取（WAAPI、canvas/WebGL、Three.js、字符交错） ## 环境要求 ``` brew install agent-browser # macOS npm install -g agent-browser # any platform agent-browser --version # verify brew install ffmpeg # macOS — required for visual verification (frame extraction) # Linux: sudo apt install ffmpeg | Windows: https://ffmpeg.org/download.html ``` ## 安装 ``` # npx skills（推荐） npx skills install dididy/ui-skills # Claude Code 插件市场 /plugin marketplace add dididy/ui-skills /plugin install ui-skills@dididy # 直接 Clone（CLAUDE_SKILLS_DIR 默认为 ~/.claude/skills） mkdir -p ~/.claude/skills git clone https://github.com/dididy/ui-skills.git ~/.claude/skills/ui-skills ``` ## 技能 1：`ui-reverse-engineering` — 网站转 React 组件 将任意在线网站逆向工程为 React + Tailwind 组件。对于 URL 输入，提取真实值 —— 绝不猜测。截图和屏幕录制输入也可作为备选方案（Claude Vision 近似）。 ### 何时使用 - 你想从在线网站克隆 UI 组件或页面布局 - 你有设计稿或截图需要转换为代码 - 你需要提取响应式行为（移动端/平板/桌面端） - 你有交互的屏幕录制需要复刻 ### 用法 ``` Clone this site: https://example.com Copy the hero section from https://example.com Replicate this UI (attach screenshot) Turn this screen recording into a working component ``` ### 工作原理 步骤 R–9 适用于 URL 输入。对于截图/视频输入，步骤 1–6 将由 Claude Vision 分析替代。 ``` Input URL ↓ R. Capture Reference — static screenshots + scroll video (60 fps). C3 deferred to 5b ↓ 1. Open & Snapshot — DOM tree, full-page screenshot ↓ 2. Extract Structure — HTML hierarchy, component boundaries ↓ 3. Extract Styles — computed CSS, colors, typography, spacing, design tokens ↓ 4. Detect Responsive — 2-pass viewport sweep (coarse 40px → fine 5px) to find real breakpoints ↓ 5. Detect Interactions — hover/click/scroll transitions and animations ↓ (complex animation detected) → transition-reverse-engineering — 11-point measurement + frame comparison ↓ 5b. Capture C3 (deferred) — interaction/transition videos using selectors from Step 5 ↓ 6. Analyze JS (if needed) — bundle grep for complex interactions ↓ 6b. Assemble extracted.json — combine structure + styles + breakpoints + interactions ↓ 7. Generate Component — React + Tailwind, exact values, functional JS ↓ 8. Visual Verification — C1 (static) + C2 (scroll) + C3 (transitions) comparison ↓ 9. Interaction Verification — test each hover/click/scroll/timer on localhost ``` ### 输入模式 | 模式 | 质量 | 何时使用 | |------|---------|-------------| | **URL**（主要） | 精确值 | 在线网站 —— `getComputedStyle`、真实 DOM、JS bundle | | **Screenshot** | 近似值（Claude Vision） | 设计稿、无法访问的网站 | | **Video / screen recording** | 近似值（Claude Vision） | 录制中可见的交互 | | **Multiple screenshots** | 近似值（Claude Vision） | 不同页面或断点 | ## 技能 2：`transition-reverse-engineering` — 精确动画提取 以帧级精度提取动画和过渡效果。当 `ui-reverse-engineering` 检测到复杂动效时会自动调用，也可独立使用。 在编写任何代码之前，会在 11 个进度点（0%–100%）测量所有动画属性 —— 捕捉仅靠起止点提取会遗漏的多阶段时序、非线性曲线和特定属性的阶段边界。 ### 何时使用 - 你需要对页面加载动画进行帧级完美复刻 - 目标使用了字符交错、WAAPI 或 canvas/WebGL - 你想要精确的缓动曲线、持续时间和延迟 - 仅靠 CSS 计算值是不够的 ### 用法 ``` Copy this transition: https://example.com Replicate this animation exactly Clone this canvas effect Extract the page-load animation from https://example.com ``` ### 工作原理 ``` Step -1: Multi-point measurement — 11 progress points, ALL animated properties ↓ Step 0: Capture reference frames — screenshots or video from original site ↓ Step 1: Classify effect — CSS transition, CSS animation, or canvas/WebGL ↓ Step 2: Extract — CSS path or canvas path ↓ Step 3: Implement — using measured values only, never guessed ↓ Step 4: Verify — frame-by-frame comparison (element or fullpage scope) ``` ### 支持的动画类型 | 类型 | 方法 | |------|--------| | CSS transitions（悬停/点击） | computedStyle 变化前后差值 | | CSS keyframe animations | CSSKeyframesRule 提取 | | 页面加载 WAAPI | waapi-scrub-inject.js + capture-frames.sh | | 字符交错 | 每字符选择器 + 延迟配置 | | Three.js / 自定义 WebGL | Bundle 下载 + grep 模式匹配 | | Spline / Rive / Lottie | 引擎检测 → 场景 URL 引用 | | 滚动触发 | IntersectionObserver 帧录制 | ## 评估 两项技能均包含遵循 [skill-creator](https://github.com/anthropics/skills/tree/main/skills/skill-creator) 约定的评估套件。位于 `skills/*/evals/`。 ## 许可证 Apache-2.0 —— 与 [anthropics/skills](https://github.com/anthropics/skills) 相同。

标签：AI 编程, Claude Code 插件, CSS 提取, DOM 解析, LLM Agent, React, SOC Prime, Syscalls, Tailwind CSS, Three.js, UI 组件库, UI 逆向工程, WebGL, Web Scraper, 代码生成, 前端自动化, 前端逆向, 动画提取, 响应式设计, 大模型工具, 开发工具, 截图转代码, 样式计算, 浏览器自动化, 渗透测试工具, 网站克隆, 自定义脚本, 自然语言编程