oil-oil/draw-ui

What it solves

draw-ui provides a specialized UI design skill for AI agents, bridging the gap between abstract page requirements and concrete visual designs or functional code. It solves the problem of AI-generated interfaces being generic or visually disconnected from business needs by enforcing a structured process of requirement confirmation and reference-based generation.

How it works

The tool operates in two primary modes:

1. Design Generation: It transforms text requirements into UI design drafts. The agent first confirms the page's core function, available reference screenshots, and fixed areas (like navigation bars). It uses two prompting strategies: "Analogy" for creative directions and "Checklist" for precise business data. It can use reference images to maintain style consistency or lock specific layout frames.
2. Code Reconstruction: It converts design drafts or screenshots into runnable HTML/CSS or WeChat Mini Program pages. It separates the layout (handled by code) from complex visual assets (handled by image generation/extraction), then iteratively compares the resulting page against the original design to refine the output.

Who it’s for

• AI Agent users who want to automate the creation of UI mockups or prototypes.
• Developers looking to quickly convert design screenshots into functional frontend code (HTML/CSS or WeChat Mini Programs).
• Product Designers who need to rapidly explore different UI directions using AI.

Highlights

• Reference-Driven Design: Supports "frame-locking" to keep navigation/sidebars consistent while regenerating content areas.
• Multi-Platform Output: Generates both standard web code (HTML/CSS) and WeChat Mini Program specific code (WXML/WXSS).
• Asset Separation: Intelligently splits a page into CSS-driven layout and standalone image assets to avoid blurry text or artifacts.
• Iterative Refinement: Uses a screenshot-and-compare workflow to ensure the final code matches the original design pixels.