# The Density Build Method

AI-driven product development in twelve phases across Plan, Build, Ship. Twenty eight days of focused work, refined across a decade of mid market engineering.

<style>
  /* TOC */
  .method-toc {
    background: var(--paper-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
  }
  .method-toc-inner {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .toc-link {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid transparent;
    transition: all 0.2s;
    text-decoration: none;
  }
  .toc-link:hover {
    color: var(--red);
    border-color: var(--red);
    background: var(--white);
  }
  .toc-link.plan { color: #2a7a8a; }
  .toc-link.build { color: var(--red); }
  .toc-link.ship { color: #8a2a6e; }

  /* OPTIONS · before / after */
  .options-section { padding: 100px 0; border-bottom: 1px solid var(--line); }
  .options-header { text-align: center; max-width: 760px; margin: 0 auto 56px; }
  .options-header .section-eyebrow { justify-content: center; display: inline-flex; }
  .options-header h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 14px 0 16px;
  }
  .options-header h2 em { color: var(--red); font-style: italic; }
  .options-header p { color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
  .options-stack { max-width: 1180px; margin: 0 auto; }
  .options-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 14px;
  }
  .options-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 36px; }
  .options-row.after { grid-template-columns: 1fr 1fr 1fr; }
  .opt-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--ink-faint);
    border-radius: 8px;
    padding: 28px 32px;
  }
  .opt-card.new { border-left-color: var(--red); background: linear-gradient(180deg, rgba(153,27,27,0.06) 0%, var(--white) 60%); }
  .opt-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 12px;
  }
  .opt-card.new .opt-tag { color: var(--red); }
  .opt-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.015em;
  }
  .opt-speed {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 14px;
  }
  .opt-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
  .options-close {
    text-align: center;
    font-size: 16px;
    color: var(--ink-soft);
    margin-top: 8px;
  }
  .options-close em { color: var(--red); font-style: italic; font-weight: 600; }

  /* PHASE SECTIONS */
  .phase-section { padding: 100px 0; border-bottom: 1px solid var(--line); }
  .phase-section.alt { background: var(--paper-soft); }
  .phase-header {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 32px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto 48px;
  }
  .phase-number-large {
    width: 80px;
    height: 80px;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
  }
  .phase-number-large.plan { background: #2a7a8a; }
  .phase-number-large.build { background: var(--red); }
  .phase-number-large.ship { background: #8a2a6e; }
  .phase-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 12px;
  }
  .phase-header h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.025em;
    margin: 0 0 16px;
  }
  .phase-header h2 .accent { color: var(--red); }
  .phase-header .phase-lede {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-soft);
    font-weight: 300;
  }

  .subphase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .subphase-grid.three { grid-template-columns: repeat(3, 1fr); }
  .subphase-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px 28px 24px;
    position: relative;
  }
  .phase-section.alt .subphase-card { background: var(--paper); }
  .subphase-card .num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .subphase-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.015em;
  }
  .subphase-card .dur {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .subphase-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
  }

  /* PRDs callout */
  .prds-section { padding: 120px 0; background: var(--ink); color: var(--white); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
  .prds-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(153, 27, 27, 0.18) 0%, transparent 70%);
    pointer-events: none;
  }
  .prds-section .container > div {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .prds-section h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.05;
    color: var(--white);
    margin-bottom: 28px;
    letter-spacing: -0.03em;
  }
  .prds-section h2 em { color: var(--red); font-style: italic; }
  .prds-section p {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255,255,255,0.78);
    margin: 0 auto 18px;
    max-width: 720px;
    text-align: left;
  }
  .prds-section p:first-of-type {
    text-align: center;
    font-size: 20px;
    color: var(--white);
    margin-bottom: 36px;
    max-width: 640px;
  }
  .prds-section p strong { color: var(--white); font-weight: 600; }

  /* Time expectations */
  .time-section { padding: 100px 0; border-bottom: 1px solid var(--line); }
  .time-header { text-align: center; max-width: 760px; margin: 0 auto 56px; }
  .time-header h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 14px 0 16px;
  }
  .time-header h2 em { color: var(--red); font-style: italic; }
  .time-header p { color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
  .time-callout {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 6px solid var(--red);
    border-radius: 12px;
    padding: 40px 48px;
  }
  .time-callout-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 14px;
  }
  .time-callout h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
  }
  .time-callout p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 14px;
  }
  .time-callout p:last-child { margin-bottom: 0; }
  .time-callout strong { color: var(--ink); }

  /* CTA */
  .method-cta { padding: 120px 0; background: var(--black); color: var(--white); text-align: center; position: relative; overflow: hidden; }
  .method-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(153, 27, 27, 0.1) 0%, transparent 60%);
    pointer-events: none;
  }
  .method-cta .container { position: relative; z-index: 2; }
  .method-cta h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 4.8vw, 60px);
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 22px;
    letter-spacing: -0.025em;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .method-cta h2 em { color: var(--red); font-style: italic; }
  .method-cta p {
    font-size: 18px;
    color: rgba(255,255,255,0.78);
    max-width: 580px;
    margin: 0 auto 36px;
    line-height: 1.55;
    font-weight: 300;
  }

  /* Hero */
  .page-hero { padding: 120px 0 80px; }
  .page-hero .breadcrumb {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 28px;
  }
  .page-hero .breadcrumb a { color: var(--ink-muted); text-decoration: none; }
  .page-hero .breadcrumb a:hover { color: var(--red); }
  .page-hero .breadcrumb span { color: var(--ink-faint); margin: 0 12px; }
  .page-hero h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(48px, 6vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: 24px;
    max-width: 980px;
  }
  .page-hero h1 .accent { color: var(--red); }
  .page-hero .lede {
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 760px;
    font-weight: 300;
  }
  .page-hero .lede strong { color: var(--ink); font-weight: 600; }

  @media (max-width: 980px) {
    .phase-header { grid-template-columns: 1fr; }
    .subphase-grid, .subphase-grid.three, .options-row, .options-row.after { grid-template-columns: 1fr; }
    .time-callout { padding: 32px 28px; }
  }
