skills.rest
oil-oiloil-oilCommunity·1 Agent Skills Included

draw-ui

UI mockup generation and screenshot-to-code page reconstruction

Generates complete UI design mockups from plain page descriptions, with or without reference screenshots. Rebuilds design drafts and app screenshots into working HTML/CSS, React, Vue, or WeChat Mini Program pages. Eliminates guesswork in prompting, manual asset cropping, and pixel-by-pixel visual comparison work. Includes scripts for image generation, mockup comparison, and step-by-step reconstruction workflows.
321|59
↗
npx skills add oil-oil/draw-ui --all -g -y

All Skills in This Repository (1)

Pure Emerald Level Indicators
📦 In Repo
oil-oiloil-oil

draw-ui

Generate UI design mockups and reconstruct screenshots into HTML/CSS from natural language descriptions.

Community
Intermediate

Frequently Asked Questions

FAQPage Schema
How to install draw-ui?▼

Run `npx skills add oil-oil/draw-ui --all -g -y` in your terminal to install it globally for your agent.

How to turn a screenshot into HTML or a Mini Program page?▼

Provide the screenshot and describe which regions must stay unchanged. The skill splits the page into code and image assets, builds the layout, then compares screenshots against the original until they match.

Can draw-ui design a page from scratch?▼

Yes. Describe the page's purpose and real content, and it generates a full UI mockup. You can also supply a reference screenshot to lock the navigation or overall style.

Does draw-ui work with React, Vue, or WeChat Mini Programs?▼

Yes. It rebuilds interfaces directly inside existing TypeScript, React, Next.js, Vue, Svelte, Electron, or Tauri projects, and can output native WXML/WXSS for WeChat Mini Programs.

Do I need design or coding skills to use draw-ui?▼

No. You describe the page in plain language and your agent handles prompt writing, image generation, asset preparation, and code reconstruction.

Related Repositories in Design & Creative

View All in Design & Creative→
nextlevelbuildernextlevelbuilder
123.5k

ui-ux-pro-max-skill

AI design intelligence for professional UI, brands, and presentations

Official📦 13 Skills
shadcn-uishadcn-ui
122.7k

ui

Build and customize beautiful React component libraries with AI

Official📦 2 Skills
nexu-ionexu-io
93.2k

open-design

Open-source AI design studio for decks, prototypes, images, and video

Official📦 394 Skills