Claude a construit un simulateur de clavier skeuomorphique en une session — Transcriptions publiques, arrière-plans Unsplash avec proxy CORS

Un développeur sur r/ClaudeAI a partagé un simulateur de clavier squéuomorphique construit en une seule session Claude. L'application, accessible à asdf.app.teenyapp.com, affiche un clavier réaliste qui s'illumine lorsque vous tapez sur votre clavier physique. Appuyer sur Entrée diffuse la ligne dans une transcription publique visible par tous les visiteurs.

Décisions techniques clés

• Invite initiale : « enregistreur de clavier avec un historique sur ruban de calculatrice défilant au-dessus, squéuomorphique. Claude a livré la v1 en un passage, mais générique. »
• Import Figma : Le développeur a téléchargé un fichier Figma des touches souhaitées. Claude a installé fig kiwi (un analyseur communautaire pour le format binaire de Figma), parcouru les 98 nœuds, et extrait les dégradés et flous exacts. Les recréations CSS sont ressorties « cerclées » et trop nettes — la solution a été de porter une par une les couches SVG depuis Figma.
• Logique de frappe : La première version utilisait un div personnalisé comme champ de saisie, donc Cmd+FlècheGauche et Cmd+RetourArrière ne fonctionnaient pas. La solution a été d'utiliser un <input> masqué sous l'affichage orange, en reflétant sa valeur dans le texte visible et en laissant le système d'exploitation gérer tous les raccourcis nativement.
• Fonds d'écran : De vraies photos Unsplash (marbre, noyer, bois de grange, ardoise) récupérées via un proxy CORS et servies en WebP mis en cache.

C'est une démonstration pratique de la façon dont Claude peut être guidé d'une idée vague à une application web fonctionnelle et soignée en une seule session — si vous êtes prêt à itérer sur le design et à contourner les bizarreries de sortie des LLM.