Hand an AI coding assistant a component spec so it builds a 2000s-style skeuomorphic button, dial, or slider in your own tech stack.
Add the pudge-ui MCP server to Claude Code or Cursor so your agent can fetch component specs automatically.
Design a music player, camera app, or retro-styled interface using consistent physically-inspired materials like chrome and rubber.
Browse the component library at ui.pudgestudio.com to find a spec matching a real piece of 2000s hardware.
| pudge-studio/pudge-ui | codee-sh/payload-training-app | itsfriedpotato/potatopad | |
|---|---|---|---|
| Stars | 10 | 10 | 10 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | easy | moderate | hard |
| Complexity | 2/5 | 4/5 | 5/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
pudge-ui is a design guide meant to be read by AI coding assistants rather than installed as a package. It describes how to build user interfaces that look like consumer electronics from the 2000s, things like an iPod click wheel, a Nikon camera dial, or a Nokia phone keypad. Instead of shipping ready-made buttons and sliders you import into your code, pudge-ui gives written specifications: descriptions of the physical object being copied, how that object mechanically works, the exact CSS needed to recreate its look, and rules that keep an implementation faithful to the original. The idea behind this approach is that detailed, textured visual styles do not fit neatly into simple design settings like a single color value. Describing the layered shadow of a raised rubber button, or the way light falls inside a recessed screen, needs prose, and prose is exactly what a language model can read and act on well. A person hands these written specs to a coding assistant such as Claude, GPT, or GitHub Copilot, describes what they want to build, and the assistant produces the actual component in whatever technology the project uses, whether that is React Native, SwiftUI, Jetpack Compose, Flutter, or plain CSS. The project includes 93 individual component specs across categories like buttons, toggles, dials, sliders, screens, meters, navigation, forms, and data tables, each modeled on real hardware such as Sony cameras, iPods, Nokia phones, and DJ equipment. It also defines six standard materials, including brushed metal, chrome, rubber, glossy plastic, glass, and a phosphor screen effect, so different components share a consistent physical feel. The specs can be used by pasting them directly into a conversation with an AI assistant, or through a small MCP server that lets tools like Claude Code or Cursor fetch them automatically. This project is aimed at developers and designers who use AI coding assistants and want a distinctive, nostalgic visual style for their interfaces. The code and component specifications are released under the MIT license and can be reused freely, including commercially, though the project's name, mascot, and logo are trademarks and are not covered by that license.
A written design specification, meant for AI coding agents, that describes how to build 2000s-style consumer electronics interfaces in any tech stack.
Mainly TypeScript. The stack also includes TypeScript, MCP, CSS.
Use freely for any purpose, including commercial use, as long as you keep the copyright notice. The project name, mascot, and logo are separate trademarks not covered by this license.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Don't trust strangers blindly. Verify against the repo.