Step 5: Onboarding Setup

The Onboarding Flow is the first experience your users will have. This step combines generating the flow logic (questions, segments) and the visuals (welcome images).

The 2-Part Process

Because we need both Code (logic) and Assets (images), this process is split into two parts.

Part 1: Generate the Flow & Logic

In this step, we use the onboarding_generator to create the configuration files and prepare the image prompts.

1. Copy the Prompt Navigate to ai_rules/generators/onboarding_generator.md and copy the file.

2. Paste into Code AI Open your AI assistant (Cursor, Antigravity, etc.) and paste the prompt.

   Running the Onboarding Generator in the IDE

3. Generate Files The AI will generate:

   • src/features/onboarding/config/welcome-onboarding-config.ts (The slides)
   • src/features/onboarding/config/onboarding-questionnaires.ts (The questions)
   • onboarding-prompts.json (The inputs for Part 2)

   The generated configuration files in your editor

Part 2: Generate the Visuals

Now we use the onboarding_image_generator to turn that JSON into actual image assets.

1. Copy the Prompt Navigate to ai_rules/generators/onboarding_image_generator.md.

2. Paste into AI Paste the prompt and the content of onboarding-prompts.json. The AI will generate prompts for Midjourney/DALL-E.

3. Generate & Save Images Generate the 4 images and save them to your computer.

   Save your generated images locally first

4. Compress Images (Crucial!) Mobile apps explain if images are too large.

   • Go to FreeConvert (PNG to WebP)
   • Upload your 4 images
   • Compress them to WebP format (aim for < 50kb each)

   Compressing images to keep app size low

5. Move to Assets Move the compressed images to assets/images/onboarding/.

   

   The final assets inside your project structure

Verification