</style>

<!-- HERO -->
<section class="page-hero">
  <div class="container">
    <div class="breadcrumb">
      <a href="/">Density Labs</a> <span>/</span> The Density Build Method
    </div>
    <h1>Plan. Build. <span class="accent">Ship.</span></h1>
    <p class="lede"><strong>AI-driven product development in twelve phases.</strong> Twenty eight days of focused work for an experienced team, longer for first timers. This is the operating rhythm behind every AI Implementation we run, refined across a decade of mid market engineering.</p>
  </div>
</section>

<!-- TOC -->
<div class="method-toc">
  <div class="container method-toc-inner">
    <a href="#options" class="toc-link">The new map</a>
    <a href="#plan" class="toc-link plan">Plan · 01 to 03</a>
    <a href="#build" class="toc-link build">Build · 04 to 08</a>
    <a href="#ship" class="toc-link ship">Ship · 09 to 12</a>
    <a href="#prds" class="toc-link">PRDs are everything</a>
    <a href="#time" class="toc-link">Time expectations</a>
  </div>
</div>

<!-- THE OLD MAP IS BROKEN -->
<section class="options-section" id="options">
  <div class="container">
    <div class="options-header">
      <div class="section-eyebrow">When you need a tool that does not exist</div>
      <h2>Three options. <em>The old map is broken.</em></h2>
      <p>For two decades, the choice was buy a SaaS or wait months for engineering. AI changes the middle of that map, and adds a new third option underneath.</p>
    </div>

    <div class="options-stack">
      <div class="options-label">Before · the old map</div>
      <div class="options-row">
        <div class="opt-card">
          <div class="opt-tag">Buy</div>
          <div class="opt-name">SaaS subscription</div>
          <div class="opt-speed">Minutes</div>
          <p>Off the shelf, vendor priced, fits the shape of what someone else thought you needed.</p>
        </div>
        <div class="opt-card">
          <div class="opt-tag">Build</div>
          <div class="opt-name">Traditional coding</div>
          <div class="opt-speed">Months</div>
          <p>Custom, expensive, slow. Quarter long roadmaps that ship after the problem has already moved.</p>
        </div>
      </div>

      <div class="options-label">After · the new map</div>
      <div class="options-row after">
        <div class="opt-card new">
          <div class="opt-tag">Buy</div>
          <div class="opt-name">SaaS subscription</div>
          <div class="opt-speed">Minutes</div>
          <p>Still the right call when an off the shelf tool fits the shape of the problem cleanly.</p>
        </div>
        <div class="opt-card new">
          <div class="opt-tag">Build</div>
          <div class="opt-name">AI-driven build</div>
          <div class="opt-speed">Days</div>
          <p>Custom internal tools, ships in days not months, because the spec writes the system.</p>
        </div>
        <div class="opt-card new">
          <div class="opt-tag">Automate</div>
          <div class="opt-name">Agents with MCP</div>
          <div class="opt-speed">Hours</div>
          <p>Workflow level automation that runs against your own systems and data, in hours.</p>
        </div>
      </div>

      <p class="options-close">The new third option changes everything. <em>You can now build what does not exist.</em></p>
    </div>
  </div>
