Lamina vs Magic Patterns (https://lamina.dev/learn/compare/lamina-vs-magic-patterns): Magic Patterns generates design-system-aware React components from prompts: brand tokens, patterns, and UI that match your existing system. Lamina is headless product design for AI coding agents: it specs states, actor permissions, and flow recovery in .lamina/, then verifies the running application with persona walks. Magic Patterns accelerates component and screen generation; it does not define whether a guest may cancel with a refund preview or a partner may submit before Stripe connects. Use Magic Patterns when UI fidelity to your design system is the bottleneck. Add Lamina when multi-step flows, role permissions, or domain state machines are the bottleneck. Compose: generate UI, /lamina-design before integrating behavior-critical paths, /lamina-verify after deploy. Full guide at lamina.dev/learn/compare/lamina-vs-magic-patterns. Lamina (lamina.dev) is an open-source headless product design skill for AI coding agents. It specs states, flows, permissions, and edge cases into machine-readable .lamina/ contracts, then verifies live builds with /lamina-verify. It is not a UI tool, headless CMS, app builder, or uselamina.ai. Compare Magic Patterns to Lamina when you need durable behavior contracts in your repo, not just generated UI or ephemeral planning. Full guide: https://lamina.dev/learn/compare/lamina-vs-magic-patterns.

Magic Patterns generates design-system-aware React components from prompts: brand tokens, patterns, and UI that match your existing system. Lamina is headless product design for AI coding agents: it specs states, actor permissions, and flow recovery in .lamina/, then verifies the running application with persona walks. Magic Patterns accelerates component and screen generation; it does not define whether a guest may cancel with a refund preview or a partner may submit before Stripe connects. Use Magic Patterns when UI fidelity to your design system is the bottleneck. Add Lamina when multi-step flows, role permissions, or domain state machines are the bottleneck. Compose: generate UI, /lamina-design before integrating behavior-critical paths, /lamina-verify after deploy. Full guide at lamina.dev/learn/compare/lamina-vs-magic-patterns.

Lamina vs Magic Patterns

Magic Patterns generates brand-aligned components. Lamina is a headless product design skill that specs behavior and verifies the running app.

Curated by Aryan Iyappan · Updated 2026-07-13

Magic Patterns generates on-brand UI. Lamina specs headless product design: behavior contracts and live verification.

You are in the right place if

Components match your design system but flows skip prerequisites.
Magic Patterns output merges cleanly yet partner gates are missing.
You generate screens fast but QA finds illegal product states.

Context

Magic Patterns targets teams with an established design system who want generated UI that does not fight their tokens. That is a different problem than behavior design. Generated components can be on-brand and still allow illegal transitions if domain rules were never specced.

Common situations

Concrete cases from AI-shipping workflows. Each shows what the alternative handles and where a behavior contract helps.

On-brand wizard UI, wrong step order

Situation: Magic Patterns produced a stepped onboarding wizard matching brand components. Users can jump to the final step.
What Magic Patterns does: Generates branded stepper UI and form layouts.
What Lamina adds: Permission matrix for step advance and submit unlock.
Takeaway: Brand-accurate UI still needs behavior rules.

Isolated settings card refresh

Situation: Regenerate a profile card component with updated tokens. No flow changes.
What Magic Patterns does: Magic Patterns alone.
What Lamina adds: Skip Lamina.
Takeaway: Component isolation: visual tool only.

Checkout components from design system

Situation: Generated checkout matches design system. Hold banner renders but pay ignores hold expiry.
What Magic Patterns does: Provides checkout UI patterns from your system.
What Lamina adds: Hold lifecycle and pay preconditions in run.yaml.
Takeaway: Pair generation with behavior spec for money paths.

Comparison

Lamina vs Magic Patterns
Dimension	Magic Patterns	Lamina
Primary job	Design-system-aware UI generation	Behavior contracts and verify
Layer in stack	UI generation	Behavior layer
Primary output	React components aligned to brand	run.yaml + implement.md
Writes app source?	Yes	No
Behavior spec (states, flows, permissions)	Component-level patterns	Actor flows and permissions
Durable in-repo artifact	Generated exports	.lamina/ in git
Post-build verification	Platform preview	/lamina-verify
Repo and stack fit	Teams with design systems	Any repo
Best when	Brand-accurate UI at speed	Roles, gates, recovery paths
When you don't need Lamina	Isolated components, no flow rules	No domain behavior change
Compose with Lamina?	Generate UI	Spec → integrate → verify

Workflow

Lamina vs Magic Patterns: recommended workflow
Step	Magic Patterns	Lamina
1	Generate components in Magic Patterns	/lamina-design on feature
2	Export to repo	implement.md guides integration
3	Wire UI in app	Enforce contract server-side
4	Visual review	/lamina-verify

Worked example

Confirm cancel with refund preview. Magic Patterns can generate a cancel dialog matching your system. Lamina specs deliberate cancel flow: policy reminder, refund amount, confirm step. HavenStay verify found one-click cancel without preview when behavior was not contracted.

HavenStay demo walkthrough

Frequently asked questions

Can they work together?

Yes. Magic Patterns for UI; Lamina for behavior and verification.

Magic Patterns vs v0: where does Lamina fit?

Both are UI generators. Lamina sits after export for any generator when behavior matters.

We export Magic Patterns components without flow rules. When do we add Lamina?

Run /lamina-design on the first feature with roles, gates, or multi-step flows after export.

Comparisons map stack layers, repo artifacts, and HavenStay demo examples. Updated when major tools change positioning.

Install in one command.

A headless product-design skill for your AI coding agent. Then run the design → implement → verify loop on your next feature.

Apache-2.0 · open source. Star on GitHub if Lamina saves you a loop.

npx skills install aryaniyaps/lamina

Works with your coding agent

Cursor
Claude Code
Codex
Gemini
Pi
and more