Describing Interfaces Accurately (top Menu, Side Menu, Panels)

A user interface is a tree of components. Describing one well means naming the components, their relationships, and their behavior in a vocabulary the agent recognizes.

The standard layout vocabulary:

TOP NAV / TOP MENU. The horizontal bar across the top of the page. Usually contains the logo, top-level navigation links, and a user menu on the right. Persistent across pages.

SIDE NAV / SIDEBAR. The vertical bar on the left (sometimes right). Contains secondary navigation. Often collapsible. Often has icons next to text labels.

HEADER. The top section of a single page (below the top nav). Usually contains the page title and primary actions for that page.

CONTENT AREA / MAIN PANEL. The big middle section where the actual content lives.

PANELS. Subdivisions within the content area. A dashboard might have 4 panels: a metrics panel, a chart panel, a table panel, an activity feed panel.

CARDS. Smaller container boxes used to group related content. A dashboard panel might contain 6 cards.

FOOTER. The bottom of the page. Usually links, copyright, secondary info. Often unused on internal tools.

A good interface description:

"Build a dashboard layout with:

• Top nav: logo on the left, page title in the center, user menu on the right.
• Side nav: collapsible, with icon-and-text links for Dashboard, Customers, Orders, Reports, Settings.
• Main content area divided into 3 panels:
  • Top panel (full width): 4 metric cards showing today's revenue, today's orders, week-over-week change, month-to-date.
  • Middle-left panel: line chart of revenue over the last 30 days.
  • Middle-right panel: bar chart of top 10 products by revenue this week.
  • Bottom panel: paginated table of the most recent 20 orders with columns Order ID, Customer, Total, Status, Date.
• No footer."

The agent reads this and produces a layout that matches. The vocabulary makes the difference.

For the actual implementation: Svelte and React are the two frameworks agents handle best (lots of training data). Tailwind CSS is the styling language they handle best. shadcn/ui is the component library they handle best for React; skeleton/melt-ui or daisyUI is the equivalent for Svelte.

The recommendation: use this stack unless you have a specific reason not to. Telling an agent "build this in React with Tailwind and shadcn/ui" produces dramatically better output than telling it "build this in [obscure framework]," because the training data is uneven.