{ "markdown": "\n\n

\n \"Star\n \"npm\n \"npm\n \"MIT\n \"Documentation\"\n

\n\nA design system for 2000s-era consumer-electronics interfaces, written for coding agents.\n\n> **Like what you see?** [⭐ Star pudge-ui on GitHub](https://github.com/pudge-studio/pudge-ui) — it helps coding agents and developers discover the project.\n\npudge-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.\n\nSkeuomorphic 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.\n\nEvery component spec covers:\n\n- **Physical analog** — the real 2000s hardware it mimics (Sony Walkman, Nikon dials, iPod click wheel, Nokia keypads, DJ consoles)\n- **Mechanism** — how the part actually works (dome switches, rotary encoders, capacitive touch)\n- **CSS recipe** — the exact CSS that reproduces the look\n- **Constraints** — rules that rule out the \"close but wrong\" version\n\n## Use it\n\n1. Browse the components at [ui.pudgestudio.com](https://ui.pudgestudio.com).\n2. Copy a component spec, or install the MCP server below.\n3. Give it to your agent (Claude, GPT, Copilot, whatever) and describe what you're building.\n\n## Quick start\n\n### With MCP (Claude Code, Cursor, etc.)\n\nAdd to your MCP config:\n\n```json\n{\n \"mcpServers\": {\n \"pudge-ui\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@pudge-ui/mcp-server\"]\n }\n }\n}\n```\n\nThen ask your agent: _\"Build a music player interface using pudge-ui components\"_\n\n### Manual (any LLM)\n\n1. Copy the [foundation spec](spec/foundation/)\n2. Copy the [component spec(s)](spec/components/) you need\n3. Paste into your LLM conversation\n4. Describe what you want to build\n\n## What's inside\n\n### 93 components across 11 categories\n\n| Category | Components | Inspired by |\n| -------------- | ------------------------------------------------------------------------ | ------------------------------------------ |\n| **Buttons** | Push, gel, rubber, clear, keypad, REC, function grid, icon, segmented | Sony Alpha, iPod, Nokia, Gameboy |\n| **Toggles** | Toggle, slide, rocker, power, DIP switch, LED checkbox, radio | Camera switches, phone silent switch |\n| **Dials** | Rotary encoder, mode dial, radial knob, cylindrical scroll, click wheel | Nikon mode dial, DJ knobs, iPod wheel |\n| **Sliders** | Volume, scrubber, fader, dual range, crossfader, stepper, vertical fader | Mixing console, DJ crossfader |\n| **Readouts** | Signal display, camera readout, LCD, timecode, 7-segment, dot matrix | Camera viewfinder, alarm clock, LED ticker |\n| **Meters** | Spectrum, VU, EQ, histogram, waveform, gauges, oscilloscope | Audio equipment, camera histogram |\n| **Navigation** | Menu grid, list, tab bar, D-pad, rack panel, breadcrumbs, pagination | Nokia menu, iPod list, Gameboy D-pad |\n| **Forms** | Text input, textarea, search, select, color picker, file input | Equipment LCD entry, TV color bars |\n| **Overlays** | Panel, bezel, dialog, toast, focus brackets, grid overlay, tooltip | Rack-mount panels, camera AF |\n| **Indicators** | Chips, badges, LEDs, spinners, skeleton, accordion, transport controls | Panel LEDs, iPod transport |\n| **Data** | Data table, media grid, film strip | Diagnostic readouts, contact sheets |\n\n### 6 material surfaces\n\nEvery component uses one of six physically-accurate material recipes:\n\n1. **Brushed Metal** — iPod back plate, anodized aluminum\n2. **Chrome** — Nikon dial rings, polished trim\n3. **Rubber** — Gameboy buttons, soft-touch matte\n4. **Glossy Polycarbonate** — iPod Nano case, gel buttons\n5. **Glass** — iMac G3 clear shell, frosted plastic\n6. **Phosphor Screen** — Camera viewfinder, VU meter display\n\n## Project structure\n\n```\nspec/\n foundation/ design tokens, materials, depth model, naming\n components/ individual component specs\n compositions/ multi-component assembly specs\n guides/ extension guide, LLM usage guide, prompt templates\npackages/\n mcp-server/ MCP server for agent integration\ndocs/ documentation site (ui.pudgestudio.com)\n```\n\n## Philosophy\n\n1. **Physical analog commitment** — every CSS property maps to a real material or manufacturing process\n2. **Warm neutral palette** — warm grays (`#1c1a18` not `#1c1c1c`) under tungsten workbench lighting\n3. **Three-plane depth model** — every raised element uses a 3-layer shadow stack\n4. **Material honesty** — rubber looks different from chrome looks different from glass\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n## License & brand\n\nCode and component specs are [MIT](LICENSE). The **pudge-ui** name, the **Pudge** capybara mascot,\nand the logo are trademarks of Pudge Studio and are **not** covered by the MIT license — please\ndon't use them to imply endorsement or for a fork's branding.\n\n## License\n\n[MIT](LICENSE)\n", "bytes": 6449, "sha": "902e2d0ae795863243924fe5fc595c8fbdd484abef273c2bc627d18f13e2745c", "repo_slug": "pudge-studio/pudge-ui", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_pudge_studio_pudge_ui_04b874b3/readme" }