截图转代码
ReactScreenshotCode GenerationImageWorkflow更新于 2026-08-14
使用场景： 从截图还原设计：把营销页、仪表盘或应用界面截图转换为干净的 React/Tailwind 代码并做保真度检查。
安装
npx skills add screenshot-to-code克隆
git clone https://github.com/skillhub-community/screenshot-to-code.git描述
把设计截图变为可用 UI 代码的工作流工具。流程：(1) 上传或粘贴截图；(2) ReferenceOverlay 把图片渲染成半透明层，叠在实时代码预览之后，方便目测对齐；(3) 生成组件代码（默认 React + Tailwind，或纯 CSS），可选先让 LLM 描述布局/token 以获得更好输出；(4) 运行 FidelityAudit——并排检查器标记截图与生成代码在间距、颜色与排版上的漂移。
包含配套工具：色彩提取（从图像中提取主色板）、字号检测启发式，以及识别图片中卡片边界的区块切分器。输出是带 Tailwind class 的可运行 React 组件，可导出为代码片段或整页。任何视觉模型（OpenAI、Gemini、本地）经适配器都可作代码生成器。ReferenceOverlay 支持拖拽对齐与透明度调节，便于开发时微调。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@media_lin
许可证MIT
版本1.0.0
依赖1