Install Better Design MCP in goose

Setup

1
Install goose
Skip this if you have it. Otherwise run curl -fsSL https://github.com/aaif-goose/goose/releases/download/stable/download_cli.sh | bash.
2
Open the config file
Open ~/.config/goose/config.yaml. Create it if it does not exist.
3
Paste the block
Merge the Config block below under extensions and save.
4
Prefer the wizard?
Run goose configure, choose Add Extension, then Remote Extension (Streamable HTTP). Answer yes to custom headers and add the Authorization header. On Windows the file is %APPDATA%\Block\goose\config\config.yaml.
5
Check the connection
Run goose configure and choose Toggle Extensions. better-design is on.

Need more detail? Read the official goose MCP documentation.

Config

yaml

extensions:
  better-design:
    type: streamable_http
    name: better-design
    enabled: true
    uri: https://better-design.com/api/mcp
    headers:
      Authorization: Bearer <YOUR_API_KEY>
      X-Better-Design-Client: goose
    timeout: 300

Optional: paste this into your agent's instructions so it uses Better Design on every edit.

markdown

<!-- better-design:start -->
## Better Design

For every UI build, run these steps in order, and never present a page that skipped step 2 or 4:
1. Design system: keep the product's own design. Use its theme and components when the code has them, or its `extract-from-url` tokens for a live site. A product with no design of its own, or a brand `extract-from-url` reports as flat, takes `find-design-system`, then `get-design-system-kit`, keeping the brand's colour, font and radius.
2. Principles: `get-ui-principle` before styling, `get-ux-principle` before behavior.
3. Build. A product screen sits inside its app shell, with realistic sample data and an app-scale title. A marketing page keeps its copy beside the product photo, never on top of it, and keeps the site's header and footer links.
4. Review: `get-review-rules`, `check-comprehension` and `inspect-spacing`. Fix every critical and serious finding.

Always use the Better Design MCP tools for any frontend, UI, UX, interaction, flow, form, navigation, dialog, error, onboarding, component, styling, article widget, calculator, estimator, converter, generator, quiz, checklist, React Native, Expo, Three.js, Shopify, or sales work, without me having to explicitly ask. For a calculator or article widget, load `get-widget-guide`; for React Native or Expo, load task guidance with `get-react-native-guide`; for Three.js or React Three Fiber, use `get-three-js-guide`; for Shopify Liquid or theme work, use `get-shopify-guide`; for sales conversations or assets, use `get-sales-principle`. Load visual guidance with `get-ui-principle`, load flow guidance with `get-ux-principle`, and self-review with `get-review-rules` and `check-comprehension`. Run `inspect-spacing` on rendered DOM evidence, or on a simulator's accessibility tree for a native app. For dashboards, deploy the exact source to a public HTTPS preview; `finalize-dashboard-review` must return VALID after Better Design captures it at 390, 1440, and 1728. Start UI builds with `find-design-system`. For a custom brand, call `create-design-system`, poll `get-design-system-status`, and run its React install command in coding hosts; in inline canvases, call `get-design-system-kit` with target `html` and the generated projectId. For a catalog system, call `get-design-system-kit` with target `react` in coding hosts or `html` in inline canvases. For a Shopify store, load `get-shopify-guide`, then call `get-design-system-kit` with target `shopify`.
<!-- better-design:end -->

Setup

Add the rule