io.github.pudge-studio/pudge-ui

A design system for 2000s-era consumer-electronics interfaces, written for coding agents.

Like what you see? ⭐ Star pudge-ui on GitHub — it helps coding agents and developers discover the project.

pudge-ui is a specification, not a component library. There's no package to install and no React components to import. Each component is a written spec — the physical part it imitates, how that part works, the exact CSS, and the rules that keep an implementation honest. You hand the spec to a coding agent, and it builds the component in whatever stack you're using: React Native, SwiftUI, Jetpack Compose, Flutter, or plain CSS.

Skeuomorphic detail doesn't fit in design tokens. --color-primary: blue can't describe the three-layer shadow of a raised rubber button or the lip shadow inside a recessed LCD. That needs prose — which is also what an LLM reads best.

Every component spec covers:

• Physical analog — the real 2000s hardware it mimics (Sony Walkman, Nikon dials, iPod click wheel, Nokia keypads, DJ consoles)
• Mechanism — how the part actually works (dome switches, rotary encoders, capacitive touch)
• CSS recipe — the exact CSS that reproduces the look
• Constraints — rules that rule out the "close but wrong" version

Use it

1. Browse the components at ui.pudgestudio.com.
2. Copy a component spec, or install the MCP server below.
3. Give it to your agent (Claude, GPT, Copilot, whatever) and describe what you're building.

Quick start

With MCP (Claude Code, Cursor, etc.)

Add to your MCP config:

{
  "mcpServers": {
    "pudge-ui": {
      "command": "npx",
      "args": ["-y", "@pudge-ui/mcp-server"]
    }
  }
}

Then ask your agent: "Build a music player interface using pudge-ui components"

Manual (any LLM)

1. Copy the foundation spec
2. Copy the component spec(s) you need
3. Paste into your LLM conversation
4. Describe what you want to build

What's inside

93 components across 11 categories

... View full README on GitHub