656件のすぐ使えるモバイルアプリ画面

必要要件

プロンプトをきれいに取り込む前にプロジェクトに必要なもの、何もない場合のスキャフォールド方法。

プロジェクトに必要なもの

あえて非常に少なくしています。デザインはそれぞれ独立していて、テーマから読み込むのではなく独自の色、余白、タイプを持っているため、先にインストールすべきデザインシステムはありません。

要件理由
Expo SDK 52以降各デザインがテストされているバージョンです。古いSDKでも動く場合がありますが、確認はしていません。
TypeScriptすべてのデザインは.tsxとして提供されます。JavaScriptプロジェクトでは型を手動で取り除く必要があります。
AIコーディングエージェントClaude Code、Cursor、Windsurf、または貼り付けたプロンプトを受け付けるもの。

まだプロジェクトがない場合

プロンプトが代わりにスキャフォールドしてくれますが、お好みで先に作成することもできます。

npx create-expo-app@latest my-app --template blank-typescript
cd my-app
npx expo start

プロンプトがインストールするもの

各デザインは実際にインポートしているものだけを宣言し、プロンプトはnpm installではなくnpx expo installを使うため、最新版ではなくあなたのSDKに合ったバージョンが入ります。どのデザインについても、そのページの「含まれるもの」に完全な一覧があります。

  • ほぼすべてがモーションにReanimated、セーフエリアにsafe-area-contextを使用します。
  • アイコンはPhosphor、画像はexpo-imageから提供されます。
  • フォントはExpo Google Fontsパッケージから提供され、アプリのルートで一度だけ読み込まれます。
Reanimatedには設定が1行必要です
そのBabelプラグインはbabel.config.jsのplugins配列の最後に置く必要があります。貼り付け後にアニメーションが何も動かない場合、ほぼ間違いなくこれが原因です。対処法はトラブルシューティングにあります。