100の人気アプリをリバースエンジニアリングして作成した、Claude UIクローン用Markdownデザイン仕様書

ある開発者が、50の人気アプリをリバースエンジニアリングして構造化されたマークダウンデザイン仕様に変換し、Claudeに渡してUIを再構築しました。試行錯誤の結果、クローンの精度を向上させるいくつかの重要なパターンを発見し、100アプリを収録したリポジトリを公開しました。

ClaudeがUIクローンを成功させる秘訣

• 範囲ではなく正確な値： #1A1A1A は機能しますが、「ダークグレー」では画面ごとに5種類のグレーが生成されます。
• 事前に状態を網羅： すべての状態（空、ローディング、エラー、入力済み）をリストアップすることで、Claudeが独自の状態を発明するのを防ぎます。
• スペーシングをスケールで： 要素ごとのピクセル注釈ではなく、4/8/16/24のスペーシングシステムを使用することで、より一貫したレイアウトを実現。
• ナビゲーションをグラフで： 画面間の遷移を明示することで、ボタンの行き先を推測する必要がなくなります。

ある程度を超えて散文が長くなると出力が悪化しました——量より簡潔さと正確さが重要です。

リポジトリの内容

公開リポジトリ github.com/Meliwat/awesome-ios-design-md には100のアプリが含まれており、各アプリに3段階の仕様深度（クイックリファレンス、標準ビルド、完全ピクセルレベルクローン）が用意されています。すべての仕様はマークダウン形式で、MITライセンス、依存関係はありません。仕様をClaudeに入力すると、より予測可能なUI出力が得られます。

対象読者

Claudeを使用してUIコンポーネントを生成またはクローンする開発者。特にiOSや一般的なアプリデザインを扱う方。