Claude Built a Skeuomorphic Keyboard Simulator in One Session — Public Transcripts, CORS Proxied Unsplash Backgrounds

A developer on r/ClaudeAI shared a skeuomorphic keyboard simulator built in a single Claude session. The app, live at asdf.app.teenyapp.com, renders a realistic keyboard that lights up as you type on your physical keyboard. Pressing Enter broadcasts the line into a public transcript visible to all visitors.

Key technical decisions

• Initial prompt: "keyboard recorder with a calculator tape history scrolling above, skeuomorphic. Claude shipped v1 in one pass, but generic."
• Figma import: The developer uploaded a Figma file of the desired keys. Claude installed fig kiwi (a community parser for Figma's binary format), walked all 98 nodes, and extracted exact gradients and blurs. CSS recreations came out "ringed" and too sharp — the fix was to port all SVG layers from Figma one by one.
• Typing logic: The first version used a custom div as input, so Cmd+ArrowLeft and Cmd+Backspace did nothing. The fix was to use a hidden <input> underneath the orange display, mirroring its value into the visible text and letting the OS handle every shortcut natively.
• Backgrounds: Real Unsplash photos (marble, walnut, barnwood, slate) fetched through a CORS proxy and served back as cached WebP.

This is a practical demonstration of how Claude can be guided from a vague idea to a polished, functional web app in a single session — if you're willing to iterate on design and work around LLM output quirks.