This project offers an AI skill for generating UI design mockups from natural language and reconstructing them into HTML/CSS. It targets users of AI agents like Claude Code and Cursor, automating UI design and front-end code generation, especially when using GPT Image 2 via ZenMux for scripted outputs.

How It Works

The skill generates UI mockups from natural language, using reference images to maintain consistency across screens. It employs "analogy-style" or "inventory-style" prompts for enhanced design quality and handles GPT Image 2 API quirks. For HTML reconstruction, it separates code (HTML/CSS/SVG) from assets (images for logos, illustrations), detailing background removal and sprite sheet generation rules for clean integration.

Quick Start & Requirements

• Installation: npx skills add oil-oil/draw-ui or manual clone to ~/.claude/skills/draw-ui.
• Prerequisites: AI agent supporting skills protocol (Claude Code, Cursor). ZenMux API key required for scripted generation (ZENMUX_API_KEY env var, .env.local, or ~/.config/see/api_key). Python 3 (auto-installs google-genai).
• Usage: Trigger via natural language prompts to the AI agent or use manual shell scripts (scripts/ask_draw.sh) with aspect ratio options (wide, classic, square, portrait) and reference image support.

Highlighted Details

• Generates UI mockups from natural language descriptions.
• Locks navigation/sidebar consistency using reference images.
• Employs "analogy-style" or "inventory-style" prompt techniques.
• Provides a detailed strategy for HTML/CSS reconstruction and asset generation.
• Supports various aspect ratios for different screen types.

Maintenance & Community

No specific details regarding contributors, sponsorships, or community channels were found in the provided README.

Licensing & Compatibility

Licensed under the MIT license, generally permissive for commercial use.

Limitations & Caveats

Functionality relies on external AI services (GPT Image 2) and APIs (ZenMux), requiring API key management and potentially incurring costs. HTML reconstruction effectiveness depends on generated asset quality and adherence to the asset strategy.