</section>

<!-- PLAN · PHASES 1 to 3 -->
<section class="phase-section" id="plan">
  <div class="container">
    <div class="phase-header">
      <div class="phase-number-large plan">1</div>
      <div>
        <div class="phase-meta">Movement 01 · Phases 1 to 3 · Spec the product, build the toolkit</div>
        <h2>Plan. <span class="accent">Sharp spec, shippable software.</span></h2>
        <p class="phase-lede">The whole speed advantage of AI driven build collapses if the brief is fuzzy. The Plan movement is short by design, but it is where ninety percent of the engineering decisions actually happen. Skip it and you debug your spec in production.</p>
      </div>
    </div>

    <div class="subphase-grid three">
      <div class="subphase-card">
        <div class="num">01</div>
        <h3>Ideation &amp; validation</h3>
        <div class="dur">1 to 2 days</div>
        <p>Problem framing, user interviews if needed, kill criteria. We name the smallest version of the product that proves the bet before we touch a tool.</p>
      </div>
      <div class="subphase-card">
        <div class="num">02</div>
        <h3>Planning &amp; PRDs</h3>
        <div class="dur">4 to 5 days</div>
        <p>Sharp written PRDs per surface, edge cases listed, acceptance criteria explicit, success metrics defined. This is the meatiest phase of Plan because every later phase reads from it. Fuzzy here means fuzzy everywhere, so we take the time to make the contract real before any code is written.</p>
      </div>
      <div class="subphase-card">
        <div class="num">03</div>
        <h3>Design system</h3>
        <div class="dur">~half day</div>
        <p>Tokens, type, components, layout primitives. Half a day, not two weeks, because we are codifying constraints for the AI build, not redesigning the wheel.</p>
      </div>
    </div>
  </div>
</section>

<!-- BUILD · PHASES 4 to 8 -->
<section class="phase-section alt" id="build">
  <div class="container">
    <div class="phase-header">
      <div class="phase-number-large build">2</div>
      <div>
        <div class="phase-meta">Movement 02 · Phases 4 to 8 · Make the engine, connect it, polish it</div>
        <h2>Build. <span class="accent">Days, not months.</span></h2>
        <p class="phase-lede">With a sharp spec and a tight design system, the actual code is the easy part. Five phases, roughly two weeks of focused work. The order is deliberate: frontend first so the spec proves itself in pixels before backend complexity lands.</p>
      </div>
    </div>

    <div class="subphase-grid three">
      <div class="subphase-card">
        <div class="num">04</div>
        <h3>Frontend build</h3>
        <div class="dur">6 to 8 days</div>
        <p>The biggest single phase. We build the interface against fixtures first so the PRD proves itself before backend work begins.</p>
      </div>
      <div class="subphase-card">
        <div class="num">05</div>
        <h3>Backend</h3>
        <div class="dur">1 to 2 days</div>
        <p>Endpoints, schema, jobs. Short because the contract was already nailed down in the PRD and exercised in the frontend.</p>
      </div>
      <div class="subphase-card">
        <div class="num">06</div>
        <h3>Wireup</h3>
        <div class="dur">~1 day</div>
        <p>Replace fixtures with real endpoints, integrate auth, plug in third party APIs. Where most build phases bog down. Ours doesn't because the contract held.</p>
      </div>
      <div class="subphase-card">
        <div class="num">07</div>
        <h3>Debugging</h3>
        <div class="dur">2 to 4 days</div>
        <p>The honest day. Real users, real edge cases, real timing bugs. We budget for it because pretending it isn't there is how schedules slip.</p>
      </div>
      <div class="subphase-card">
        <div class="num">08</div>
        <h3>Polishing</h3>
        <div class="dur">1 to 3 days</div>
        <p>Microcopy, empty states, error states, loading states, motion. The difference between something that ships and something people actually use.</p>
      </div>
    </div>
  </div>
