Install
openclaw skills install @marvkr/better-designDesign harness for coding agents. Connects OpenClaw to the Better Design MCP server so the apps, sites and screens it builds use a real design system, follow UI and UX principles, and pass review checks for accessibility, copy and spacing. Use when the user asks for an app, site, page, dashboard or component, or asks to choose, create, install or review a design system or interface.
openclaw skills install @marvkr/better-designBetter Design is a remote MCP server at https://better-design.com/api/mcp. It gives the agent design systems, UI and UX principles, icons and review checks. This skill says how to connect it and the order to use its tools in.
Check whether a better-design server is already configured:
openclaw mcp status --verbose
If it is missing, add it with OAuth sign-in. This is the default and needs no key:
openclaw mcp set better-design '{"url":"https://better-design.com/api/mcp","transport":"streamable-http","auth":"oauth"}'
openclaw mcp login better-design
openclaw mcp doctor better-design --probe
openclaw mcp login prints a sign-in link. The user opens it, signs in to Better Design with email, Google or GitHub, and approves access. A free account works. You can also add the server in the Control UI under Settings → MCP with the same URL and the Streamable HTTP transport, then select Sign in.
On a headless Gateway that cannot open a browser, use an API key instead. The user creates it at https://better-design.com/mcp and stores it as BETTER_DESIGN_API_KEY through the Gateway's secret mechanism. Send it as the header Authorization: Bearer <key>. Never write the key into a config literal or into chat.
The probe must list tools such as find-design-system and get-design-system-kit before you continue.
If components/ui/ already holds a Better Design system, or components/icons/.library.json names an icon library, build with those. Change them only when the user asks.
find-design-system with a short description of the product and its audience.create-design-system with a description of the look. Pass the chosen match as baseDesignSystemId, or pass brandCss from extract-from-url or extract-design-system when the user has an existing site or stylesheet. Creating a custom system uses credits from the user's Better Design account.get-design-system-status until the system is ready, then share its preview link.Call get-design-system-kit with the target that fits the project:
| Project | Target |
|---|---|
| React or Next.js with a terminal | react, then run the returned install command |
| An inline canvas or artifact with no build step | html |
| React Native or Expo (Pro plan) | react-native |
| An iOS app in SwiftUI (Pro plan) | swiftui |
| A Shopify theme (Pro plan) | shopify |
Build with the installed components instead of writing new ones.
get-ui-principle with the topic, such as spacing, typography or color.get-ux-principle with the topic, such as forms, onboarding or errors.find-icon-library, then find-icons, then install-icons, and save the returned files.get-review-rules for the categories that apply: accessibility, visual-design, animation, content, comprehension or ai-features. Check the code against each rule.check-comprehension with the screen's headline, body and action labels. It flags insider words and actions that hide their result.inspect-spacing with no states to get the capture script, run it in the rendered page at desktop and mobile widths, then call inspect-spacing again with the captured states.review-dashboard-structure with the page source, its data fixture and the installed component sources. Then call finalize-dashboard-review, and present the dashboard only on a VALID receipt.Fix every critical and serious finding, run the checks again, and tell the user what changed and what remains.
Docs: https://better-design.com/mcp/install · Privacy: https://better-design.com/privacy · Terms: https://better-design.com/terms · Support: info@better-design.com