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
divas input, soCmd+ArrowLeftandCmd+Backspacedid 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.
📖 Read the full source: r/ClaudeAI
👀 See Also
Claude as a Coding Mentor: From Zero to Shipped Full-Stack SaaS in a Month
A developer used Claude to learn SvelteKit 2, Stripe subscriptions, MongoDB, and AES-256 encryption, shipping a zero-knowledge encrypted pastebin called CloakBin in one month.
Reducing AI Agent Context Bloat with Single Workspace Architecture
A developer shares how they reduced AI assistant startup context from 27,000 to 4,000 tokens by implementing a single workspace approach instead of complex agent swarms, using channel-level identity injection and segregated memory folders.
Non-technical freelancer uses MaxClaw and MiniMax Agent to expand services
A social media strategist with no coding ability uses MiniMax Agent to build landing pages and MaxClaw to handle client briefs and content research, increasing project rates from $1,500 to $3,200.
Browser-based curling game built with Claude Sonnet 4.5 by non-coder
A developer with zero coding experience built a fully playable browser-based curling game using Claude Sonnet 4.5. The game includes physics, scoring, and complete game flow, with Claude handling all code generation, debugging, and refinement based on plain English feedback.