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や一般的なアプリデザインを扱う方。
📖 全文ソース: r/ClaudeAI
👀 See Also

エージェントメール創業者、OpenClawによるCAPTCHAブロック暴露後、エージェントネイティブなオンボーディングの詳細を説明
AIエージェント向けメールAPIであるAgentMailは、自社のOpenClawエージェントがCloudflare CAPTCHAで失敗したことを受けて、オンボーディングフローを再構築しました。新しいシステムは、プログラムによるアカウント作成のための単一のRESTエンドポイントを提供しつつ、検証のために人間をループに残しています。

Routerly:ランタイムルーティングポリシーと予算管理を備えたセルフホスト型LLMゲートウェイ
Routerlyは、ルーティングポリシー(最安値、最速、最高性能など)に基づくランタイムモデル選択と、トークン単位の追跡によるプロジェクトレベルの予算制限を提供する、無料のオープンソース・セルフホスト型LLMゲートウェイです。OpenAI互換であり、Cursor、LangChain、Open WebUIなどのツールにそのまま組み込んで使用できます。

コマンドセンター:品質を重視する人のためのAIコーディング環境
Command Centerは、AI生成コードの難しい部分(レビュー、リファクタリング、従来のエンジニアリング規律による出荷)に焦点を当てたエージェンティックコーディング環境です。ウォークスルー、リファクタリングエージェント、スナップショットリカバリを備えています。

claude-sessions: Claudeコードトランスクリプト閲覧用ターミナルUI
claude-sessionsは、ローカルのClaude Codeトランスクリプトファイルをスキャンし、開発者が過去のセッションを閲覧、検索、再開できるオープンソースのターミナルUIツールです。Claude Code自体で構築されており、WASDナビゲーション、キーワード検索、ワンクリックでのセッション再開機能を備えています。