200以上のアプリデザイン仕様書（Markdown形式） – ClaudeやCursorにドラッグして正確なUIクローンを作成

ClaudeにUIを散文で説明すると、それっぽいけれど色が少しずれていたり、スペーシングが違ったり、状態が欠けていたりします。解決策は？説明ではなく、正確な仕様を渡すことです。ある開発者は、構造化マークダウンデザイン仕様としてすでに書き起こされた200以上の人気アプリのリストを維持しており、spectr.to/galleryで入手できます。

各仕様に含まれるもの

• 色の正確な16進数コード
• タイプスケールの定義
• スペーシング値（パディング、マージン、ギャップ）
• すべての画面状態（ローディング、空、エラーなど）
• 画面遷移を示すナビゲーショングラフ
• SwiftUI、Jetpack Compose、Expoレンダラー用の個別仕様

各仕様は依存関係のないマークダウンファイルで、Claude、Cursor、または任意のAIエージェントに直接ドラッグするだけで、推測ではなく実際の値が提供されます。

使い方

spectr.to/galleryのギャラリーを閲覧してアプリを探します。ターゲットフレームワーク用のマークダウン仕様をダウンロード（またはコピー）します。ファイルをAIエージェントのコンテキストにドロップするか、インラインで貼り付けます。エージェントは正確な仕様を使用してUIコードを生成します。

メンテナーは2つのポイントについて積極的にフィードバックを求めています。次に追加するアプリと、仕様をファイルとしてドラッグするかインラインで貼り付けるかのどちらが良い結果をもたらすか——彼らはその点で意見が分かれており、実際の意見をお待ちしています。