ui-prototype

Generate visual mockups and wireframes from textual descriptions.

7|2|Updated Jan 28, 2026
One-click install
npx skills add https://github.com/LuisSambrano/antigravity-config --skill ui-prototype-luissambrano
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-prototype
Source: https://github.com/LuisSambrano/antigravity-config/tree/main/skills/3-web/ui-prototype
Command: npx skills add https://github.com/LuisSambrano/antigravity-config --skill ui-prototype-luissambrano

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the UI/UX design process by enabling rapid visualization and iteration of mockups and wireframes before any code is written, preventing costly design-to-code discrepancies.

Core Features & Use Cases

  • Visual Mockup Generation: Create detailed visual representations of user interfaces based on textual descriptions.
  • Iterative Design: Refine and update mockups based on feedback through subsequent image generation.
  • Design Token Extraction: Identify and define key design elements like colors, spacing, and typography from approved mockups.
  • Use Case: A product manager wants to see a new dashboard layout. They describe the desired elements, colors, and structure, and the Skill generates a visual mockup. After feedback, the mockup is refined, and then design tokens are extracted for the development team.

Quick Start

Use the ui-prototype skill to generate an image of a login page with a minimalist design.

Frequently Asked Questions about ui-prototype

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

FAQPage Schema
How do I generate a visual mockup from a text description before coding?

To generate a visual mockup from a text description, you describe the desired UI elements, colors, and structure. The tool then creates a visual representation of the user interface, allowing you to iterate on the design before writing any code.

What is design token extraction from a UI wireframe?

Design token extraction from a UI wireframe is the process of identifying key design elements like colors, spacing, and typography from an approved visual mockup. These tokens are then defined for the front-end development team to use.

Can I iterate on a UI prototype after the initial mockup is generated?

Yes, you can iterate on a UI prototype after the initial mockup is generated. You provide feedback on the visual representation, and subsequent image generation refines and updates the mockup to match your revised requirements.

Does this approach support both web and application interface designs?

Yes, this approach supports both web and application interface designs. It is applicable whenever users request visual designs, mockups, or prototypes for any digital interface, generating visual mockups using an image generation tool.

What's the best way to visualize a dashboard layout before development?

The best way to visualize a dashboard layout before development is to describe the desired elements, colors, and structure to generate a visual mockup. After providing feedback to refine the mockup, you can extract design tokens for the development team.