UI Component Layout Prompts

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: white or glassmorphism (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

---