• The finished solution library page

    Solution libraryClick to focus

  • The finished home page

    HomeScroll

  • The finished platform page

    PlatformClick to focus

The marketing site for an agentic AI platform for NetSuite. Six pages, six weeks, designed in code.

Role
Interaction design and build
Studio
Now We Collide / TheBird.AI
Year
2026
Client
Unnamed until launch

How do you signal an AI agent?

Right now the industry’s answer is: don’t.

Every AI product has to solve the same problem. Something on screen has to tell you a machine did this. The default answer in 2026 is a soft rainbow gradient, and it is a deliberate choice, not a trend.

Google’s own designers write that Gemini’s solutions are meant to feel cool, calm and considered, by concealing the struggles and challenges of their creation. Anthropic have conceded the same thing from the other direction, that slick design actively works against accurate mental models of what AI is.

  1. 01

    Reach forward

    The gradient. Soft, magical, forgiving.

    BorrowingMagic

    • What it tells you
    • An AI was involved

    Gemini AI Visual DesignGoogle Design

  2. 02

    Reach back

    The serif renaissance across AI brands.

    BorrowingHeritage, age, human hands

    • What it tells you
    • Nothing about the machine at all

    AI Has Come for Serif FontsWIRED

  3. 03

    Show the machine

    8-bit.

    BorrowingNothing. It admits what it is: a machine

    • What it tells you
    • Which agent this is
    • What it is doing
    • What state it is in
    • Whether it needs you

All three answer the same trust problem. Two of them answer it by making the machine harder to see.

Where this one came from

The pixel direction wasn’t mine. My job was recognising it beat the system we’d already built, then making it survive contact with a real product: staking it to what the product actually differentiates on, hardening the rules so it stayed a signifier instead of drifting into decoration, and building it out to forty-plus agents.

Accounts Payable

  • AP Vendor Bill Automation
  • Vendor Onboarding
  • AP Payment Recommendations
  • AP Data Quality & Audit

Accounts Receivable

  • AR Cash Application
  • Customer Statement Runner
  • AR Aging Analysis
  • Dispute Triage

Procurement

  • PO Drafting
  • Vendor Risk Screening
  • Spend Categorisation
  • Requisition Intake

Month-end Close

  • Routine Journal Posting
  • Account Reconciliation
  • Variance Analyser
  • Close-readiness Check

Inventory

  • Stock Level Monitor
  • Reorder Drafting
  • Inventory Write-down
  • Cycle Count Reconciliation

Reporting

  • Close Pack Builder
  • Variance Commentary
  • Board Report Drafting
  • KPI Dashboard Refresh

Billing

  • Invoice Generation
  • Pricing Rule Enforcement
  • Revenue Leakage Detection
  • Billing Schedule Runner

Collections

  • Credit Health Scoring
  • Dunning Sequence
  • Promise-to-pay Tracking
  • DSO Analysis

Sales & CRM

  • Upsell Signal Detection
  • Pipeline Gap Analysis
  • Quote Drafting
  • Lead Enrichment

Audit & Controls

  • Fraud Pattern Detection
  • Segregation of Duties Check
  • Exception Flagging
  • Audit Trail Export

The volume dial · one style, three sizes

  • Full character56–64px · animatedHero moments, explainers, marketing.
  • Vendor bills · MarchNeeds reviewSmall avatar20–40px · profile circleCards, lists, task ownership. Identity at a glance: who is doing this, and who has to sign it off.
  • AP agent match the Acme bill to its PO and flag anything oddMicro chip16–20px · inlineMentions, dense tables, breadcrumbs. Pixel art survives at sizes illustration cannot.

The frame carries the state

  • QueuedNothing to do yet
  • WorkingRunning now
  • Needs youStopped for a decision
  • DoneFinished, nothing owed

Warm humans, cool agents

Humans
GregNina
Agents
AP agentClose agent

Nothing here was wireframed.

Every option the client saw was a real page, running, on a URL they could click.

Wireframes and mockups were a workaround for expensive code. A wireframe is a cheap stand-in for an expensive thing, and every argument for one comes back to build cost: don’t spend the expensive resource until you’ve agreed where to point it.

Code isn’t the expensive resource any more. So nothing on this project got drawn first. The options were built, compared as real pages, and cut down in front of the client.

The home page

8 options

The platform page

9 options

The agent library page

6 options

What shipped

One home page
  1. Hero
  2. Platform
  3. Agent library

You can’t harvest a wireframe. You look at three and pick one. When all three are real pages you take the hero from one, a section from another, and an idea you only noticed because a wildcard existed and lost.

I automated the repetitive half.

Forty pages isn’t a flex if it cost forty builds.

  • plugins
  • agents
  • skills
  • human gates

So I did each of those once by hand, then wrote down what I’d just done. The process left the conversation and moved into files. Now it runs from one command.

noyesyesnoyes
One command starts it. Everything below runs from that.
A build can't start without a design system to build to. If there isn't one, the loop stops and points at the plugin that makes one.
design-system-extractorReads brand material, a live site or concept imagery and writes DESIGN-SYSTEM.md. Every value is provenance-tagged; anything inferred is flagged for approval rather than quietly invented.
ui-patterns-extractorReads the components already built and writes down how this project actually does things: band rhythm, cards, buttons, motion, page archetypes.
The first of two places the loop stops. Nothing gets built against a design system I haven't read.
build-plannerMaps one page into parts, decides build-new versus reuse-existing for each, and proposes real options where there's a genuine design choice. Writes nothing.
The second stop, and the one that matters most: it is cheaper to argue with a plan than with a built page.
orchestratorThe orchestrator holds the queue, owns every shared file, and hands one unit to one worker at a time. It never writes a page itself.
build-implementerOne worker, one unit — a page, or one section of one — in its own git worktree. It writes only its own files, which is what lets three run without ever touching the same line. Three concurrent is the real cap; past that they queue on the plan rather than the machine.
build-implementerOne worker, one unit — a page, or one section of one — in its own git worktree. It writes only its own files, which is what lets three run without ever touching the same line. Three concurrent is the real cap; past that they queue on the plan rather than the machine.
build-implementerOne worker, one unit — a page, or one section of one — in its own git worktree. It writes only its own files, which is what lets three run without ever touching the same line. Three concurrent is the real cap; past that they queue on the plan rather than the machine.
Six reviewers run at once on the finished unit. The three that matter most are drawn out; the others cover performance, SEO and mechanical build checks.
visual-reviewerReviews the rendered screenshot the way a person would: brand adherence, spacing, hierarchy, and the breakage code review cannot see.
copy-integrity-checkerProves every visible string traces to the real copy source. This exists because the loop invented plausible copy once, and once was enough.
legibility-auditorWCAG 2.2 AA against the rendered page, and it classifies each finding page-level or design-system-level so only the second kind reaches me.
Page-level findings get fixed and re-run. Anything that would change the design system escalates to me instead.
Mine. The loop can build and check on its own; it does not decide when something is done.
Most builds stop here. If the site has to live in HubSpot, the port runs.
port-plannerDecides the module inventory, the field shape for each, and which sections become HubDB tables rather than page-builder modules.
module + hubdb portersOne agent per module or table. Markup becomes HubL, css and js lift across unchanged because the token names already match.
port-verifierChecks the ported theme locally, then against a real preview: console errors, screenshots, obvious breakage. Never runs a production publish.
Upload and publish stay manual, on purpose.
a task an agent does a decision the loop makes a decision I makeHover any node

It hasn’t launched yet, but it’s already moved from a set of website graphics into full product identity.