Better Design

Name: Better Design
Author: better-designs

作者：better-designsバージョン 0.48.0i★ –iパソコンでもクラウドでも

レジストリ名io.github.marvkr/better-design

インストール

概要

作者による説明（英語の原文）

A design harness for AI coding agents: design systems, design principles, icons and UI review.

PopNx MCPの3つの柱

この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。

利用者の声iレビューはまだありませんレビューは今後のステップで、アカウント機能と一緒に始まります
私たちの基本チェックi3項目中2項目に合格公開情報からチェック。コードはまだスキャンしていません
利用状況i未計測★ –

できること

このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。

接続方法: パソコンでもクラウドでも
トランスポート: stdio, Streamable HTTP
カテゴリ: デザイン・画像・音声
入力が必要なもの：BETTER_DESIGN_API_KEY

インストール

使っているAIアプリを選んで、設定をコピーしてください。

インストールの前に

基本チェック：3項目中2項目に合格
作者のサーバーで動きます。あなたが頼んだ内容は、作者のサーバーを通ります。
自分で入力するもの： BETTER_DESIGN_API_KEY

「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。

必要なもの

クラウドで動くインストール不要。インターネット経由でつながります
npmNode.jsのインストール（npxコマンドに必要）

どのアプリを使っていますか？

ClaudeClaude CodeCursorVS CodeChatGPT

上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。

ウェブ、デスクトップ、モバイルのClaudeで使えます：

Settings → Connectors を開く
Add custom connector を押す
下のアドレスを貼り付けて Add を押す
サインインを求められたら、作者のサービスにサインインする

https://better-design.com/api/mcp

または、パソコンで動かす

Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます

{
  "mcpServers": {
    "better-design": {
      "command": "npx",
      "args": [
        "-y",
        "better-design",
        "mcp"
      ],
      "env": {
        "BETTER_DESIGN_API_KEY": "your-value"
      }
    }
  }
}

ターミナルでこれを実行します

claude mcp add --transport http better-design https://better-design.com/api/mcp

または、パソコンで動かす

claude mcp add better-design --env BETTER_DESIGN_API_KEY=your-value -- npx -y better-design mcp

動かす前に、空欄の値を入力してください。

Cursorで開く

または、設定を自分でコピーする

プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます

{
  "mcpServers": {
    "better-design": {
      "url": "https://better-design.com/api/mcp"
    }
  }
}

または、パソコンで動かす

Cursorで開く

または、設定を自分でコピーする

プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます

{
  "mcpServers": {
    "better-design": {
      "command": "npx",
      "args": [
        "-y",
        "better-design",
        "mcp"
      ],
      "env": {
        "BETTER_DESIGN_API_KEY": "your-value"
      }
    }
  }
}

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

VS Codeで開く

または、設定を自分でコピーする

プロジェクトの .vscode/mcp.json に貼り付けます

{
  "servers": {
    "better-design": {
      "type": "http",
      "url": "https://better-design.com/api/mcp"
    }
  }
}

または、パソコンで動かす

VS Codeで開く

または、設定を自分でコピーする

プロジェクトの .vscode/mcp.json に貼り付けます

{
  "servers": {
    "better-design": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "better-design",
        "mcp"
      ],
      "env": {
        "BETTER_DESIGN_API_KEY": "your-value"
      }
    }
  }
}

ChatGPTがつなげるのは、インターネット上のサーバーだけです：

ウェブ版のChatGPTを開き → Settings → Connectors (Apps)
Create または Add を押す（プランによっては、先に Advanced で Developer mode をオンにする必要があります）
下のアドレスを貼り付け、名前を付けて保存する
サインインを求められたら、作者のサービスにサインインする

https://better-design.com/api/mcp

メニューの名前は、プランや時期によって少し違うことがあります。

選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。

自分で入力する値

BETTER_DESIGN_API_KEY 秘密必須 env
Create or manage a key at https://better-design.com/mcp

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

できること

このサーバーは、ツール一覧を表示する前にサインインを求めます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック

