别再手动切图了我做了一个 AI UI 工具一张参考图一个demo一键产出你的生产级UI前言每个开发者都逃不过的切图苦差事作为开发者你一定遇到过这些场景产品经理甩来一张设计稿截图“照这个感觉做个页面”——但只有截图没有源文件想复刻一个好看的 UI里面的图标、插画、背景全都要自己一个个抠图好不容易抠完图文字排版又要重写一遍一套页面下来半天没了。抠图、找素材、对齐风格这些活儿技术含量不高但极度耗时。所以我做了UI-Flow——一个把参考图 → 成品素材整条链路自动化的 AI 流水线工具。一句话概括它的能力上传一张 UI 参考图或只写一句提示词自动生成整套风格统一、透明底、无文字的独立素材直接可用 ZIP 导出。用法一网页全流程适合手动出素材打开 https://ui.xiaozhusho.top 新建项目 → 传参考图可选→ 写提示词 → 点生成等画布出图后一键导出 ZIP。用法二编辑器 Skill适合 AI 编程工作流这是我最推荐的方式。UI-Flow 提供了一个编辑器 Skill让Trae / Claude Code / Cursor里的 AI 直接调用这条流水线并把素材落进你的本地项目、直接改写页面代码。安装只要一句话在项目根目录让编辑器 AI 执行以 Trae 为例# macOS / Linuxmkdir-p.trae/skills/ui-flowcurl-fsSLhttps://ui.xiaozhusho.top/open/skill.md-o.trae/skills/ui-flow/SKILL.md# Windows PowerShellNew-Item-ItemTypeDirectory-Force.trae\skills\ui-flow|Out-Null;iwrhttps://ui.xiaozhusho.top/open/skill.md-OutFile.trae\skills\ui-flow\SKILL.md装好之后在编辑器里对 AI 说“这是设计参考图帮我还原成页面”AI 会自动调流水线生成初稿和素材 → 下载到本地.uipro/design.png和public/assets/ui/→以初稿为基准改写你的页面代码。素材图 代码重排文字这套组合拳下来一个全新风格的页面基本一次成型。【配图 5编辑器里触发 Skill 的对话截图 本地项目改造前后对比】用法三Open API适合集成进自己的系统提供标准 REST APIBearer 认证一键全流程端点curl-XPOST https://ui.xiaozhusho.top/open/v1/pipeline/run\-HAuthorization: Bearer$UIFLOW_API_KEY\-Fprompt深色科技风的仪表盘页面左侧导航\-Fimage/path/to/reference.png一次返回project_id、三个任务状态、每个素材的label 下载 URL、剩余积分。也支持分步接口限流 60 次/分钟。密钥在官网「我的密钥」页自助创建明文只显示一次支持随时吊销。限时试用私信领取关于费用买断制积分包不搞订阅积分包 500¥19.9/ 积分包 2000¥69。一套页面全流程大约消耗5初稿 2拆解 素材数 × 3。以 10 个素材的一套页面为例全流程 37 积分算下来一套页面不到 2 块钱。效果对比ai开发skill优化小程序修改后