Your agent writes the code.Motif gives it taste.
A maintained design library your coding agent can call. Guidance, tested templates and design checks for real products, delivered over MCP to Claude, ChatGPT, Gemini, Grok, Cursor and any agent that speaks MCP.
Early access is free. Paid plans are planned for launch; nothing is charged today.
Seven disciplines. One connection.
Every item is a single job: a principle, pattern, workflow, anti-pattern or check. Each one carries implementation steps with real values, a verification checklist and the sources behind it.
Your agent asks. Motif answers with specifics.
Add Motif to your agent
Motif is a standard MCP server. Add it to Claude Code, Codex, Cursor, Gemini CLI, ChatGPT, Grok or any client that supports remote MCP, then authorize in the browser. You can see and revoke every connection.
Get the right pack
The agent searches by product type and platform, then retrieves a pack: brief, tokens, layout contract, required states and a checklist.
Check before you ship
The agent builds with your tools and model, then runs Motif's checks for contrast, states, touch targets and hard-fail patterns.
$ claude mcp add --transport http motif https://mcp.asv-labs.com/mcp
# then, inside Claude Code: open the MCP menu,
# choose motif and sign in in the browser
/mcp$ codex mcp add motif --url https://mcp.asv-labs.com/mcp
$ codex mcp login motif
# or add it to ~/.codex/config.toml
[mcp_servers.motif]
url = "https://mcp.asv-labs.com/mcp"// .cursor/mcp.json in your project,
// or ~/.cursor/mcp.json for every project
{
"mcpServers": {
"motif": { "url": "https://mcp.asv-labs.com/mcp" }
}
}
// save, then sign in when Cursor asks$ gemini mcp add --transport http motif https://mcp.asv-labs.com/mcp
# then, inside Gemini CLI, sign in in the browser
/mcp auth motif1 Settings → Security and login → turn on Developer mode
2 Open Plugins (chatgpt.com/plugins) and select +
3 Name it Motif. Under Connection, paste
https://mcp.asv-labs.com/mcp
4 Choose OAuth, select Create, then sign in to Motif
# developer mode: Plus, Pro, Business, Enterprise, Edu (web)1 Open grok.com/connectors
2 Select New Connector, then Custom
3 Paste the server URL
https://mcp.asv-labs.com/mcp
4 Sign in to Motif when Grok asksName motif
URL https://mcp.asv-labs.com/mcp
Transport Streamable HTTP
Auth OAuth 2.1, sign in in the browserThe Motif MCP server opens with early access. Commands follow each client's docs as of September 2026.
› We're building a booking app for a two-chair barbershop.
Web first, installable on phones.
motif.search_guidance query="small service booking" platforms=["website","pwa"]
web-site-type-local-service · pwa-install-prompt-flow ·
pwa-app-shell-and-offline-fallback · app-screen-state-matrix (+4)
motif.get_pack local-service-booking@1.0.0
design-brief.md concept, audience, narrative order
design-tokens.json type roles, space, color, motion (DTCG)
layout-contract.json 360 / 768 / 1280 / 1600, mobile recomposition
interaction-states.md loading, empty, error, offline, success
acceptance-checklist.mdmotif.check_design url=http://localhost:5173 checks=["states","contrast","targets","hard_fails"]
FAIL HF-3 card wall: 9 equal cards on the home page, no dominant element
FAIL booking form: no error state for a taken time slot
WARN tap targets 36×36 on the calendar (needs 44×44)
PASS contrast 12/12 · reduced-motion path present
Agent: recomposed the home page around the next open slot, added
the slot-taken state, enlarged calendar targets. Re-check: all pass.Look inside before you pay.
See what an agent builds with Motif.
Ferrow is a fictional photography studio. An agent built its website and its iOS and Android app by following Motif's guidance. Both run live below. Scroll them, open a photo, book a session. The free packs download with early access.
Ferrow website
Six pages: home, a filterable work index with a keyboard lightbox, the Fog Season print series, sessions and pricing, a booking enquiry that says plainly it is a demo, and an about page with photo credits.
- Pages
- 6
- Motif items applied
- 21
- axe violations
- 0 6 pages × 2 widths
- Anti-slop rubric
- 4.1 self-scored
The 21 Motif items the agent followed
web-design-gate-workflow · web-site-type-portfolio-studio · web-photography-led-heroes-and-sections · web-work-index-page · web-case-study-page · web-grid-editorial-asymmetry · web-hero-composition-selection · web-card-budget-policy · web-anti-generic-card-wall · web-anti-slop-rubric-scored · web-hard-fail-signatures-self-lint · web-type-scale-and-measure · web-responsive-images-and-formats · web-pricing-honesty-and-anchoring · web-contact-page-and-honest-submission · web-social-proof-honest-evidence · web-skip-links-and-landmarks · web-focus-indicators-and-keyboard · web-reduced-motion-for-marketing-sites · web-breakpoints-and-recomposition · web-mobile-navigation
Ferrow client app
The same studio as an app for its clients: wedding and portfolio galleries, a full-screen viewer with camera details, a print shortlist you can edit with Undo, booking with real availability, and light and dark themes. Each platform uses its own navigation and controls.
- Platforms
- 2
- Motif items applied
- 25
- Screen states
- 7 incl. empty, offline, error
- App rubric
- 4.2 self-scored
The 25 Motif items the agent followed
app-design-gate-workflow · app-category-media · app-collection-app-reference-architecture · app-navigation-architecture-selection · app-tab-bar-implementation-expo-router · app-ios-native-feel-foundations · app-ios-navigation-swiftui · app-ios-typography-sf-symbols-dynamic-type · app-ios-color-materials-liquid-glass-dark-mode · app-ios-sheets-detents-swiftui · app-ios-anti-patterns-non-native-tells · app-android-material-3-foundations · app-android-typography-color-elevation-tokens · app-android-navigation-suite-and-predictive-back-compose · app-android-anti-patterns-non-native-tells · app-back-navigation-ios-android · app-item-detail-screen-anatomy · app-collection-list-vs-grid-and-row-anatomy · app-empty-states · app-screen-state-matrix · app-touch-targets-and-spacing · app-destructive-actions-undo-vs-confirm · app-composition-review-rubric · app-hard-fail-signatures-static-checks · app-anti-pattern-website-in-a-phone-frame
These live builds run in the browser. The downloadable packs are being ported to React and TypeScript (website) and Expo (app), and each pack page will list exactly what has been tested on which devices. Every business shown here, and its people, is fictional; photographs are CC0 and credited on each site.
Four more, four different businesses
Same process, different briefs: an agent read the Motif guidance for each kind of site, built it, then checked it. All four are live. Open one and use it.
Limits you can read before you buy.
Planned launch pricing. Early access is free while we test; nothing is charged today.
Both free packs and the free guidance subset. No card and no trial clock.
Request early accessThe premium catalog within stated allowances. Cancel in two clicks and keep the licence to what you activated.
Request early accessGet early access. Build something first, decide later.
We're opening Motif to a small group of builders first. Leave your email and we'll send one invite when your seat is ready: the MCP connection, the free guidance subset and both free packs.
- 01Join the list. It takes ten seconds.
- 02Get one email when your invite is ready.
- 03Connect your agent and build something real.
You're on the list.
We'll email you once, when your invite is ready.