skills.rest
dungle-scrubs
dungle-scrubsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mockup

Generate UI mockups and design images from prompts using Gemini Nano Banana Pro.

Updated Aug 27, 2026
Search Tags:#iteration#UI design#image-generation#style-guidance#mockup#reference-image
One-click install
npx skills add https://github.com/dungle-scrubs/agent-config --skill mockup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup
Source: https://github.com/dungle-scrubs/agent-config/tree/main/stow/shared/skills/mockup
Command: npx skills add https://github.com/dungle-scrubs/agent-config --skill mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill generates UI mockups and design images using Gemini Nano Banana Pro, enabling rapid visual concepts from descriptive prompts and optional reference images for style guidance.

Core Features & Use Cases

  • Prompt-driven mockups: Create UI layouts, dashboards, and app interfaces from detailed text prompts.
  • Style-guided design: Use a reference image to control look, feel, and composition across iterations (supports up to 14 references).
  • Iterative refinement: Produce multiple variants and progressively refine prompts for the final design.

Quick Start

Provide a detailed prompt describing the UI you want, optionally attach a reference image path to guide the style.

Frequently Asked Questions about mockup

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

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

You can generate UI mockups by providing a detailed text prompt describing the dashboard, login screen, landing page, or mobile interface you need. The skill uses Gemini Nano Banana Pro to create visual concepts directly from your descriptive text input.

Can I use reference images to guide UI design style?▼

Yes, you can attach up to 14 reference images to guide the style, look, feel, and composition of your UI design. This allows for style-guided mockup generation and consistent design iterations across multiple variants.

What types of UI design mockups can I create?▼

You can create various UI mockups including dashboards, login screens, landing pages, and mobile app interfaces. The tool supports prompt-driven generation of these layouts with optional iterative refinement for final designs.

Do I need a specific image-generation tool to create mockups?▼

Yes, this skill requires the Gemini image-generation tool accessed via the tool-proxy using the gemini-3-pro-image-preview model. It handles the image generation process and automatically saves outputs to your designated output directory.

How do I iteratively refine my UI mockup designs?▼

You can iteratively refine UI mockups by progressively adjusting your text prompts and generating multiple variants. Using reference images alongside prompt adjustments helps control the look and feel throughout the design iteration process.

Does this skill support mobile interface design?▼

Yes, mobile interface design is fully supported alongside dashboards, login screens, and landing pages. You can generate mobile UI mockups using detailed text prompts and optionally attach reference images to guide the visual style.

Related Skills

Explore More Design & Creative Skills→
openbotxopenbotx
88

image-generation

Generate images from text prompts with configurable aspect ratios and reference inputs.

Official
Intermediate
LuisSambranoLuisSambrano
7

ui-prototype

Generate visual mockups and wireframes from textual descriptions.

Community
Basic
profmikegreeneprofmikegreene
1

ux-prototyping

Design and prototype user interfaces and dashboards for usability testing.

Community
Intermediate
samhvw8samhvw8
10

aesthetic

Analyze design inspiration and implement visual design principles for UI aesthetics.

Community
Advanced