ui-design

What it does

This skill allows you to generate basic user interface (UI) designs directly within a single HTML file. It's intended for rapid prototyping, exploring different visual layouts, and gaining initial inspiration for UI development. The generated code provides a starting point that can be further customized and integrated into larger projects.

When to use it

• Quick Mockups: Generate a basic layout for a landing page or app screen quickly without needing full design software.
• UI Exploration: Experiment with different arrangement of elements (buttons, text fields, images) to find the best visual flow.
• Inspiration Gathering: Get initial ideas for UI styles and component designs before creating more complex solutions.
• Simple Prototypes: Create a functional prototype to demonstrate basic interaction flows.

Key capabilities

• Generates HTML code for UI elements.
• Supports layout exploration within a single HTML file.
• Provides inspiration for UI design.

Example prompts

• "Create a simple login form with username and password fields."
• "Design a landing page with an image, headline, and call-to-action button."
• "Generate a basic product listing layout with images and descriptions."

Tips & gotchas

• The generated HTML is intended as a starting point; further styling (CSS) and functionality (JavaScript) will likely be required.
• This skill focuses on the structural design of the UI, not detailed visual aesthetics or complex interactions.