Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Designing Home Screen | Creating a Catching Game Pack the Bag
Build Games with Cursor AI

bookDesigning Home Screen

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.

Build the home screen.
expand arrow
  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.
What the result should include.
expand arrow
  • 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.
question mark

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

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 1

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain how to customize the home screen further?

What should I do if I want to use my own images instead of the provided ones?

How do I make the "Help Colin" button start the game in the next step?

Awesome!

Completion rate improved to 6.67

bookDesigning Home Screen

Swipe um das Menü anzuzeigen

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.

Build the home screen.
expand arrow
  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.
What the result should include.
expand arrow
  • 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.
question mark

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

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 1
some-alt