AI Product Compiler (V7)
Art → Design → Build once, render everywhere.
Art Concept → Design Scheme → High-Fidelity Design → Assets + Layout IR → HTML (reference runtime, human QA) → React PWA MVP → compile to React Native / Cocos / Godot / Unity / Flutter / PPT.
This is no longer just a UI generator. It is a product compiler: world-view in, production runtimes out.
Core Principles
- Art First — define the world before drawing any screen. Style drift downstream is almost always an Art Concept failure.
- Scheme Before Pixels — convert the world into a concrete design scheme (page map, components, layout rules, imagegen spec) before calling Imagen.
- Fidelity First —
Native > Crop > Repair > Sprite Sheet > Regenerate. Minimize Imagen calls.
- Semantic Layout — anchors / constraints / safe-area, never raw
x,y pixels.
- HTML-First QA — every target platform is first reconstructed as HTML and reviewed by a human against the original. HTML is the Gold Standard.
- Compiler Architecture — HTML / React / RN / Cocos / Godot / Unity / Flutter / PPT are all compiler backends of the same Semantic Layout IR.
The Four Permanent Assets
Versioned long-term as the source of truth:
- Art Concept (
art-concept.md, style-board.png, color-system.json, visual-language.md)
- Design Scheme (
design-system.md, page-map.md, component-library.md, imagegen-spec.md)
- Asset Manifest (transparent assets, background layers, provenance)
- Semantic Layout IR (
layout.json + theme.json)
Runtimes (HTML/React/RN/Cocos/...) are regenerated from these — they are outputs, not sources of truth.
Pipeline
Requirement
│
▼
00 art-concept → art-concept.md, style-board.png, color-system.json, visual-language.md
▼
01 design-scheme → design-system.md, page-map.md, component-library.md, imagegen-spec.md
▼
02 design-imagegen → design.png, design@2x.png, preview.png (high-fidelity design)
▼
03 fidelity-first-asset-extraction → visual_inventory.md, asset_manifest.json, transparent_assets/, background_layers/, .asset.json
▼
04 semantic-layout-builder → layout_tree.md, layout.json, theme.json
▼
05 html-reference-renderer → preview.html, comparison.html
▼
06 html-visual-review → review.md, validation.json ←─ repair loop until human approves
▼
07 react-pwa-generator → React PWA = Reference Runtime + Business MVP
▼
08 runtime-compiler → React Native · Cocos · Godot · Unity · Flutter · PPT
What each phase answers
| Phase |
Question it answers |
| 00 Art Concept |
What does the product look and feel like as a world? |
| 01 Design Scheme |
How is that world translated into a product (pages, components, rules)? |
| 02 High-Fidelity Design |
What is the first real screen of that scheme? |
| 03 Asset Extraction |
How are visuals turned into engineered assets with max fidelity? |
| 04 Semantic Layout |
How does layout work across platforms? |
| 05 HTML Renderer |
Can the design be reconstructed faithfully? |
| 06 HTML QA |
Has a human confirmed the reconstruction? |
| 07 React PWA |
Can the product actually run with logic? |
| 08 Runtime Compiler |
How do we ship to RN / Cocos / Godot / Unity / Flutter / PPT? |
Phase References (read on demand)
| Phase |
File |
Read when |
| 00 Art Concept |
references/00-art-concept.md |
Defining world-view, color system, material, light, icon language, UI principles |
| 01 Design Scheme |
references/01-design-scheme.md |
Turning the art concept into page map, component library, layout rules, imagegen spec |
| 02 Imagen |
references/02-design-imagegen.md |
Generating the high-fidelity mockup from the scheme |
| 03 Asset Extraction |
references/03-fidelity-first-asset-extraction.md |
Splitting mockup into native / crop / sprite-sheet / regenerated assets |
| 04 Layout IR |
references/04-semantic-layout-builder.md |
Producing layout.json (anchor/constraint/adaptive, no raw coords) |
| 05 HTML Renderer |
references/05-html-reference-renderer.md |
Generating preview.html + comparison.html from the IR |
| 06 HTML Review |
references/06-html-visual-review.md |
Running the human QA + repair loop |
| 07 React PWA |
references/07-react-pwa-generator.md |
Generating the MVP runtime (asset binding, layout binding, business logic) |
| 08 Runtime Compiler |
references/08-runtime-compiler.md |
Compiling to RN / Cocos / Godot / Unity / Flutter / PPT |
| Shared utilities |
references/shared.md |
Reconciliation, responsive layout, style library, provenance |
Compiler Mental Model
Art Concept = Language spec
Design Scheme = Module / package design
Design Screenshot = Source code
Asset Manifest = Resource table
Semantic Layout IR = AST
HTML Preview = Unit test (human-verified)
Renderer = Compiler backend
React/Cocos/Godot/PPT = Machine code
Hard Rules
- Never skip Art Concept on a new product — style drift later is 10× more expensive to fix.
- Never call Imagen before
design-scheme.md + imagegen-spec.md exist.
- Never rasterize editable text or hide editable layers behind transparent overlays.
- Never ship a runtime that wasn't first validated in HTML.
- Never let AI hand-write Cocos Prefabs, Unity Scenes, Godot
.tscn, or PPT XML directly — always go IR → compiler backend → runtime script.
- Never use raw
x,y coordinates in the IR. Use anchor + offset + adaptive policy.
- Never call Imagen when a smaller strategy (Native / Crop / Repair / Sprite Sheet) can preserve the original fidelity.
Required Deliverables
art-concept.md
style-board.png
color-system.json
visual-language.md
design-system.md
page-map.md
component-library.md
imagegen-spec.md
design.png
asset_manifest.json
transparent_assets/
background_layers/
layout_tree.md
layout.json
theme.json
preview.html
comparison.html
review.md ← signed off by human
validation.json
Then, in order: React PWA → (after MVP validation) RN / Cocos / Godot / Unity / Flutter / PPT.
QA Gate (must all be true before compiling beyond HTML)
- Art Concept signed off — world-view, palette, material, light, icon language all locked
- Design Scheme signed off — page map and component library match the art concept
- Inventory ↔ Asset Manifest reconciled (zero missing, zero unnamed)
preview.html visually matches design.png (font, radius, shadow, hierarchy, color, spacing, asset, alignment, opacity)- Layout IR uses only semantic primitives (anchor / constraint / auto-layout / safe-area / padding / margin / gap)
- Provenance recorded for every generated asset (source, region, strategy, prompt hash, sha256)
- A human has signed
review.md
1---2name: ai-design-compiler3description: Compile a product requirement into a coherent art world, design scheme, high-fidelity design, engineered assets, semantic layout IR, HTML reference runtime, React PWA MVP, and finally production runtimes (RN / Cocos / Godot / Unity / Flutter / PPT). Use whenever the user wants AI to produce a real product end-to-end, not just a single screen.4---56# AI Product Compiler (V7)78> **Art → Design → Build once, render everywhere.**9> Art Concept → Design Scheme → High-Fidelity Design → Assets + Layout IR → **HTML (reference runtime, human QA)** → React PWA MVP → compile to React Native / Cocos / Godot / Unity / Flutter / PPT.1011This is no longer just a UI generator. It is a **product compiler**: world-view in, production runtimes out.1213## Core Principles14151. **Art First** — define the world before drawing any screen. Style drift downstream is almost always an Art Concept failure.162. **Scheme Before Pixels** — convert the world into a concrete design scheme (page map, components, layout rules, imagegen spec) before calling Imagen.173. **Fidelity First** — `Native > Crop > Repair > Sprite Sheet > Regenerate`. Minimize Imagen calls.184. **Semantic Layout** — anchors / constraints / safe-area, never raw `x,y` pixels.195. **HTML-First QA** — every target platform is first reconstructed as HTML and reviewed by a human against the original. HTML is the **Gold Standard**.206. **Compiler Architecture** — HTML / React / RN / Cocos / Godot / Unity / Flutter / PPT are all **compiler backends** of the same Semantic Layout IR.2122## The Four Permanent Assets2324Versioned long-term as the source of truth:25261. **Art Concept** (`art-concept.md`, `style-board.png`, `color-system.json`, `visual-language.md`)272. **Design Scheme** (`design-system.md`, `page-map.md`, `component-library.md`, `imagegen-spec.md`)283. **Asset Manifest** (transparent assets, background layers, provenance)294. **Semantic Layout IR** (`layout.json` + `theme.json`)3031Runtimes (HTML/React/RN/Cocos/...) are regenerated from these — they are outputs, not sources of truth.3233## Pipeline3435```text36Requirement37 │38 ▼3900 art-concept → art-concept.md, style-board.png, color-system.json, visual-language.md40 ▼4101 design-scheme → design-system.md, page-map.md, component-library.md, imagegen-spec.md42 ▼4302 design-imagegen → design.png, design@2x.png, preview.png (high-fidelity design)44 ▼4503 fidelity-first-asset-extraction → visual_inventory.md, asset_manifest.json, transparent_assets/, background_layers/, .asset.json46 ▼4704 semantic-layout-builder → layout_tree.md, layout.json, theme.json48 ▼4905 html-reference-renderer → preview.html, comparison.html50 ▼5106 html-visual-review → review.md, validation.json ←─ repair loop until human approves52 ▼5307 react-pwa-generator → React PWA = Reference Runtime + Business MVP54 ▼5508 runtime-compiler → React Native · Cocos · Godot · Unity · Flutter · PPT56```5758## What each phase answers5960| Phase | Question it answers |61|-------|---------------------|62| 00 Art Concept | What does the product **look and feel** like as a world? |63| 01 Design Scheme | How is that world **translated into a product** (pages, components, rules)? |64| 02 High-Fidelity Design | What is the first real **screen** of that scheme? |65| 03 Asset Extraction | How are visuals turned into **engineered assets** with max fidelity? |66| 04 Semantic Layout | How does layout work **across platforms**? |67| 05 HTML Renderer | Can the design be **reconstructed** faithfully? |68| 06 HTML QA | Has a human **confirmed** the reconstruction? |69| 07 React PWA | Can the product actually **run** with logic? |70| 08 Runtime Compiler | How do we **ship** to RN / Cocos / Godot / Unity / Flutter / PPT? |7172## Phase References (read on demand)7374| Phase | File | Read when |75|-------|------|-----------|76| 00 Art Concept | `references/00-art-concept.md` | Defining world-view, color system, material, light, icon language, UI principles |77| 01 Design Scheme | `references/01-design-scheme.md` | Turning the art concept into page map, component library, layout rules, imagegen spec |78| 02 Imagen | `references/02-design-imagegen.md` | Generating the high-fidelity mockup from the scheme |79| 03 Asset Extraction | `references/03-fidelity-first-asset-extraction.md` | Splitting mockup into native / crop / sprite-sheet / regenerated assets |80| 04 Layout IR | `references/04-semantic-layout-builder.md` | Producing `layout.json` (anchor/constraint/adaptive, no raw coords) |81| 05 HTML Renderer | `references/05-html-reference-renderer.md` | Generating `preview.html` + `comparison.html` from the IR |82| 06 HTML Review | `references/06-html-visual-review.md` | Running the human QA + repair loop |83| 07 React PWA | `references/07-react-pwa-generator.md` | Generating the MVP runtime (asset binding, layout binding, business logic) |84| 08 Runtime Compiler | `references/08-runtime-compiler.md` | Compiling to RN / Cocos / Godot / Unity / Flutter / PPT |85| Shared utilities | `references/shared.md` | Reconciliation, responsive layout, style library, provenance |8687## Compiler Mental Model8889```text90Art Concept = Language spec91Design Scheme = Module / package design92Design Screenshot = Source code93Asset Manifest = Resource table94Semantic Layout IR = AST95HTML Preview = Unit test (human-verified)96Renderer = Compiler backend97React/Cocos/Godot/PPT = Machine code98```99100## Hard Rules101102- **Never** skip Art Concept on a new product — style drift later is 10× more expensive to fix.103- **Never** call Imagen before `design-scheme.md` + `imagegen-spec.md` exist.104- **Never** rasterize editable text or hide editable layers behind transparent overlays.105- **Never** ship a runtime that wasn't first validated in HTML.106- **Never** let AI hand-write Cocos Prefabs, Unity Scenes, Godot `.tscn`, or PPT XML directly — always go IR → compiler backend → runtime script.107- **Never** use raw `x,y` coordinates in the IR. Use anchor + offset + adaptive policy.108- **Never** call Imagen when a smaller strategy (Native / Crop / Repair / Sprite Sheet) can preserve the original fidelity.109110## Required Deliverables111112```text113art-concept.md114style-board.png115color-system.json116visual-language.md117design-system.md118page-map.md119component-library.md120imagegen-spec.md121design.png122asset_manifest.json123transparent_assets/124background_layers/125layout_tree.md126layout.json127theme.json128preview.html129comparison.html130review.md ← signed off by human131validation.json132```133134Then, in order: React PWA → (after MVP validation) RN / Cocos / Godot / Unity / Flutter / PPT.135136## QA Gate (must all be true before compiling beyond HTML)137138- Art Concept signed off — world-view, palette, material, light, icon language all locked139- Design Scheme signed off — page map and component library match the art concept140- Inventory ↔ Asset Manifest reconciled (zero missing, zero unnamed)141- `preview.html` visually matches `design.png` (font, radius, shadow, hierarchy, color, spacing, asset, alignment, opacity)142- Layout IR uses only semantic primitives (anchor / constraint / auto-layout / safe-area / padding / margin / gap)143- Provenance recorded for every generated asset (source, region, strategy, prompt hash, sha256)144- A human has signed `review.md`
wanghaisheng