2558497967long-droid/ai-product-ui-workflow

AI Product UI Workflow is a Codex skill aimed at product managers, UI designers, and independent developers, built to carry a product idea through a series of defined stages until it becomes deliverable UI assets. Rather than a single do everything prompt, it is a repeatable process: a product idea becomes a written PRD, then a black and white low fidelity prototype, then a high fidelity main visual design, then an optional visual style guide and character or mascot specification, and finally full page UI designs. The core idea behind the workflow is to reduce uncertainty in stages instead of asking an AI model to jump straight to a finished UI. First the idea is organized into a PRD that defines the users, scenarios, pages, and flows. Next a black and white HTML prototype is generated so the page structure can be confirmed before anyone thinks about visual style. Only after the user approves the structure does the process move to visual design, where the black and white prototype is combined with a style reference image so the AI can apply a visual style while keeping the confirmed page structure intact. Finally, a design specification is extracted from the chosen visual direction and used to generate the complete set of pages. An optional module produces a character or mascot specification, but the README is explicit that this should only run if the product genuinely includes characters, mascots, or an illustration system, or if the user directly asks for it. The skill can also package the whole workflow into tutorial scripts for people teaching or demonstrating the process. Installing it means cloning the repository into the Codex skills folder, either over HTTPS or SSH, then restarting Codex so it picks up the skill. Users invoke it in Codex with a plain instruction naming the skill and describing their product idea, and can also ask it to run just one stage at a time, such as generating only the black and white prototype from an existing PRD. The repository suggests organizing real project output into numbered folders for each stage, from source material through PRD, wireframe, visual direction, specs, final UI, and handoff. A public prompt template file is included for anyone building tutorials around the workflow. The README notes that no open source license has been chosen yet, so anyone wanting to reuse or redistribute it publicly should confirm permission with the author first.