Designing Home Screen
メニューを表示するにはスワイプしてください
You 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, you 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
- Create a new folder for the project (e.g.,
help-colin-game) and open it in Cursor (File → Open Folder); - Place
room.pngandcolin.pngin the project root; - Open a new chat in Cursor;
- Paste the prompt below and run it;
- Click Go Live to preview.
What the result should include
- The background features
room.pngwith 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.
すべて明確でしたか?
フィードバックありがとうございます!
セクション 2. 章 1
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
セクション 2. 章 1