UI ImageGen Director

Use this workflow when visual direction is the weak link: the user wants a polished frontend, Codex is producing generic UI, or a generated mockup would give the implementation a stronger target.

This skill composes three activities:

1. Create or refine a UI direction with Image Gen.
2. Translate the selected direction into real frontend code.
3. Verify the rendered result in a browser and iterate visually.

Workflow

1. Inspect the product context before designing:
   • audience and job-to-be-done
   • screen type: dashboard, settings, editor, commerce, landing page, game, etc.
   • existing framework, design system, component library, and constraints
   • whether the page is an operational tool, expressive site, or immersive/game UI