skills.rest
oil-oil
oil-oilCOMMUNITY
Explore all skills by this author →
𝕏@I_am_oil_oilGitHub

draw-ui

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

321|59|Updated Apr 24, 2026
Search Tags:#ui design#ui development#html/css#ai design#mockup generation
One-click install
npx skills add https://github.com/oil-oil/draw-ui --skill draw-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: draw-ui
Source: https://github.com/oil-oil/draw-ui/tree/main
Command: npx skills add https://github.com/oil-oil/draw-ui --skill draw-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai, PIL, Pillow, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps generate UI design mockups from natural language descriptions and reconstruct UI screenshots into HTML/CSS, saving time and effort in UI design.

Core Features & Use Cases

  • UI Mockup Generation: Create high-quality UI mockups from text descriptions.
  • Screenshot Reconstruction: Convert UI screenshots into HTML/CSS.
  • Use Case: You can describe the layout of a webpage or app to the skill, and it will generate a mockup that can be used for further development.

Quick Start

Use the draw-ui skill to create a mockup for a product details page, describing the layout in natural language.

Frequently Asked Questions about draw-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate UI design mockups from text descriptions?▼

To generate UI design mockups from text descriptions, you provide natural language layout details to the tool, which then creates high-quality visual mockups for desktop apps, dashboards, or profile screens.

Can I convert a UI screenshot into HTML and CSS code?▼

Yes, you can reconstruct UI screenshots into HTML and CSS code. The tool analyzes the provided screenshot image and translates the visual layout into corresponding functional HTML and CSS markup.

Do I need Python and specific libraries to generate UI mockups?▼

Yes, generating UI mockups requires a Python environment with specific dependencies installed, including the google-genai library and PIL or Pillow for image processing and generation.

What is the best way to create a mockup for a product details page?▼

The best way to create a product details page mockup is to describe the desired layout in natural language, specifying the elements you need, and letting the tool generate the visual mockup for further development.

What types of UI screens can I create using natural language descriptions?▼

You can create various UI screens using natural language descriptions, including desktop application interfaces, data dashboards, and user profile screens, generating mockups ready for development.

Are there limitations when reconstructing complex UI screenshots into HTML/CSS?▼

When reconstructing complex UI screenshots into HTML/CSS, limitations may arise if the image lacks clear visual hierarchy or contains dynamic elements, as the tool translates static layout structures into code.

Related Skills

Explore More Design & Creative Skills→
trungdo9trungdo9
3

ai-multimodal

Process and generate multimedia content using the Google Gemini API.

Community
Advanced
minhtri2710minhtri2710

frontend-design

Design production-grade frontend interfaces with reusable components and distinctive aesthetics.

Community
Basic
ChenYCLChenYCL

canvas-design

Generate posters, flyers, and infographics in PNG and PDF formats using Python graphics libraries.

Community
Intermediate
dasheck0dasheck0
8

ui-ux-research

Generate structured UI/UX design briefs with reference screenshots and ASCII wireframes.

Community
Advanced