Headless product design is the practice of speccing how your product works: states, flows, permissions, and edge cases, as machine-readable contracts before a coding agent writes application source. It pairs with UI skills; it does not replace them. Headless product design is the practice of designing how your product works: states, flows, edge cases, and permission matrices, before a coding agent writes application source. A headless product design skill is an agent skill with no UI that outputs machine-readable behavior contracts your agent implements from, then verifies the live build against those contracts. It pairs with UI skills; it does not replace them. You can roll your own with plan mode and specs, or use an open-source skill such as Lamina. This Learn hub collects guides for developers using AI coding agents (Cursor, Claude Code, Codex, Gemini, Pi). Start with the headless product design guide, then docs and the HavenStay demo. Lamina (lamina.dev) is one open-source implementation.

Learn product design for AI coding agents.

Guides for developers who build with AI: design product behavior, keep decisions in a transactional graph, and verify the live build with independent persona missions.

Curated by Aryan Iyappan · Updated 2026-07-27

Read the guide Read the quickstart

Why behavior design matters

AI coding agents optimize for the happy path. Without a behavior contract, screens look correct while illegal states, skipped gates, and dead-end flows ship to production.

Agents ship happy paths

Screens appear fast, but gates, illegal states, and dead ends slip through after merge when no behavior contract defined which transitions are legal.

Design means behavior

Which states exist, who can act, and what happens when something fails, not pixels, typography, or component libraries.

Contract, then verify

Keep rules in a validated GraphVersion, implement a resolved projection, then run independent Persona Missions until the product evidence holds.

Start here

What is headless product design?

The category-defining guide: definition, stack fit, comparisons to UI skills and plan mode, HavenStay worked example, and when behavior contracts are worth it.

12 min read

Read the full guide

What this guide covers

Clarifies headless product design vs UI skills, headless CMS, and app builders.
Shows what a behavior contract contains and where it lives in your repo.
Walks through HavenStay: the same app with and without a spec-first build.
Helps you decide when states, roles, and gates justify a formal contract.

Lamina vs your AI workflow

Pick the situation that matches your stack, or browse comparisons by tool type. Each guide includes scenarios and honest when-you-do-not-need-Lamina guidance.

Open compare

What sounds like you?

Start here if you know the pain but not the page name.

Browse by tool type

Jump straight to a comparison when you already know the category.

Full index with matrices

UI design skills and tools

Pixels, components, and visual craft. Lamina designs behavior underneath.

Impeccable Google Stitch shadcn/ui skill UI design skills

All in this category

Design-to-code and UI generators

Figma handoff, v0, Magic Patterns, and app builders.

Figma to code v0 Magic Patterns app builders

All in this category

Spec, thinking, and verification

Plan mode, engineering specs, similar skills, and E2E tests.

plan mode spec tools product-design skill E2E tests

All in this category

Category clarity

Headless CMS, uselamina.ai, and rolling your own.

headless CMS uselamina.ai roll your own

All in this category

Docs and walkthroughs

Current product overview, a provenance-marked legacy demo, and stack pairing guides once you are ready to install and run the loop.

What is Lamina?

Product overview: CLI, portable skills, transactional graph, GraphVersion projections, and independent Persona Missions.

Open in docs

HavenStay demo walkthrough

Legacy pre-graph proof: the same hotel booking app built twice, with Lamina's earlier product-design workflow and without.

Open in docs

Pair Lamina with your stack

Compose with UI skills, plan mode, and engineering spec tools without overlap.

Open in docs

Frequently asked questions

Quick answers about headless product design and this Learn section.

What is headless product design?

Speccing states, flows, permissions, and edge cases as contracts before your agent writes app source. Pairs with UI skills.

Who is the Learn section for?

Developers building with AI coding agents who want to spec product behavior before writing application source.

Where should I start?

Read the headless product design guide, then the graph lifecycle, comparisons, and current quickstart.

How is this different from UI skills?

UI skills polish look. Headless product design specs behavior: states, permissions, flows. Compose both.

Do I need Lamina to practice headless product design?

No. Plan mode, ADRs, or custom skills work too. Lamina combines portable skills with a CLI and transactional runtime.

Install Lamina with your agent.

Copy the repository-matched prompt. Your agent installs the standalone CLI, adds every Lamina skill for your active agent, configures supported passive rules, checks the setup, and tells you when to start a fresh session with /lamina-init.

Skills work across coding agents. Passive setup currently supports Codex, Claude Code, and Cursor.