[codex] design-to-code asset generation

skills/design-to-code/SKILL.md

@@ -15,6 +15,7 @@ Default behavior:
 - resolve target framework from repo: Vue or Astro
 - normalize section images to target page width before analysis
 - classify media as `background` vs `content image`
+- regenerate missing or unusable reference visuals with `gpt image2` at target size when needed, then treat the result as a regular local asset
 - emit mandatory `Pre-Implementation Brief`
 - wait for user confirmation before writing page code
 - verify result with Playwright section screenshot diff
@@ -127,7 +128,7 @@ For each section:
 - build internal layer stack; see [references/layer-stack-model.md](references/layer-stack-model.md)
 - classify visual media; see [references/media-role-classification.md](references/media-role-classification.md)
 - detect cross-section continuity; see [references/section-boundary-and-cross-section-rules.md](references/section-boundary-and-cross-section-rules.md)
-- identify assets that are original, crop-fallback, CSS-reproducible, or unresolved
+- identify assets that are original, generated, crop-fallback, CSS-reproducible, or unresolved
 
 Scale each section image to canonical page width before making layout judgments. Do not rely on raw image width if it differs from page width.
 
@@ -137,7 +138,7 @@ Every visual asset must be classified by both role and provenance.
 
 Required classifications:
 - role: `background` | `content image` | `icon` | `illustration` | `logo` | `texture` | `decorative overlay`
-- provenance: `provided original` | `project existing` | `crop fallback` | `css reproducible` | `unresolved`
+- provenance: `provided original` | `project existing` | `generated asset` | `crop fallback` | `css reproducible` | `unresolved`
 
 Rules:
 - if a real asset is available, use it; do not silently replace it
@@ -146,8 +147,9 @@ Rules:
 - remote Figma or CDN asset URLs are not allowed in final page code
 - when a Figma-derived image, svg, icon, or illustration is used, download it into local project files first, then reference that file
 - svg assets must be stored as `.svg` files and referenced as files; do not inline raw svg markup into page code
+- if `gpt image2` is used, record the generated asset path, target size, and generation basis explicitly
 - if crop fallback is used, record it explicitly
-- unresolved critical assets are a hard stop
+- critical assets that remain unresolved after original, project existing, and generated asset attempts are a hard stop
 - background visuals should become CSS background layers when appropriate
 - semantic content images should remain `<img>` or `<picture>`
 
@@ -171,15 +173,16 @@ Resolve assets in this order:
 
 1. `provided original`
 2. `project existing`
-3. `crop fallback`
-4. `css reproducible`
-5. `unresolved`
+3. `generated asset`
+4. `crop fallback`
+5. `css reproducible`
+6. `unresolved`
 
 Rules:
 - always choose the highest-fidelity available asset source
 - if moving down the escalation ladder, record the downgrade explicitly
 - do not skip directly to placeholder-like output when a higher rung is available
-- if a critical asset reaches `unresolved`, stop and ask
+- if a critical asset cannot be satisfied by original, project existing, or generated asset paths, stop and ask
 
 ### 4. Emit Mandatory Pre-Implementation Brief
 

skills/design-to-code/references/asset-compression-rules.md

@@ -8,13 +8,15 @@ Use these rules for bitmap asset governance inside `DesignToCode`.
 - `decorative bitmap`
 - `ui/icon-like asset`
 - `crop fallback / temporary asset`
+- `generated asset`
 
 ## Rules
 
 - `critical content image`: prefer `webp`, compress conservatively, exempt explicitly when fidelity loss is visible
 - `decorative bitmap`: prefer `webp`, compress aggressively, replace with CSS when reproducible
 - `ui/icon-like asset`: prefer `svg`, use bitmap only when vector is unavailable or inappropriate
 - `crop fallback / temporary asset`: mark explicitly, keep easy to replace, do not present as a true original
+- `generated asset`: treat as a first-class bitmap asset once saved locally; compress and validate like any other project asset
 
 ## Validation
 

skills/design-to-code/references/failure-handling.md

@@ -8,7 +8,7 @@ Stop unsafe guessing early. Report clearly.
 - page width unresolved
 - required text unreadable and not supplied
 - critical media role ambiguous
-- critical asset missing and crop fallback unusable
+- critical asset missing and cannot be safely regenerated or cropped
 - core layout relationship unclear
 - `Pre-Implementation Brief` not confirmed
 
@@ -40,7 +40,7 @@ State:
 State:
 - original asset unavailable
 - screenshot crop is not isolated enough
-- ask for source asset or permission to approximate
+- ask for source asset, permission to approximate, or permission to regenerate the asset
 
 ## May Continue With Note
 

skills/design-to-code/references/pre-implementation-brief.md

@@ -47,8 +47,9 @@ Emit this before any page code. Wait for user confirmation.
 
 ### `Asset Compression Plan`
 - asset role summary for new or changed bitmap assets
-- which assets should stay original, be optimized, or be replaced with vector/CSS output
+- which assets should stay original, be optimized, be regenerated with `gpt image2`, or be replaced with vector/CSS output
 - fallback asset status
+- generated asset target size and basis, if applicable
 - exemption candidates and reasons
 
 ### `Layout Implementation Plan`