pudge-studio/pudge-ui

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.