Level 2 - The Assembler

Welcome to Level 2.

The assembler does not start by writing everything at once. The assembler breaks a project into pieces that can be described, built, and tested independently.

Think in Modules

When a project feels too large, stop thinking in pages and start thinking in parts.

• What does the user see first?
• What pieces repeat?
• Which parts need state?
• Which parts only display information?

Good module thinking turns a vague app idea into a set of clear responsibilities. Instead of "build a dashboard," you can describe:

• a header for navigation
• a stats row for metrics
• a chart panel for trends
• a table for recent activity

That makes AI output more accurate because each request is smaller and more specific.

How to Describe a UI to AI

When you prompt AI to build UI, describe the interface as a collection of components, not as one giant paragraph.

A better prompt usually includes:

1. The page goal
2. The major sections
3. The visual style
4. The data each section needs
5. Any interaction rules

For example:

Build a pricing page with a hero section, a three-card pricing grid, and a FAQ accordion. Use a dark zinc theme with lime highlights. Keep the CTA button consistent across all sections.

That is stronger than saying "make a modern pricing page."

Folder Structure in a Next.js Project

Module thinking should also show up in your folders.

A simple structure might look like this:

src/
  app/
    dashboard/
      page.tsx
  components/
    dashboard/
      dashboard-header.tsx
      metrics-grid.tsx
      recent-activity-table.tsx
  lib/
    dashboard.ts

Pages define the route. Components define the pieces. Lib files hold helpers or data logic.

Example Component Breakdown

export default function DashboardPage() {
  return (
    <main>
      <DashboardHeader />
      <MetricsGrid />
      <RecentActivityTable />
    </main>
  );
}

function DashboardHeader() {
  return <header>Team Dashboard</header>;
}

function MetricsGrid() {
  return <section>Metrics</section>;
}

function RecentActivityTable() {
  return <section>Recent Activity</section>;
}

The point is not complexity. The point is separation of responsibility.

When you can break a page into components clearly, you can prompt AI clearly, organize files cleanly, and iterate faster.