! 注意
作者とリポジトリが一致
公開者（marvkr）がリポジトリの所有者（better-designs）ではありません。別の人が登録した可能性があります
… 未チェック
今もメンテナンスされている
このリポジトリはまだGitHubから読み取っていません
… 未チェック
ライセンスがある
このリポジトリはまだGitHubから読み取っていません
✓ 合格
エンドポイントが応答する
96ミリ秒で応答（HTTP 401）
✓ 合格
OAuthでサインイン
OAuthでのサインインに対応しているため、AIアプリがログイン画面へ案内してくれます
… 未チェック
ツールの説明に隠れた指示がない
まだチェックしていません。エンドポイントをチェックするときにツール一覧を読み取ります

デザイン・画像・音声のほかのサーバーとの比較i

このカテゴリのほかの2204件のうち0%よりスターが多い
このカテゴリのほかの2204件のうち68%より最近レジストリに公開
基本チェックの結果が、このカテゴリのほかの2204件のうち43%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Better Designは安全ですか？

当てはまる基本チェック3項目のうち2項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

入力が必要なもの：BETTER_DESIGN_API_KEY

パソコンで動きますか、それともクラウドですか？

どちらでも使えます。パソコンにインストールしても、クラウド版につないでもかまいません。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は–、最新バージョン（0.48.0）がレジストリに届いたのは15 日前です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URLでつながるので、リモートMCPサーバーに対応したアプリ（開発者モードのChatGPTなど）でも使えます。

代わりに使えるものは？

同じカテゴリには：Figma Context MCP, Claude Real Video, Figma MCP Server

代わりの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方：★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

Figma Context MCP

作者：GLips

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

パソコンで動く★ 16,165MIT5 か月前更新

インストール

Claude Real Video

作者：HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

パソコンで動く★ 2,284MIT2 か月前更新

インストール

Figma MCP Server

作者：figma

The Figma MCP server brings Figma design context directly into your AI workflow.

クラウドで動く★ 2,15213 か月前更新

インストール

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

Better Design

A design harness for AI coding agents. This plugin connects your agent to the Better Design MCP server, so the interfaces it builds use a real design system, follow design principles, and pass UI review checks.

What your agent gets

A design system for your app. Find one that fits your product, preview it, and install its components, or generate a custom one from a description or your own site.
Design principles. Visual design, UX flows, forms, onboarding and interface copy, plus references for React Native, SwiftUI, Three.js and Shopify themes.
Review checks. Accessibility, copy clarity and measured spacing for the screens your agent builds.
Icons you own. Icon sets returned as React components, with no runtime CDN.

What this repository holds

This repository holds the plugin files only: the manifests, the MCP server entry and two skills. The Better Design server and its design systems run at better-design.com. Browse the catalog at better-design.com/design-systems.

Skill	What it does
`build-with-better-design`	Chooses a design system with the user, installs it, and builds on it
`review-ui-with-better-design`	Reviews a screen for accessibility, visual design, copy clarity and spacing

Install

Tool	How
Any terminal agent, no account	`npx better-design`
Gemini CLI	`gemini extensions install https://github.com/better-designs/better-design-plugin`
Claude Code	`/plugin marketplace add better-designs/better-design-plugin`, then `/plugin install better-design@better-design`
Claude Code, MCP only	`claude mcp add --transport http better-design https://better-design.com/api/mcp`
Any skills client	`npx skills add better-designs/better-design-plugin`
Any MCP client	Add the remote server `https://better-design.com/api/mcp`

npx better-design needs no account. It connects Better Design to your coding tools and creates a free key with a small allowance. When the allowance runs out, the agent gives you a claim link that moves the key onto a free account.

Every other route opens a Better Design sign-in on the first connection. A free account works.

Privacy

Better Design's privacy policy and terms apply. Support: info@better-design.com.

Better Design

概要

PopNx MCPの3つの柱

できること

インストール

インストールの前に

または、パソコンで動かす

または、パソコンで動かす

または、パソコンで動かす

または、パソコンで動かす

自分で入力する値

できること

基本チェックi

作者とリポジトリが一致

今もメンテナンスされている

ライセンスがある

エンドポイントが応答する

OAuthでサインイン

ツールの説明に隠れた指示がない

デザイン・画像・音声のほかのサーバーとの比較i

よくある質問

代わりの候補

Figma Context MCP

Claude Real Video

Figma MCP Server

作者のREADME

Better Design

What your agent gets

What this repository holds

Install

Privacy