</section>

<!-- SHIP · PHASES 9 to 12 -->
<section class="phase-section" id="ship">
  <div class="container">
    <div class="phase-header">
      <div class="phase-number-large ship">3</div>
      <div>
        <div class="phase-meta">Movement 03 · Phases 9 to 12 · Harden it, get it live, keep it alive</div>
        <h2>Ship. <span class="accent">Live, hardened, maintained.</span></h2>
        <p class="phase-lede">Shipping is not deployment. It is hardening, refactor, deploy, and the maintenance posture that starts the day after launch. Most teams treat phase 11 as the finish line. We treat it as the start of phase 12.</p>
      </div>
    </div>

    <div class="subphase-grid">
      <div class="subphase-card">
        <div class="num">09</div>
        <h3>Hardening</h3>
        <div class="dur">~1 day</div>
        <p>Security pass, rate limits, input validation, secrets audit, observability. The unglamorous day that prevents the glamorous incident.</p>
      </div>
      <div class="subphase-card">
        <div class="num">10</div>
        <h3>Refactor + final debug</h3>
        <div class="dur">1 to 3 days</div>
        <p>The last pass at the parts you knew you'd come back to. Now the spec is final, the code can be made coherent rather than just correct.</p>
      </div>
      <div class="subphase-card">
        <div class="num">11</div>
        <h3>Deployment</h3>
        <div class="dur">3 to 4 days</div>
        <p>Infra, CI, staging, prod, DNS, observability dashboards, rollback plan. Boring on purpose. The boring part is what stays up at 3am.</p>
      </div>
      <div class="subphase-card">
        <div class="num">12</div>
        <h3>Maintenance</h3>
        <div class="dur">forever</div>
        <p>Patches, dependency drift, schema migrations, on call. The phase no one wants to talk about, which is exactly why it kills more products than any other.</p>
      </div>
    </div>
  </div>
</section>

<!-- PRDs ARE EVERYTHING -->
<section class="prds-section" id="prds">
  <div class="container">
    <div>
      <h2>PRDs are <em>everything</em>.</h2>
      <p><strong>Fuzzy PRD, fuzzy software. Sharp PRD, shippable software.</strong></p>
      <p>AI driven build only collapses months into days if the brief is crisp. A team of agents will move very fast in whatever direction you point them. The point of phases 1 to 3 is to point them at the right thing before a single line of code is written.</p>
      <p>This is where most teams trying to ride the AI wave stall. It is not the tooling, the model, or the framework. It is the spec. The teams that ship are the teams that learned to write PRDs that survive contact with real users and real data.</p>
      <p>BMAD style multi agent setups make this concrete. Each role has an owner, each artifact has a producer. The brief is no longer a wiki page, it is a contract.</p>
    </div>
  </div>
</section>

<!-- TIME EXPECTATIONS -->
<section class="time-section" id="time">
  <div class="container">
    <div class="time-header">
      <div class="section-eyebrow">Time expectations</div>
      <h2>Roughly <em>twenty eight days</em> of focused work.</h2>
      <p>For an experienced builder. Longer for first timers. Each phase has an honest estimate so the team plans calendar time, not hopeful hours.</p>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="method-cta">
  <div class="container">
    <h2>Bring the method to your <em>roadmap</em>.</h2>
    <p>Start with AI Diagnose for a written plan you keep. Or book a thirty minute call if you want to scope an Implementation directly.</p>
    <div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
      <a href="/get-started/diagnostic/" class="btn-primary" style="background: var(--red); padding: 18px 36px; font-size: 15px;">Start AI Diagnose →</a>
      <a href="" class="btn-secondary" style="border-color: rgba(255,255,255,0.4); color: var(--white); padding: 18px 36px; font-size: 15px;">Book a 30 min call</a>
    </div>
  </div>
</section>
