解决什么问题 · Problem
设计与代码之间一直缺一份可审计的契约。生成的设计图只是视觉目标——像素与文字都可能不准;直接照图写代码,还原度全凭感觉。
Image2Code 把设计决策全部落进 design-model.yaml 与逐屏 spec:token、组件出处(observed / derived / new)、图标规则、屏幕映射都留档;实现之后必须回拍截图与目标图对比,让「像不像」变成有据可查的验证,而不是口头承诺。对老项目,它默认保留现有视觉语言——现有 UI、路由、组件库是约束,不是可选的灵感。
怎么用 · How to use
装好后,对一个既有项目直接说(README 中的真实 Quick Prompt):
Use $image2code to create a complete UI redesign pack for this
project. Read the repository, capture current screenshots with
realistic data, generate image mockups, review them across rounds,
and save the markdown spec plus final images under docs/image2code.agent 会在 docs/image2code/<时间戳>-<项目>/ 建出完整交付包:manifest.json、design-model.yaml、00-brief 到 06-implementation-plan 的全套文档、生成图与评审记录。之后再说一句「implement the design pack at docs/image2code/<pack>」即进入实施模式,实现后的截图存进 implementation-screenshots/ 做还原度对比;交付前跑 audit_design_pack.py 审计包完整性。
适用场景 · When to use
- 截图 / 设计稿直接转高保真 HTML 原型(Image2HTML 模式)
- 老项目 UI 现代化——保留既有风格,只做分级幅度的改进(polish → 架构重构四档)
- 新产品 UI 概念探索,产出可交接的完整设计包
- 设计包一比一实施与还原度验收
- iPad / iPhone 等原生 App 界面打磨(模拟器截图取证)
开源仓库 github.com/Octo-o-o-o/Image2Code · GitHub 账号 Octo-o-o-o
去获取 →