The One-Prompt Website Project
මේක main event එක! AI prompts only use කරලා complete, shareable website එකක් create කරනවා. Real something build කරමු!
🎯 පාඩමේ අරමුණු
මේ පාඩම ඉවර වෙද්දී ඔයාට:
- AI only use කරලා complete, shareable webpage create කරන්න පුළුවන් වෙයි
- Module 2 එකෙන් C.I.C. prompting techniques apply කරන්න පුළුවන් වෙයි
- Iterate-and-refine workflow practice කරන්න පුළුවන් වෙයි
- ඔයාගේ creation එකට live URL එකක් ගන්න පුළුවන් වෙයි
Challenge එක
🏆 Project Requirements
ඔයාගේ website MUST include:
- Title එක්ක header එකක්
- At least image එකක් හෝ icon එකක්
- Text content (description, bio, info)
- At least interactive element එකක් (button, link)
- Intentional color scheme එකක්
Time: ~Minutes 60ක් Deliverable: ඔයාගේ creation එකට shareable link එකක්
Step 1: ඔයාගේ Project Choose කරන්න (Minutes 5)
මේ project types වලින් ONE pick කරන්න:
| Project | ඒක මොකක්ද | Good For |
|---|---|---|
| Personal Profile Card | ඔයා introduce කරන card එකක් | Portfolio start |
| Recipe Display | Beautiful recipe page එකක් | Food lovers |
| Event Invitation | Any occasion එකකට digital invite | Birthdays, parties |
| Quote of the Day | Inspirational quote showcase | Motivation |
| Product Showcase | Single product landing page | Business ideas |
📝
Reflection Journal
Saved privately on your device
0 characters
0 total characters
Step 2: ඔයාගේ Master Prompt ලියන්න (Minutes 10)
Module 2 එකෙන් C.I.C. මතකද? Use කරමු!
C.I.C. Framework Reminder
- Context — Scene set කරන්න, background දෙන්න
- Instruction — AI ට ඕන දේ
- Constraint — Rules, limitations, requirements
Template:
Master Prompt Template
CONTEXT:
ඔයා modern, mobile-friendly webpage create කරන web designer කෙනෙක්.
INSTRUCTION:
[ඔයාගේ PROJECT TYPE] build කරන්න includes:
- [Feature 1 - specific වෙන්න]
- [Feature 2 - specific වෙන්න]
- [Feature 3 - specific වෙන්න]
- [Feature 4 - specific වෙන්න]
- [Feature 5 - specific වෙන්න]
CONSTRAINTS:
- Clean, minimal design
- Mobile phones වල හොඳට පෙනෙන්න ඕන
- [ඔයාගේ color preference] colors use කරන්න
- Modern typography
Project Type එකට Example Prompts:
Personal Profile Card:
Try this prompt
CONTEXT:
ඔයා professional personal profile card create කරන web designer කෙනෙක්.
INSTRUCTION:
'Saman Perera' ට profile card build කරන්න includes:
- Circular profile photo placeholder එකක්
- Bold heading එකේ name
- Job title: 'Software Developer'
- Short bio: 'People ට help කරන apps build කරන්න passionate'
- Clickable contact button එකක්
- Social links section (LinkedIn, GitHub, Twitter icons)
CONSTRAINTS:
- Rounded corners එක්ක modern, clean design
- Color scheme: Navy blue සහ white
- Mobile එකේ perfect පෙනෙන්න ඕන
- Depth එකට subtle shadow
Recipe Display:
Try this prompt
CONTEXT:
ඔයා beautiful recipe page create කරන web designer කෙනෙක්.
INSTRUCTION:
'Chocolate Chip Cookies' ට recipe page build කරන්න includes:
- Attractive food image placeholder එකක්
- Elegant typography වලින් recipe title
- Prep time: 15 min, Cook time: 12 min
- Ingredients list (butter, sugar, flour, chocolate chips, eggs)
- Step-by-step instructions
- 'Save Recipe' button
CONSTRAINTS:
- Warm, inviting color scheme (cream, brown tones)
- Cooking කරනකොට mobile එකේ easy to read
- Clear visual hierarchy
- Elements හැමඑකම rounded corners
📝
Reflection Journal
Saved privately on your device
0 characters
0 total characters
Step 3: First Version Generate කරන්න (Minutes 10)
✅ Generation Steps
0/6Panic වෙන්න එපා!
ඔයාගේ first result probably perfect වෙන්නේ නැහැ. ඒක completely normal!
Magic එක iteration phase එකේ happen වෙනවා.
Step 4: Review & Iterate (Minutes 20)
Review Checklist
ඔයාගේ generated design බලලා ask කරන්න:
| Question | NO නම්, මේ prompt try කරන්න... |
|---|---|
| Required elements හැමඑකම present? | "[Missing element] add කරන්න" |
| Layout right look කරනවාද? | "Layout [description] විදියට fix කරන්න" |
| Colors expected විදියට? | "Colors [new colors] ට change කරන්න" |
| Text readable? | "Text contrast සහ size improve කරන්න" |
| Mobile එකේ හොඳද? | "Mobile-friendly කරන්න" |
Common Iteration Prompts:
Iterations Track කරන්න:
📝
Reflection Journal
Saved privately on your device
0 characters
0 total characters
Step 5: Final Polish (Minutes 10)
Finish කරන්න කලින්, මේ checklist යන්න:
✅ Final Polish Checklist
0/8Final Polish Prompts:
Step 6: Shareable Link ගන්න (Minutes 5)
v0.dev එකෙන්:
- Share icon (box with arrow) හොයන්න
- Click කරන්න
- Generated link copy කරන්න
- New browser tab එකක test කරන්න
Replit එකෙන්:
- Run click කරන්න
- Preview panel බලන්න
- Expand/open icon click කරන්න
- Browser bar එකෙන් URL copy කරන්න
📝
Reflection Journal
Saved privately on your device
0 characters
0 total characters
✅ Link Verification
0/4🎉 Congratulations!
ඔයා Accomplish කළ දේ
✅ ඔයාට idea එකක් තිබුණා
✅ ඒක natural language වලින් describe කළා
✅ AI ඔයාගේ words working code එකට transform කළා
✅ Conversation එකෙන් refine කළා
✅ දැන් internet එකේ live
✅ Link එක තියෙන ඕනෑම කෙනෙකුට ඔයාගේ creation බලන්න පුළුවන්
මේක vibe coding in action!
Reflection
📝
Reflection Journal
Saved privately on your device
0 characters
0 total characters
✅ පාඩමේ සාරාංශය
Create කළ දේ:
- Complete, working webpage එකක්
- Entirely AI prompts එක්ක build කළා
- Internet එකේ live
- Anyone එක්ක shareable
Practice කළ skills:
- C.I.C. prompting
- Iteration and refinement
- Design thinking
- Shipping (things live කිරීම!)
➡️ Next Lesson
ඔයාගේ creation exist කරනවා — දැන් world එකට share කරලා portfolio build කරන්න start කරමු!