← All phases
3

Lesson 3 — Assets

Maps to: SYSTEM.md Phase 3 (asset-prompts) Goal: leave this lesson with a real app icon and splash screen — no more gray boxes.

What counts as an "asset"

An app icon (the square image on the home screen), a splash/launch screen (what shows for a second while the app opens), and any in-app illustrations. This phase is shared with the native Swift system — image generation doesn't depend on what stack the app is built in (see docs/course/05-skills-reference.md Part 3).

Generate the Habit Tracker's icon with ChatGPT

This system uses ChatGPT for asset generation (not fal.ai — see 06-tools-and-signups-guide.md). Ask Claude Code to use the asset-prompts skill to write you a ready-to-paste image prompt:

Use the asset-prompts skill to write an app icon prompt for HabitTracker — a habit-tracking app with a simple, friendly, minimal style. I'll paste the prompt into ChatGPT myself.

Claude Code hands you a prompt like:

A minimalist app icon for a habit-tracking app called "HabitTracker."
Simple flat design, a single checkmark inside a rounded square,
warm orange and cream color palette, no text, 1024x1024, app icon style.

Paste that into ChatGPT, generate the image, download it.

Place it in the project

Tell Claude Code:

Here's the icon I generated [attach the image]. Set it as HabitTracker's app icon and splash screen.

Claude Code updates app.json's icon and splash fields and drops the image file into the right place — you don't need to know the exact paths, just confirm it worked.

See it live

Re-scan the Expo Go QR code (or it may auto-refresh) — your app now shows the real icon instead of the default Expo logo, and the splash screen appears briefly on launch.

Deliverable

Your app has a real icon and isn't just gray boxes — the exact deliverable 04-workflow-course-overview.md Module 3 asks for.

Apply to your own idea

Write your own icon prompt (or ask Claude Code to, describing your app's concept from Lesson 1), generate it with ChatGPT, and place it the same way. If your app has any other visuals (illustrations, empty-state graphics), generate those the same way now, before Lesson 4 makes the core screens feel "real."

Prompts

Maps to: courses/react-native-course/lessons/03-assets.md (SYSTEM.md Phase 3)

Prompt 1 — Claude Code: write the icon prompt

Use the asset-prompts skill to write an app icon prompt for {{APP_NAME}} — {{ONE-LINE STYLE DESCRIPTION, e.g. "a habit-tracking app with a simple, friendly, minimal style"}}. I'll paste the prompt into ChatGPT myself.

Prompt 2 — ChatGPT: generate the icon

Paste whatever prompt Claude Code wrote you (from Prompt 1) directly into ChatGPT. This system uses ChatGPT for asset generation, not fal.ai (see 06-tools-and-signups-guide.md).

Prompt 3 — Claude Code: place the icon

Here's the icon I generated [attach the image]. Set it as {{APP_NAME}}'s app icon and splash screen.

Full lesson

courses/react-native-course/lessons/03-assets.md