Creating a Project from a Prompt

Step by step

From brief to first preview

Think of your first draft as a rough sketch you can shape. Here is the path from blank box to real page.

1

Write your brief

Click into the description box and type what you want. Say what it is, who it is for, what it should say, and what a visitor should do.

2

Answer the questions

AI Studio may ask about color palette, typography, layout, and your conversion goal. Pick an answer, skip one, or use Skip all to let it decide.

3

Watch it build

Give it a moment. Your page shows up in the preview, and you can scroll it and click around.

4

Check Preview and Code

Stay on Preview to see what a visitor sees. Code is what is under the hood, and you do not need it yet.

5

Test every device

Click the device icon and switch between desktop, tablet, and mobile. Always check mobile before you share.

6

Use the toolbar

Use the page dropdown to switch pages, refresh to reload the preview, and open in new tab to see the full-screen view.

Good brief

The four things a brief answers

A clear brief gives you a better first draft.

❓

What is it?

Name the page type, like a landing page for a local dog training business.

👥

Who is it for?

Say the audience, like new puppy owners. It shapes the words and style.

💬

What should it say?

List the headline idea and the sections you want, like three reasons to choose you.

👆

What should they do?

Name the one action, like a button to book a free call.

Key terms

Definitions

Tap any term to expand it.

The short description you type to tell AI Studio what to build.

The style of the letters on your page, like clean and modern or classic and serious.

The one action you want a visitor to take, like booking a call or filling out a form.

The live view of your page as a visitor would see it.

Help me do it

Things To Do

Finish these before moving to the next lesson. They only take a few minutes.

0 of 3 done

Type a brief for one real page you need, covering what, who, what it says, and the action.

Answer the follow-up questions, or click Skip all if they do not matter to you.

Scroll the whole preview, then switch between desktop, tablet, and mobile.

⚡ Tips

Say who the page is for. A page for busy parents reads very differently from one for business owners.
Always check mobile before you share a page.
Open in new tab is the best way to see the page without the tools around it.
If you made a change and do not see it, click refresh.

Check yourself

Quick Knowledge Check

Answer a few quick questions to lock in what you just learned. Miss one and we'll show you the right answer.

0 of 4 answered

Which is NOT one of the four things a good brief answers?

What does the device icon let you do?

The one action you want a visitor to take is called the ____ goal.

If a change does not show up in the preview, click the ____ button.

Help me apply it

Try This With Your Favorite AI

Copy a prompt below and paste it into ChatGPT, Claude, Gemini, or whatever AI tool you use. Fill in the bracketed details and it'll help you write your own version for your business.

✍️ Write my project brief

You are a clear copywriter helping me write a brief for AI Studio. My context: - [the page I need] - [who it is for] - [the one action a visitor should take] Give me: - A one-paragraph brief that covers what, who, what it says, and the action - A shorter one-sentence version - Three details I could add to improve the first draft Use plain words and no code terms. Finish by asking me: "What words do I want on the page that I have not shared yet?"

🎨 Prepare my design answers

You are a friendly design helper helping me answer follow-up questions before a page is built. My context: - [my business] - [colors I already use] - [the feel I want, like clean or bold] Give me: - A color palette answer - A typography answer in plain words - A layout answer and a conversion goal answer Keep each answer to one or two sentences. Finish by asking me: "Which question would I rather skip and let AI Studio decide?"