Random Design

Random Design MCP

ランダムな英語の Markdown フロントエンドデザイン案を返す、TypeScript 製の MCP サーバーです。厳選されたカタログと、任意で使用できる緩やかな互換性スコアリングを利用します。LLM は呼び出しません。

ウェブサイト：https://random-design-mcp.h0b0.dev

インストール

stdio サーバーに対応している任意の MCP クライアントから、公開されている npm パッケージを使用します。

{
  "mcpServers": {
    "random-design": {
      "command": "npx",
      "args": ["-y", "random-design-mcp"]
    }
  }
}

ツール

generate_design_description は、ランダムに生成した Markdown 形式のデザイン案を 1 つ返します。 すべての入力フィールドは任意ですが、コンテキストを指定すると結果を活用しやすくなります。

{
  productType?: string;
  audience?: string;
  priority?: string;
  compatibility?: boolean; // defaults to true
}

• productType：デザインする対象です。例：landing page、dashboard、mobile app、pricing page。
• audience：インターフェースの対象者です。例：developers、founders、enterprise buyers。
• priority：デザインで最適化する項目、または特に注意を払う項目です。例：conversion、readability、premium feel、dense data display、playful experimentation。
• compatibility：ランダムな組み合わせの大胆さを制御します。デフォルトは true で、生成されるパラメーターの一貫性と実用性が保たれます。false に設定すると制約のない組み合わせになり、意図的に相反する時代、スタイル、パレット、レイアウト、素材を混在させられます。

get_version は引数を取らず、package.json のパッケージバージョンを返します。MCP クライアントが実行している公開済みまたはキャッシュ済みの MCP パッケージのバージョンを確認するために使用します。

開発

npm install
npm run build
npm run check

生成されたデザイン案を 1 つローカルでプレビューします。

npm run dev

任意のプレビューコンテキスト：

RANDOM_DESIGN_PRODUCT_TYPE="Landing page" \
RANDOM_DESIGN_AUDIENCE="Developers" \
RANDOM_DESIGN_PRIORITY="Conversion" \
RANDOM_DESIGN_COMPATIBILITY=false \
npm run dev