Ui Designer

The ui-designer skill empowers AI agents to generate complete, responsive HTML and CSS code for modern web interfaces. It transforms text descriptions into functional layouts featuring flexbox grids, custom color palettes, and interactive elements without requiring manual coding.

When to use it

• Rapidly prototype landing pages or marketing sections based on a brief description.
• Create consistent UI components like navigation bars, cards, or modals for an existing project.
• Generate dark-mode compatible stylesheets automatically from design specifications.
• Build accessible form structures with validation styling and error message placeholders.

Key capabilities

• Generates responsive HTML5 and CSS3 code in a single output.
• Supports modern layout techniques including Flexbox and Grid systems.
• Applies custom color schemes, typography, and spacing variables.
• Creates interactive elements such as hover states and button animations.
• Outputs clean, semantic markup ready for browser deployment.

Example prompts

• "Create a responsive hero section with a call-to-action button using a blue and white color scheme."
• "Generate a card layout for displaying product reviews with star ratings and user avatars."
• "Build a navigation bar that collapses into a hamburger menu on mobile devices."

Tips & gotchas

Ensure your text prompts include specific design constraints (e.g., "use sans-serif fonts" or "max-width: 1200px") to guide the output style. While the skill produces valid code, complex JavaScript interactions may require additional refinement or separate implementation steps.