50の一般的なアプリをClaudeが読み取り可能なデザイン仕様にリバースエンジニアリング：UIクローン作成のための主要パターン

u/meliwatは数週間かけて50の人気アプリを構造化マークダウンデザイン仕様にリバースエンジニアリングし、それらをClaudeに与えてUIを再構築しました。ほぼ完璧なクローンと逸脱した出力の違いは、大量に観察したいくつかの具体的なプラクティスに集約されました。

ClaudeがUIクローンを完璧に再現したポイント

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

役に立たなかったこと

長文。ある時点を超えると、言葉を増やすほど出力は悪化しました。仕様は簡潔に保ちましょう。

利用可能なリソース

全コレクションはGitHubでオープンソース化されています: github.com/Meliwat/awesome-ios-design-md。各アプリには3つの仕様深度（クイックリファレンス、標準ビルド、フルピクセルレベルクローン）が付属しています。すべてマークダウン、MITライセンス、依存関係なし。

コミュニティへの質問

著者は次のように問いかけています: ClaudeでUIクローンを行ったことがある方、このリストに欠けているパターンはありますか？次に追加すべきアプリはどれですか？