ui-extractor
通过录屏或网页自动提取UI设计规范和实现规格
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui-extractor。 它的用途是：通过录屏或网页自动提取UI设计规范和实现规格 完整的 Skill 内容见：https://321skill.com/skills/ui-extractor/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘分析 stripe.com 并提取其设计系统的颜色和排版。’ 它会自动打开浏览器录制该网站，滚动页面并分析视觉元素，最后给你一份详细的样式规范报告。或者，当你有一个本地App演示视频时，可以说：‘对比 ./my-app.mov 和 ./competitor.mov 的UI组件差异。’ 它会逐帧分析，指出布局、组件使用和交互模式上的不同。
介绍
UI Extractor 是一款面向开发者和设计师的Claude Code技能，它解决了从现有界面中逆向提取设计规范和实现细节的繁琐问题。传统上，分析竞品或参考网站需要手动截图、测量、拾色和记录，这个过程既耗时又容易出错。
该技能通过自动化录屏和分析流程来使用。用户只需提供一个网站URL、一个本地录屏文件，或直接让AI录制当前打开的浏览器标签页，技能便会自动模拟用户交互（如滚动、悬停），捕获关键帧，并从中提取颜色、字体、间距、组件结构等设计系统元素，甚至可以生成Figma可用的导出文件。
它非常适合前端开发、UI设计师和产品经理，尤其是那些需要进行竞品分析、设计系统迁移、或从优秀产品中汲取灵感并快速落地的专业人士。对于高校学生完成设计作业或项目原型制作也很有帮助。
使用建议方面，对于需要登录的网站（如内部仪表盘、Figma），使用“浏览器标签页录制”功能最为便捷。分析长视频时，可选用‘low’质量预设以优化处理速度。注意，技能依赖ffmpeg和jq，需提前在本地安装好这些命令行工具。
核心特点
与单纯截图或CSS提取工具不同，它能通过动态录屏捕捉完整的交互状态（如悬停、动画），并能从任何已登录的浏览器标签页中直接提取内容，解决了分析需认证页面的痛点。
注意事项
不适合提取纯后端逻辑或非视觉化的代码实现，且处理超长或高帧率视频时可能消耗较多时间和计算资源。
常见问题
如何分析需要登录的网站？
先将网站登录并保持在浏览器前台标签页，然后对AI说“录制我打开的标签页”或“分析这个已认证的仪表盘”即可。
提取的设计系统能直接导入Figma吗？
可以，使用“导出到Figma”指令，技能会生成结构化的设计令牌（如颜色、字体样式）文件，便于在Figma中应用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-extractor/raw/index.md 读取 ui-extractor 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-extractor/raw/index.md（查看排版版本）