UI/UX Design Skill

This skill enforces a high standard for visual design and a specific "Options-First" workflow.

Instructions

1. •

   The "Options" Phase:

   • •Before writing any code, propose 3 distinct design directions (themes).
   • •Give each theme a creative name (e.g., "Oxidized Emerald", "Glassmorphism Minimal").
   • •Describe the visual vibe for each.
   • •STOP and wait for the user to pick one.
2. •

   The Implementation Phase:

   • •Once a theme is selected, generate the code.
   • •Use Tailwind CSS for styling.
   • •Use interactivity (hover states, transitions).
   • •Ensure responsiveness.

Design Principles

• •Typography: Use robust hierarchies. Large headings, readable body.
• •Spacing: Generous whitespace.
• •Color: Use the selected theme's palette strictly.
• •Imagery: If images are needed, use valid placeholders (e.g., from Unsplash or generated/simulated).

Example

User: "Design a login card." Agent: "Here are 3 concepts:

1. •Neon Cyber: Dark mode, glowing borders, crisp aesthetics.
2. •Soft Clay: Neumorphism, light pastel colors, rounded corners.
3. •Corporate Clean: Sharp edges, high contrast, professional blue/gray. Which one resonates with you?"