Summary  
This chapter demonstrates how to build a home-screen UI by layering background and character images, positioning text and a call-to-action button, and adding floating decorative elements for a playful, responsive layout.  

General domain of usage  
Game development

We are launching a new game called "Help Colin." Colin has overslept, the bus is almost here, and the user's task is to help him get ready by catching good school supplies while avoiding the bad ones. First, we will create a bright and friendly home screen that tells this story.

Download the prepared images (`room.png`, `colin.png`). Prefer to use your own assets? That's fine, keep the same filenames or update the prompt accordingly.

1. Create a new folder for the project (e.g., `help-colin-game`) and open it in Cursor (File → Open Folder);
2. Place `room.png` and `colin.png` in the project root;
3. Open a new chat in Cursor;
4. Paste the prompt below and run it;
5. Click Go Live to preview.

Build the home screen.

- The background features `room.png` with a soft overlay to ensure the text is readable;
- On the left side, there is a large image of Colin (`colin.png`);
- The right side displays the game title along with a short, friendly story about Colin being late;
- There is a primary action button that says "Help Colin!" which is big and colorful, and it will start the game later;
- The overall mood includes floating school emojis for playful motion, with rounded, kid-friendly visuals designed to be responsive on both phones and laptops.

What the result should include.

In our home screen design, what appears on the left side?

Create simple browser games through the power of prompting in Cursor AI. Discover how to turn everyday ideas into interactive projects without coding knowledge. Practice guiding AI with clear instructions and polish your games into something you can proudly show.

Build your very first game by guiding Cursor AI with simple prompts. Explore how to flip cards, check for matches, and track progress in the browser. Learn to refine the AI output step by step and create a clean memory game anyone can play.

Create a fun and dynamic catching game with Cursor AI. Control a backpack at the bottom of the screen and catch school items falling from above. Practice adding scoring, player controls, and playful visuals while learning how to refine AI code generation.

Develop a small adventure where a rabbit tries to reach a carrot while avoiding foxes and wolves. Guide Cursor AI to generate movement, obstacles, and win or lose conditions. Learn how to adjust prompts to handle more complex logic and polish your game into a complete experience.

Designing Home Screen

Awesome!

Designing Home Screen