The recipe

This is the skill the rest of the course stands on. The same AI, given a vague request, gives you something generic and half-broken. Given a clear one, it gives you something you can use in two minutes. The difference is not luck. It is a recipe with four parts.

The four parts

Remember the four words: Role, Task, Limits, Shape.

Limits is the part beginners skip, and the part that matters most.

Why a recipe works

Remember from What AI actually is: the AI predicts a likely answer from your words. Every detail you leave out, it fills in with a guess. The guess is usually "whatever is most common on the internet".

Most common is rarely what you want. Most common is three separate files, a popular library you have not installed, the name "John Doe", and a long explanation before the code.

Each part of the recipe removes a set of guesses.

Part 1: Role

The role tells the AI what kind of expert to act as, and who it is talking to.

You are a web developer teaching a complete beginner.

This one line changes the tone, the vocabulary and the level of detail. "Teaching a beginner" makes it explain more and assume less.

Some roles you will use in this course:

• You are a web developer teaching a complete beginner.
• You are a patient JavaScript teacher.
• You are a careful code reviewer looking for bugs and security problems.
• You are a senior developer helping me debug.

Part 2: Task

The task is what you want, in one clear sentence. Start with a verb.

• Build a one-page personal website for me.
• Add a "Delete" button to each expense in my list.
• Explain what this error message means.
• Find why the total is wrong when I add a second expense.

One task per prompt. "Build my website and add a contact form and make it dark mode and add animations" is four tasks. The AI will do all four badly, and when something breaks you will not know which part broke. Ask for one thing, check it, then ask for the next. That is the loop.

Add the details the task needs. For a personal website, that means your real name, your college, your skills. If you do not give them, the AI invents them.

Part 3: Limits

Limits are the rules the answer must follow. This is where most of the quality comes from.

Good limits for a beginner project:

• One file only. HTML, CSS and JavaScript together in one index.html. Easy to copy, easy to publish.
• No libraries or frameworks. Plain HTML, CSS and JavaScript. Nothing to install.
• Must work on a phone. Mobile-first, readable without zooming.
• Use only the details I give you. No placeholder names, no invented projects.
• Keep it simple. Under a certain length, or "the simplest version that works".
• Do not change anything else. Essential when editing existing code.

Without limits, the AI makes choices for you. Some of those choices will need tools you do not have, or produce code too complex to understand. With limits, you stay in control.

Part 4: Shape

Shape is what the answer should look like. Without it, you often get a long introduction, three partial code snippets, and a list of "next steps" you did not ask for.

Useful shapes:

• The complete file in one code block, no explanation. Best when you will copy and paste the whole thing.
• Explain first in five bullet points, then the complete code. Best when you are learning.
• Only the changed lines, with the line numbers. Best for small edits in big files, once you are comfortable.
• Numbered steps, one action per step. Best for setup instructions.
• Ask me up to five questions first, then wait. Best when you are not sure what you want yet.

"Complete file" matters more than it looks. If the AI gives you only the changed part, you have to work out where it goes. Beginners get this wrong often, and the result is a broken page. Asking for the complete file avoids that.

The recipe in full

Here is a complete prompt for Project 1, the kind the workshop used. Notice all four parts.

You are a web developer teaching a complete beginner.

Build a one-page personal website for me. My details:
- Name: [your full name]
- About me: [one line about you]
- College and course: [your college and course]
- Skills: [three skills]
- Projects or activities: [two things you have done]
- Email: [an email you check]

Limits:
- One file only, called index.html, with the CSS inside a <style> tag.
- No libraries, no frameworks, no external images.
- Mobile-first: it must look good on a phone without zooming.
- Use only the details I gave. No placeholder names, no invented projects.
- Clean, simple design with good contrast so it is easy to read.

Shape: give me the complete file in one code block, starting with <!DOCTYPE html> and ending with </html>. No explanation before or after.

A reusable template

Keep this somewhere you can copy it from. Fill in the brackets every time.

You are [role].

[Task: one sentence starting with a verb.]
[Any details the task needs.]

Limits:
- [limit]
- [limit]
- [limit]

Shape: [what the answer should look like].

It looks like more typing than "make me a website". It is. It also saves you twenty minutes of fixing.

Common mistakes with the recipe

Watch out for these. Each one quietly undoes the recipe:

• Leaving the brackets in. Sending Name: [your full name] exactly as written. The AI then puts "[your full name]" on your page, or invents a name. Replace every bracket, and delete the brackets too.
• Limits that fight each other. "Keep it very simple" plus "add animations, a contact form and dark mode". Read your limits once and make sure they agree.
• Private details in the prompt. Your phone number, home address or Aadhaar number do not belong in a prompt, or on a public website. An email you check is enough.
• Forgetting the shape. Without it, you get an essay, three partial snippets and "next steps". Then you have to dig the code out yourself.
• Changing the recipe after a bad answer, instead of adding a limit. If the AI did something you did not want, the fix is usually one more limit, not a whole new prompt.

The recipe works for more than code

The same four parts work for explanations and debugging too.

You are a patient teacher.

Explain what CSS flexbox is.

Limits: no jargon, assume I only know basic HTML, use one everyday example from India, under 150 words.

Shape: a short paragraph, then one tiny code example.

You are a senior developer helping a beginner debug.

Find out why my expense total shows "NaN" instead of a number.

Limits: do not rewrite my whole file. Change as little as possible. Explain the cause before the fix.

Shape: first the cause in two sentences, then only the lines to change.

[paste your code and the exact error here]

Your task

1. Open Gemini.
2. Send this weak prompt, and save the answer:

make me a website about me

3. Start a new chat. Send the full Project 1 prompt from this lesson, with your real details filled in. Leave out anything private, like your phone number or address.
4. Compare the two answers. For each part of the recipe, find one difference it made.

You do not need to publish anything yet. That comes in module 5.

Check yourself

• I can name the four parts of the recipe from memory.
• I know which part beginners skip, and why it matters most.
• I know why "the complete file" is a good shape for beginners.
• I have a copy of the template saved somewhere I can find it.