oil-oil

oil-oil / draw-ui

Public

Claude Code skill: generate UI design mockups with GPT Image 2 via ZenMux

11
2
100% credibility
Found Apr 28, 2026 at 11 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
Python
AI Summary

A skill for AI assistants that creates UI mockup images from text descriptions and provides guidance for converting them into HTML/CSS.

How It Works

1
🔍 Discover draw-ui

You find draw-ui, a handy helper that turns your everyday ideas for app screens into beautiful pictures using your AI assistant.

2
âž• Add to your AI

With one easy step, you add this skill to your AI chat buddy like Claude, unlocking its design powers.

3
đź’­ Describe your page

You simply tell your AI what kind of screen you want, like 'a colorful user dashboard with charts'.

4
Add a guide image?
âś…
Yes, use reference

Share your guide image to lock in consistent navigation or style.

❌
No, create fresh

Let the AI dream up a completely new design from scratch.

5
✨ See the mockup appear

Your AI whips up a high-quality picture of your screen, perfectly sized and styled just like you imagined.

6
🎨 Make it real with code

Use smart tips to build the layout in HTML and CSS, pulling out images for logos or illustrations.

🎉 Perfect UI ready

You have a spot-on screen design and working code that matches your vision beautifully.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 11 to 11 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is draw-ui?

draw-ui is a Python-based Claude Code skill that generates UI design mockups from natural language prompts using GPT Image 2 via the ZenMux API. It solves the pain of sketching UIs manually by producing high-quality images with locked consistency—like matching sidebars from reference screenshots—and offers CLI tools for scripted generation in aspect ratios like 16:9 wide or mobile portrait. Developers get instant mockups plus guidance for reconstructing them into clean HTML/CSS, installable via `npx skills add oil-oil/draw-ui` or git clone for Claude Code free integration.

Why is it gaining traction?

It stands out with reference-frame locking for consistent nav across screens, proven analogy/inventory prompts for realistic outputs, and utilities like image asset prep (trimming, alpha keying) and browser-screenshot comparison against mockups. Unlike generic draw UI AI tools, it plugs into Claude Code CLI or skills protocol seamlessly—think Claude GitHub integration without Copilot pricing hassles—and supports Claude Code vs Code workflows via env-key setup. The manual CLI (`ask_draw.sh --type wide --prompt "dashboard"`) hooks scripters needing quick, repeatable UI prototypes.

Who should use this?

Frontend devs prototyping dashboards or mobile screens in Claude Code environments, UX designers iterating with AI agents like Cursor, or indie hackers mocking SaaS UIs before coding. Ideal for teams using Claude GitHub skills or plugins who want draw UI AI without full Claude Code preis commitments.

Verdict

Grab it if you're in the Claude ecosystem—solid docs and user features punch above its 11 stars and 1.0% credibility score—but treat as experimental due to low adoption and no tests. Worth a Claude Code download for rapid UI ideation, just verify outputs manually.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.