First App.
Your learning space A little progress, every day
CHAPTER 03Lesson 7 of 20

Give the AI a useful first prompt

A useful prompt names the visitor, the job, the limits and what a working result should do.

In your AI helper6 min read & do
By the end of this lesson

Get a short building plan that matches your idea and your budget.

Let’s do this

  1. 1
    In your AI helper

    Give it your real brief

    Use the message below after filling in Your website idea. Replace any bracketed instructions still visible. Add a short description of the pages and the one action you want working first.

  2. 2
    In your AI helper

    Tell it where to work

    Say to use the folder already open, keep files inside it and inspect existing files first. If it finds a project, it should extend that project rather than start another app inside it.

  3. 3
    In your AI helper

    Set the money and design rules

    Ask for free libraries, no paid services and Cloudflare Pages-compatible output. Describe a clear style, such as a calm plant-care site with readable type, green accents and real plant names. Tell it which buttons must work.

  4. 4
    In your AI helper

    Read the plan before saying build

    It should describe a small first page, how to preview it, how it will be checked and any proposed files. If it adds accounts or payment systems you did not need, ask it to simplify. Once the plan fits, use the build message in the next lesson.

A message for your AI helper

I am building my first website for the people I want to help to [describe the problem my app should solve]. First features: [choose up to three small features]. Work inside the local folder already open and inspect it first. For a new project use React, TypeScript and Vite, Tailwind CSS, shadcn/ui where useful, and Lucide icons. Explain any alternative before using it. Use free core libraries and prepare for static hosting on Cloudflare Pages. No paid services, database, accounts or AI API unless I ask. Design for phones and laptops with clear text, useful empty states and working controls. Give me a short plan, tell me what each proposed file is for, and wait before building.

Make this message fit your idea.

What you should see

The AI gives you a small plan that you can explain back in your own words.

If you get stuck

Go at your own pace. There is no test to pass.

Checked 7 September 2026. Screens can change; the official guides below have the latest steps.

OpenAI: desktop setupAnthropic: Claude Code on desktopVite: getting startedshadcn/ui: introduction