Your agent writes the code.Motif gives it taste.
A maintained design library your coding agent can call. Guidance, design-rule checks and project memory for real products, delivered over MCP to Claude, ChatGPT, Codex, Cursor, Gemini CLI and Grok.
Try Motif free for 30 days. No card required.
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 remote MCP server. Create a free account, and add Motif to Claude, ChatGPT, Grok, Codex, Cursor, Gemini CLI, VS Code or any client that supports remote MCP: sign in when it asks, or paste an agent token. You can see and revoke every connection.
Get the right guidance
The agent searches 739 guides by product type and platform, opens the best few (what to build, real values, code, pre-ship checks) and reads your project's brief and approved decisions.
Check before you ship
The agent builds with your tools and model, then checks what it measured (contrast, touch targets, measure, motion timing, LCP and more) against Motif's rules.
$ 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
# or skip sign-in with an agent token:
# --header "Authorization: Bearer $MOTIF_TOKEN"$ codex mcp add motif --url https://mcp.asv-labs.com/mcp
$ codex mcp login motif
# or with an agent token, in ~/.codex/config.toml
[mcp_servers.motif]
url = "https://mcp.asv-labs.com/mcp"
bearer_token_env_var = "MOTIF_TOKEN"// .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 browser
or Authorization: Bearer <agent token>
Tokens motif-join.asv-labs.com/accountSigning in creates a free Motif account if you don't have one. Prefer a token? Your account page shows ready-to-paste setup with it filled in. 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.get_project_profile "Two-chair barbershop"
brief · platforms: website, web_app · 2 approved decisions
motif.search_design_knowledge "local service booking" platform="website"
web-site-type-local-business · web-hero-booking-and-quote-panels ·
pwa-install-prompt-flow · app-screen-state-matrix (+1)
motif.get_design_guidance web-hero-booking-and-quote-panels
overview what it is, when to use it
implementation structure, real values, code
verification checks before shipping
limitations evidence and caveatsmotif.check_design_contract rules: contrast-text-aa · target-size-aa · measure-max · lab-lcp
PASS contrast-text-aa 5.9:1 for body text (needs 4.5:1)
FAIL target-size-aa calendar cells 20×20px (needs 24×24)
FAIL measure-max 80ch body text (use 45–65ch)
PASS lab-lcp 1,640ms (lab target ≤ 2,000ms)
Agent: enlarged the calendar cells, capped the measure at 60ch,
re-checked: all pass. Proposed "60ch body" as a project decision.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. Both free packs are in your library once you sign in.
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. 14 of 14 template families are packaged (2 free, 12 premium); activate and download them from your account or through your agent. See the template catalog. 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.
New: Heroes. First screens that sell.
54 in the library
Each hero is the opening section of a website, made for a single business: its own motion, type and layout, and an ask that works, from reserving a farm share to booking a night train. Your agent gets the full build and a prompt that fits it to your brand. Add the whole library to Creator for $15 a month.
Limits you can read before you buy.
Both plans include the guidance library, design-rule checks, project profiles and template downloads over MCP. Your coding agent's model usage is billed by its own provider, not by Motif.
No card required
The free guidance subset and rule checks, plus both free template families.
Try free for 30 daysAll 739 guides within stated allowances. Cancel online any time and keep the licence to what you received.
Get CreatorHeroes add-on: $15 a month on top of Creator. The full Heroes library, 10 new kits a month, new heroes as they ship. Cancel it on its own any time.
Every limit, including request rates and download sizes · What the licence lets you do
Questions.
- What is Motif?
- Motif is a design library your coding agent can call over MCP. It gives the agent 739 guidance items, design-rule checks, project profiles and template downloads for websites, apps and PWAs. Your agent builds with your own model and tools.
- Which agents does Motif work with?
- Claude, ChatGPT, Grok, Codex, Cursor, Gemini CLI, VS Code and any client that supports remote MCP. The server URL is https://mcp.asv-labs.com/mcp. You sign in in the browser or paste an agent token, and you can see and revoke every connection.
- What does the free trial include?
- 30 days of the free guidance subset and the design-rule checks, both free template families, 100 content operations a month and 1 project profile. There are no overage charges.
- Do I need a card to start?
- No. The 30-day free trial needs no card.
- What does Creator cost, and what does it allow?
- Creator is $9 a month. It includes all 739 guides within stated allowances: 5,000 content operations a month, 500 premium guidance items a month (75 per 24 hours), 20 new template families a month (5 per 24 hours) and 25 project profiles, with no overage charges. Cancel online any time.
- What is the Heroes add-on?
- Heroes are opening sections for websites, each made for one business with its own motion, type, layout and a working call to action. The add-on costs $15 a month on top of Creator and gives your agent the whole library: 10 new kits a month, and new heroes as they are added. Kits you download stay licensed to you if you cancel.
- What does the licence let me keep?
- Templates and guidance are licensed to you, not sold. You can use them in unlimited end products for yourself or for clients, including commercial products. The licence does not end with your subscription: you keep using what Motif already delivered, including template families you activated, and you can re-download the last delivered version for 30 days after paid access ends (up to 2 GiB). You may not resell them, redistribute them or use them to train models.
Motif is open. Try free for 30 days, decide later.
You can create a free account and connect your agent right now. Want to hear when new template families and guides ship? Leave your email for short release notes.
- 01Create a free account with your email. No card.
- 02Add Motif to your agent and sign in, or paste an agent token.
- 03Ask your agent to use Motif, and build something real.
You're on the list.
We'll send short release notes when new templates and guides ship. You can try free for 30 days with your coding agent now.