video-to-code
将屏幕录像或网页转化为代码实现规格与设计系统的AI工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：video-to-code。 它的用途是：将屏幕录像或网页转化为代码实现规格与设计系统的AI工具 完整的 Skill 内容见：https://321skill.com/skills/video-to-code/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“分析 stripe.com 并提取其设计系统的颜色和字体。” 它会自动访问该网站，录制交互过程，并生成一份包含色彩代码、字体大小、间距等详细规范的分析报告。或者，当你有一个本地录制的产品演示视频时，可以说：“分析 ./demo.mov，告诉我用了哪些UI组件。”
介绍
ui-extractor 是一个专为开发者设计的 Claude Code Skill，它能智能分析屏幕录像和网站，自动提取出详细的实现规格、设计系统规范和UI模式。它解决了从视觉设计到代码实现之间信息传递的鸿沟，帮助开发者快速理解现有UI的结构与细节。
使用方式非常灵活：你可以直接提供本地录制的视频文件路径，也可以直接输入一个网址，Skill会自动录制并分析该网页。对于需要登录的网站（如内部仪表盘、Figma），你可以先打开浏览器标签页，然后让Skill录制当前打开的标签页进行分析。
这个Skill特别适合前端开发、UI设计师和产品经理。前端开发者可以用它来快速理解竞品或参考设计的实现细节；UI设计师可以导出设计系统到Figma，确保设计一致性；产品经理则能通过对比分析，了解自家产品与竞品的差异。
使用建议：对于长视频或简单UI，可以使用低质量模式以节省处理时间。分析前，请确保已安装必要的依赖（ffmpeg和jq）。由于macOS安全限制，桌面上的录屏文件需要先复制到项目目录中才能被Skill访问。
核心特点
它不仅支持分析本地视频文件，还能自动录制任意公开网址或用户当前已登录的浏览器标签页，实现对需要身份验证的网站（如内部工具、Figma设计稿）的UI提取，这是大多数同类工具不具备的能力。
注意事项
不适合分析纯文本内容或无明确视觉层级的界面，对视频的清晰度和帧率有一定要求。
常见问题
如何分析需要登录的网站？
先在浏览器中登录并打开目标页面，然后对AI说“记录我打开的浏览器标签页”即可。
可以直接分析一个网址吗？
可以，直接输入网址如“分析 stripe.com”，Skill会自动录制并分析该网页。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/video-to-code/raw/index.md 读取 video-to-code 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/video-to-code/raw/index.md（查看排版版本）