Every interface is built from a handful of recurring components. Learning to describe each one precisely means you stop getting generic placeholders and start getting production-quality UI blocks.
Modal Dialogs
Modals interrupt the user to surface important content or require a decision.
Create a modal dialog with:
- Header: title text and a close button (×) aligned right
- Body: scrollable content area with 24px padding
- Footer: Cancel button (secondary style) and Confirm button (primary style, right-aligned)
- Background: semi-transparent overlay (rgba(0,0,0,0.5))
- Entrance: subtle fade-in + scale animation (150ms)
On mobile: full-width display with no horizontal margins. Stack footer buttons vertically.Variations to specify:
- Destructive confirmation modal (red Confirm button)
- Form modal (input fields inside the body)
- Image/media lightbox modal
Action Bars and Toolbars
Action bars sit at the top or bottom of a content area and hold tools or primary actions.
Design an action bar with:
- Left side: formatting tool buttons (Bold, Italic, Link) with tooltips on hover
- Center: a divider separating tool groups
- Right side: primary action button (Save) and secondary button (Cancel)
On mobile: collapse less-used tools into a "More" menu button.
Make it sticky to the top of the content area.Top Navigation Bars
The top nav is the most visible structural element of any web interface.
Create a top navigation bar with:
- Left: logo (32px height)
- Center: navigation links (Home, Features, Pricing, Docs)
- Right: user avatar with a dropdown showing Profile, Settings, Sign Out
Make it fixed at the top of the viewport with a subtle box-shadow below.
On mobile: hide navigation links behind a hamburger icon (☰). Keep the logo and user avatar visible.Specifics that improve output:
background: whiteorglassmorphism(specify)- Active link indicator (underline, dot, or background highlight)
- Whether the bar is transparent on the hero and turns opaque on scroll
Sidebars
Sidebars hold secondary navigation or settings without removing focus from the main content.
Design a collapsible sidebar (240px wide when expanded) with:
- Top: logo or app name
- Middle: vertical navigation links with icons and labels. Highlight the active item.
- Bottom: user profile thumbnail, name, and a Settings link
On mobile: slide in from the left as a drawer overlay when a menu button is clicked.
Collapsed state: show icons only (no labels, 64px wide).Inspector Panels
Inspector panels live on the right side of editor-style interfaces and expose configurable properties.
Create an inspector panel for a design tool with:
- Top: search input to filter properties
- Collapsible sections: Spacing, Typography, Colors, Effects
- Each section: form controls appropriate to the property (number inputs, dropdowns, color pickers)
- A toggle button to expand/collapse the entire panel
Width: 280px on desktop. On mobile: slide up as a bottom sheet.Footers
Footers anchor the page and hold navigation, legal, and contact information.
Design a footer with a 4-column layout:
- Column 1: company logo, 2-line tagline, and social media icons
- Columns 2–3: navigation link groups with section headings
- Column 4: newsletter signup (email input + Subscribe button)
Bottom row: copyright notice and legal links (Privacy, Terms) in a smaller font.
On mobile: collapse to a single column with appropriate spacing between sections.Component Best Practices Summary
| Component | Must specify |
|---|---|
| Modal | Overlay opacity, animation type, mobile stacking |
| Action bar | Button alignment, sticky behavior, mobile collapse |
| Navigation | Active state, scroll behavior, mobile hamburger |
| Sidebar | Collapsed state, mobile drawer behavior |
| Inspector | Section collapsibility, input control types |
| Footer | Column count, mobile stacking order |
Accessibility Checklist for Components
When prompting for any interactive component, include these requirements:
Ensure the component is accessible:
- All interactive elements have visible focus styles
- Minimum touch target size of 44×44px on mobile
- Sufficient color contrast (4.5:1 for text)
- Close buttons and icon-only buttons have aria-label attributes
- Modal traps focus while open and returns focus on close