/design-ui

Please help me design and visualize a UI component or page layout.

What You'll Need to Provide

1. What are you designing?

   • Page type (landing page, dashboard, form, etc.)
   • Component type (card, modal, navigation, etc.)
   • Feature or functionality

2. Target Platform

   • Web (desktop/mobile)
   • Mobile app (iOS/Android)
   • Desktop application
   • Tablet

3. Design Fidelity

   • Low-fidelity wireframe (structure only)
   • Medium-fidelity (with some styling details)
   • High-fidelity prototype (production-ready code)

4. Requirements & Constraints

   • Must-have features
   • User flows
   • Brand guidelines
   • Accessibility requirements

What You'll Get

Based on your inputs, I will:

1. Create ASCII Wireframes showing the layout structure
2. Generate HTML/CSS Code for the design
3. Provide Multiple Variants (desktop, mobile, tablet)
4. Include Accessibility Features (WCAG 2.1 AA compliance)
5. Add Documentation explaining design decisions
6. Suggest Improvements based on best practices

Example Request

"I need a dashboard for an analytics application. It should show:

• 4 key metrics at the top (total users, revenue, growth rate, conversion)
• A line chart showing revenue over time
• A recent activity feed on the right
• Sidebar navigation on the left

Target platform: Web (desktop and mobile responsive) Fidelity: High-fidelity with production-ready code Must integrate with our design-tokens for theming"

Process

I will:

1. Ask clarifying questions about your requirements
2. Create wireframes showing the layout structure
3. Generate HTML/CSS/TypeScript code with full Swagger documentation
4. Provide responsive variants for different screen sizes
5. Include accessibility features and ARIA attributes
6. Suggest design improvements and alternatives
7. Integrate with existing design systems (design-tokens, theme-system)

Let's start! What would you like to design?