Image2 UI 是 ONDesign 推出的开源 UI 生成工具，配合 OpenAI Codex 将截图、设计参考图或文字想法转化为可编辑、可交互的前端原型。项目提供命令行工具、可恢复的执行流程、图片素材管理和视觉质量检查；实际生成需要在已配置的 Codex 环境中运行。
支持三种使用方式：复刻现有截图、重新设计参考界面，或根据文字需求从零创建。生成结果将文字、按钮、表单和导航保留为前端代码，照片与插画则作为独立素材管理。
The open-source UI generation toolkit for OpenAI Codex.
From a screenshot or an idea to editable, interactive frontend code.
把截图或想法，变成可编辑、可交互的前端界面。
By ONDesign · 产品官网 / Website · Live examples · Quick start · Runtime guide
Image2 UI helps designers and developers turn visual references into working frontend prototypes with OpenAI Codex. It combines a command-line interface, a resumable execution runtime, image-asset tooling and visual quality checks in one open-source project.
ONDesign is the product home, with design references, Design DNA and interactive examples. This repository contains the local generation and verification toolkit. Actual generation runs in a configured Codex environment.
Four examples from the ONDesign case gallery: generated artwork combined with code-rendered controls, navigation and state changes.
|
FuFu Bakery Hand-drawn character art, welcome flow, and bakery menu screens 
|
Plate Play High-color illustrated recipes, craving filters, and saved states 
|
Today Newspaper-inspired reading, headline carousel, and article feed 
|
FitHub Minimal fitness planning with workout photography and weekly goals 
|
Explore the complete UI Case Gallery →
| Workflow | Start with | What happens |
|---|---|---|
| Recreate | A screenshot or reference image | Rebuild its layout, typography and visual details; verify against the original reference. |
| Redesign | A reference and a new product direction | Establish a new visual direction before implementing and checking the interface. |
| Create | A written product brief | Develop a visual direction, then build an editable frontend. |
The output keeps text, buttons, forms and navigation in code. Photos, product images and illustrations remain separate assets.
- Codex executes implementation work. The runtime defaults to the
codexCLI and invokes its execution interface through the agent tool adapter. - Runs can be inspected and resumed. The runtime stores state and an event history so interrupted work can be reconciled and continued.
- Verification is part of the workflow. Audit, comparison and bounded fix loops check generated output against the active reference.
- Multi-agent execution is available. The runtime's scheduler coordinates specialist implementation, review and QA work within the same run lifecycle.
- Image generation is configurable. The asset wrapper supports the project's image-generation channels and writes asset provenance records. See the channel configuration.
You need Node.js 20+, Python 3.10+, an authenticated Codex CLI for actual agent execution, and a configured image-generation channel when your workflow needs generated images. Browser render checks use Playwright. See the runtime guide for environment setup.
Clone the source and inspect the available commands:
git clone https://github.com/zhu-guli326/image2_UI.git image2-ui
cd image2-ui
node scripts/image2-ui --help
node scripts/image2-ui doctorCheck a workflow plan without generating a UI:
mkdir my-ui
node scripts/image2-ui run ./my-ui --mode create --task "A mobile coffee ordering interface with a menu and cart" --dry-run --jsonOnce the required channels are configured, start a real run:
node scripts/image2-ui run ./my-ui --mode recreate --reference ./reference.png --task "Recreate this screen with working navigation"
node scripts/image2-ui inspect ./my-ui --latest --json
node scripts/image2-ui resume ./my-ui --latestReplace ./reference.png with your own image. An inspection reports the run's actual status; a paused or blocked run is not a finished interface. For using the workflow inside an existing Codex session, see the workflow specification.
| Component | Responsibility |
|---|---|
| CLI | Start, resume, inspect, validate and compare UI work. |
| Runtime | Mode-aware lifecycle, saved state, recovery and verification loops. |
| Scheduler | Dependency-aware specialist execution inside a runtime run. |
| Schemas | Contracts for workflow state and output requirements. |
| Asset tools | Repeatable image generation and provenance. |
| Tests | Regression coverage for the CLI, runtime, policies and validation. |
The website and case gallery are maintained in ui_case. This repository includes a Codex-compatible instruction entry alongside its executable runtime and tools.
Image2 UI is MIT-licensed. Contributions can improve reference fidelity, accessibility checks, asset handling, workflow recovery and documentation. See Contributing for the local gates and Changelog for development history.
npm test
npm run doctor
npm run pack:checkDiagnostics depend on your local tools and image channels; resolve missing capabilities before attempting a real generation run.
- ONDesign product website
- Interactive case gallery
- Design DNA · UI vocabulary
- Runtime guide · Workflow specification · Video examples
Maintained by zhu-guli326. Email: juguli326@gmail.com.
MIT License. Image2 UI is an independent open-source project by ONDesign, not an official OpenAI product.