Part 5

Designing What You're Building

How to describe a piece of software clearly enough that an agent can actually build it. Data shape, layout vocabulary, component vocabulary, design preferences, user roles, API design, all the parts that beginners skip and then can't figure out why their agent's output keeps missing the mark.

Start with section 5.1 →
  1. 5.1

    Data Shape: The Prerequisite To Good Prompts

    The longer treatment of the data-shape concept from 2.5. Without this document in your repo, your prompts are wishes. With it, they're specifications.

  2. 5.2

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

    The standard layout vocabulary so the agent builds what you actually wanted. Top nav, side nav, header, content area, panels, cards, footer.

  3. 5.3

    Component Vocabulary (tabs, Buttons, Modals, Drawers)

    The component-level cheat sheet for describing UI behavior precisely. Buttons, inputs, selects, modals, drawers, toasts, tables, cards, badges.

  4. 5.4

    Design Preferences (radii, Shadows, Fonts, Spacing)

    DEEP-DIVE

    [Deep-dive] The aesthetic decisions that separate "looks like every AI demo" from "looks like a real product." Corner radius, shadows, fonts, spacing.

  5. 5.5

    User Roles And Permissions

    Most apps have at least two kinds of users. Most apps fail to think this through up front. Don't be most apps.

  6. 5.6

    Api Design For Vibe Coders

    DEEP-DIVE

    [Deep-dive] You probably won't write the API. You'll have to describe what it does. Here's the vocabulary.