mcpField
R
Random Design

Random Design

Local
github.com/yanislav-igoninDeveloper Tools0Updated 21w ago
Repository

About Random Design

Random Design is a TypeScript MCP server for generating randomized English Markdown directions for frontend design. It draws from curated catalogs, can optionally score compatibility, and does not call an LLM.

Key features

  1. 01Generate randomized design directions
  2. 02Curated design catalogs
  3. 03Optional compatibility scoring
  4. 04Adjustable design context
  5. 05Version lookup

Use cases

  1. 01Explore directions for a landing page
  2. 02Generate dashboard design concepts
  3. 03Set audience and design priorities
  4. 04Create intentionally clashing combinations

MCP support

Provides the `generate_design_description` tool for randomized design directions and `get_version` for the package version. It can be installed in MCP clients that support stdio servers.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "yanislav-igonin-random-design": {
      "command": "npx",
      "args": [
        "-y",
        "random-design-mcp"
      ]
    }
  }
}
Run commandnpx -y random-design-mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmrandom-design-mcp2.1.0

Tools

2

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
audiencestringNo
prioritystringNo
productTypestringNo
compatibilitybooleanNo

Details

From the project README

Random Design MCP

TypeScript MCP server that returns randomized English Markdown frontend design directions. It uses curated catalogs and optional soft compatibility scoring. It does not call an LLM.

Website: https://random-design-mcp.h0b0.dev

Install

Use the published npm package from any MCP client that supports stdio servers:

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

Tools

generate_design_description returns one randomized Markdown design direction. All input fields are optional, but passing context makes the result easier to use:

{
  productType?: string;
  audience?: string;
  priority?: string;
  compatibility?: boolean; // defaults to true
}
  • productType: what you are designing, such as landing page, dashboard, mobile app, or pricing page.
  • audience: who the interface is for, such as developers, founders, or enterprise buyers.
  • priority: what the design should optimize for or pay extra attention to, such as conversion, readability, premium feel, dense data display, or playful experimentation.
  • compatibility: controls how wild the random combination can be. It defaults to true, which keeps generated parameters more coherent and practical. Set it to false for unconstrained combinations that can intentionally mix clashing eras, styles, palettes, layouts, and materials.

get_version takes no arguments and returns the package version from package.json. Use it to confirm which published or cached MCP package version an MCP client is running.

Development

npm install
npm run build
npm run check

Preview one generated design direction locally:

npm run dev

Optional preview context:

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

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.