Claudeが1セッションで作成したスキューモーフィックキーボードシミュレーター — 公開トランスクリプト、CORSプロキシ対応Unsplash背景

r/ClaudeAIの開発者が、一回のClaudeセッションで構築したスキューモーフィックキーボードシミュレーターを共有しました。このアプリはasdf.app.teenyapp.comで公開されており、物理キーボードでタイプするとそれに合わせて光るリアルなキーボードを表示します。Enterキーを押すと、その行が公開トランスクリプトにブロードキャストされ、すべての訪問者が閲覧できます。

主要な技術的決定

• 最初のプロンプト: 「計算機テープの履歴が上にスクロールするキーボードレコーダー、スキューモーフィック。Claudeはv1を一回で出しましたが、汎用的でした。」
• Figmaのインポート: 開発者は希望するキーのFigmaファイルをアップロードしました。Claudeはfig kiwi（Figmaのバイナリ形式のコミュニティパーサー）をインストールし、98個のノードすべてを走査して正確なグラデーションとぼかしを抽出しました。CSSでの再現は「リング状」でシャープすぎたため、修正策はFigmaからSVGレイヤーを一つずつ移植することでした。
• タイピングロジック: 最初のバージョンではカスタムのdivを入力として使用していたため、Cmd+矢印左やCmd+Backspaceが機能しませんでした。修正策は、オレンジ色のディスプレイの下に非表示の<input>を配置し、その値を表示テキストにミラーリングして、OSがすべてのショートカットをネイティブに処理できるようにすることでした。
• 背景: 大理石、クルミ、バーンウッド、スレートなどの実際のUnsplash写真をCORSプロキシ経由で取得し、キャッシュされたWebPとして配信しました。

これは、Claudeを漠然としたアイデアから洗練された機能的なWebアプリへと、一回のセッションで導く方法の実践的なデモンストレーションです。ただし、設計を繰り返し、LLMの出力の癖に対処する意欲が必要です。