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
OpenClaw Architecture: Building a Persistent AI-Driven Distribution Engine
OpenClaw's architecture, featuring a daemon-driven approach with small composable tools, declarative recipes, and a memory layer, enables continuous and efficient automation workflows.
ALTWORLD: A Persistent Life-Sim Architecture That Separates LLM from Database to Solve AI Amnesia
ALTWORLD is a stateful simulation game that addresses the context window problem by storing canonical run state in PostgreSQL tables and JSON blobs, then generating narrative text only after state changes. The architecture uses Next.js App Router, Prisma, and PostgreSQL with strict separation between simulation logic and AI narration.
RunLobster AI Agent Integrates Business Data for Operational Insights
A developer gave RunLobster root access to their business systems including Stripe, CRM, email, and call transcripts. The agent autonomously monitors operations, flags anomalies, and provides detailed briefings based on integrated data analysis.
Running Claude Code Remote Control on a Cloud Server via RAgent
A developer deployed the open-source RAgent project to Railway to run Claude Code's Remote Control feature from a cloud server, solving the issue of laptop sleep disconnecting sessions. The setup uses a $5/month VPS as an always-on Claude Code machine accessible via the Claude mobile app.