codex-visual-builder-guild

What problem does it solve?

This Skill helps Codex improve visual UI/UX by running a screenshot-driven design loop that finds real rendered issues (layout, hierarchy, responsiveness, and interaction problems) and turns fixes into reusable design rules.

Core Features & Use Cases

• Screenshot-based visual QA loop: build, run, capture screenshots across viewports, inspect with vision, and iterate toward a production-ready screen.
• Responsive and interaction-state discipline: verifies desktop/tablet/mobile plus at least one fluid breakpoint, and targets hover/focus/modal/loading/empty/error coverage when relevant.
• Specialist-style delegation + ruthless verification: routes issues to appropriate lenses, compares before/after, and performs a “Post-Fix Ruthlessness Check” to prevent false improvements and awkward leftovers.
• Reusable rules and contracts: outputs reusable design rules and emphasizes regression guarding and art bible/component-system alignment when patterns should become baselines.

Quick Start

Use codex-visual-builder-guild on this app, then screenshot desktop, tablet, mobile, and one awkward in-between width, inspect with Codex App vision, fix the highest-impact visible issue first, and finish with before/after evidence plus a ruthless post-fix check.