🎯 Lesson Objectives
By the end of this lesson, you will:
- Master the C.I.C. Framework (Context, Instruction, Constraint)
- Write structured prompts that get consistent results
- Know how to transform vague ideas into clear prompts
- Have a repeatable formula for any prompting task
📖 Introduction: A Simple Formula That Works
Writing great prompts doesn't have to be guesswork. There's a simple formula that works every time:
The C.I.C. Framework
C = Context — Set the stage (who, what situation)
I = Instruction — Define the task (what to do)
C = Constraint — Specify limits (requirements, restrictions)
Think of it like ordering at a restaurant:
Restaurant Order
AI Prompt
Context: 'I'm vegetarian and allergic to nuts'
Context: 'You are a React developer'
Instruction: 'I'd like a pasta dish'
Instruction: 'Create a login form'
Constraint: 'Not too spicy, under $15'
Constraint: 'Use Tailwind CSS, include validation'
📝 C = Context (Set the Stage)
Context tells AI who it should be and what situation it's in.
What Context Does
- Sets the expertise level AI should use
- Defines the perspective to take
- Establishes the situation or project type
Context Template:
"You are a [role/expertise] working on [type of project/situation]."
Good Context Examples:
| Context | What It Tells AI |
|---|---|
| "You are a senior React developer" | Use professional React patterns |
| "You are a patient coding tutor" | Explain things simply |
| "You are a Python expert" | Use Python best practices |
| "You are working on a professional portfolio" | Make it polished and impressive |
Context in Action:
Without Context:
Create a navigation bar
With Context:
You are a senior frontend developer building a professional corporate website.
Create a navigation bar...
The second version will produce much more professional code!
📋 I = Instruction (Define the Task)
Instruction is the core task — what you actually want AI to do.
Good Instructions Are:
- Specific — Not vague or open to interpretation
- Action-oriented — Start with a verb (Create, Build, Write, Design)
- Clear about output — What should AI deliver?
Instruction Template:
"Create/Build/Write [specific thing] that [does what/contains what]."
Good vs Bad Instructions:
❌ Vague Instruction
✅ Specific Instruction
Make something for my website
Create a navigation bar with links to Home, About, and Contact
Help with code
Write a function that calculates the total price including 10% tax
I need a form
Create a contact form with name, email, and message fields
Fix this
Fix this JavaScript error: 'Cannot read property of undefined'
🔒 C = Constraint (Specify Limits)
Constraints define boundaries, requirements, and limitations.
Common Constraint Types
| Type | Purpose | Example |
|---|---|---|
| Technology | What tools to use | "Use HTML and CSS only" |
| Style | How it should look | "Clean, modern, minimalist" |
| Include | What must be there | "Include form validation" |
| Exclude | What to avoid | "Don't use any frameworks" |
| Performance | Speed/size limits | "Keep the file under 100 lines" |
Constraint Template:
"Requirements:
- Must use [technology/tool]
- Should be [quality/style]
- Include [specific features]
- Avoid [things to exclude]"
🧩 Putting It All Together
Here's the complete C.I.C. template:
Text
[CONTEXT]You are a [role] working on [project type]. [INSTRUCTION] Create/Build/Write [specific thing] that [does what]. [CONSTRAINTS]Requirements:- Must use [technology]- Should be [style/quality]- Include [features]- Avoid [exclusions]📖 Practice Examples
Example 1: Birthday Invitation
Complete Prompt:
Birthday Invitation Prompt
You are a creative graphic designer.
Create a birthday invitation for a 7-year-old's unicorn-themed party.
Requirements:
- Use HTML and CSS only
- Include: Date (Saturday, March 15, 2pm), Location (123 Rainbow Lane), RSVP phone number
- Style: Colorful, fun, pink and purple theme with unicorn elements
- Design for standard letter paper (8.5x11 inches)
Example 2: Calculator Function
Complete Prompt:
Calculator Function Prompt
You are a JavaScript developer.
Create a function that calculates the total price including tax.
Requirements:
- Use vanilla JavaScript only
- Function takes two parameters: price (number) and taxRate (percentage)
- Returns the total rounded to 2 decimal places
- Include 3 example usages showing different scenarios
Example 3: Personal Bio Page
Complete Prompt:
Personal Bio Page Prompt
You are a web developer building a personal portfolio.
Create a bio section with a profile image area, name, and short description.
Requirements:
- Use HTML and CSS only
- Must be mobile-responsive
- Professional dark theme (#1a1a2e background, white text)
- Profile image: 200x200px circle with placeholder
- Centered layout with subtle animations on hover
🎯 Your Turn: Practice C.I.C.
Try writing a C.I.C. prompt for this scenario:
Scenario: You want a webpage that displays a single recipe nicely.
✅ Build Your Own C.I.C. Prompt
0/4📋 C.I.C. Quick Reference Card
┌──────────────────────────────────────────────┐
│ C.I.C. FRAMEWORK │
├──────────────────────────────────────────────┤
│ │
│ C = CONTEXT │
│ "You are a [role]..." │
│ Sets expertise and perspective │
│ │
│ I = INSTRUCTION │
│ "Create/Build/Write [specific thing]" │
│ The core task to accomplish │
│ │
│ C = CONSTRAINT │
│ "Must use... Should be... Include..." │
│ Boundaries, requirements, limits │
│ │
└──────────────────────────────────────────────┘
✅ Lesson Summary
Key Takeaways
- C.I.C. = Context + Instruction + Constraint — A repeatable formula
- Context sets who AI should be
- Instruction defines what to create
- Constraints specify requirements and limits
- Using C.I.C. consistently produces professional results
📝 Mini Quiz
📝 Check Your Understanding
1/3What does the first 'C' in C.I.C. stand for?