🎯 පාඩමේ අරමුණු

මේ පාඩම ඉවර වෙද්දී ඔයාට:

Paper එකේ hand-drawn website design එකක් create කරන්න පුළුවන් වෙයි
Visual ideas structural descriptions වලට translate කරන්න practice කරන්න පුළුවන් වෙයි
ඔයාගේ design HTML structure එකකට interpret කරන්න AI use කරන්න පුළුවන් වෙයි
Visual design සහ code අතර connection එක තේරුම් ගන්න පුළුවන් වෙයි

📖 Introduction: Paper ඇයි?

Code ලියන්න කලින්, designers සහ developers බොහෝවිට paper එකේ sketch කරනවා. ඇයි?

Benefit	Explanation
Speed	Drawing seconds ගන්නවා, coding minutes ගන්නවා
Freedom	Technical constraints නැහැ — just pure ideas
Iteration	Crumple කරලා start over කරන්න easy
Focus	WHAT ගැන හිතනවා, HOW නෙමෙයි
Communication	Drawing එකක් anyone ට තේරුම් ගන්න පුළුවන්

Core Principle

Paper prototyping ඔයාගේ imagination සහ code අතර gap එක bridge කරනවා.

🛠️ ඕන වෙන දේවල්

✅ මේ Materials එකතු කරන්න:

0/5

📝 Part 1: Paper එකේ Design කරන්න (Minutes 15)

ඔයාගේ Task:

Simple personal portfolio website එකක් paper එකේ draw කරන්න.

Required Elements:

✅ ඔයාගේ Design එකේ MUST Include:

0/6

Drawing Tips:

✅ කරන්න

❌ කරන්න එපා

Sections වලට simple rectangles use කරන්න

Artistic ability ගැන worry වෙන්න

Everything clearly label කරන්න

Perfect lines වලට time spend කරන්න

Placeholder text ලියන්න

Colors add කරන්න (structure එකට focus කරන්න)

Elements අතර spacing show කරන්න

Overcomplicate කරන්න — simple තියන්න

Example Sketch Structure:

Text

┌────────────────────────────────────────────────┐
│  HEADER                                        │
│  [Logo] Alex Smith    Home About Projects Contact
├────────────────────────────────────────────────┤
│                                                │
│  HERO                                          │
│  ┌──────┐  Hi, I'm Alex!                      │
│  │      │  මම web developer කෙනෙක්            │
│  │ PHOTO│  beautiful things create කරනවා.     │
│  │      │                                      │
│  └──────┘  [View My Work] button              │
│                                                │
├────────────────────────────────────────────────┤
│                                                │
│  ABOUT ME                                      │
│  ─────────                                     │
│  [මම කවුද, මොකක්ද කරන්නේ කියලා                 │
│   Paragraph text. Sentences 2-3ක්.]           │
│                                                │
├────────────────────────────────────────────────┤
│                                                │
│  MY PROJECTS                                   │
│  ────────────                                  │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐       │
│  │ Project 1│ │ Project 2│ │ Project 3│       │
│  │ [image]  │ │ [image]  │ │ [image]  │       │
│  │ Desc...  │ │ Desc...  │ │ Desc...  │       │
│  └──────────┘ └──────────┘ └──────────┘       │
│                                                │
├────────────────────────────────────────────────┤
│                                                │
│  CONTACT ME                                    │
│  ───────────                                   │
│  Name: [____________]                          │
│  Email: [___________]                          │
│  Message:                                      │
│  [                           ]                 │
│  [                           ]                 │
│  [Submit Button]                               │
│                                                │
├────────────────────────────────────────────────┤
│  FOOTER                                        │
│  © 2024 Alex Smith  [f] [tw] [in]             │
└────────────────────────────────────────────────┘

⏱️ දැන් Drawing Start කරන්න!

Paper prototype create කරන්න minutes 15ක් ගන්න. මොකක් හරි draw කරන්න කලින් ahead read කරන්න එපා!

📝

Reflection Journal

Saved privately on your device

1Drawing එකට පස්සේ, ඔයාට තිබුණ challenges හෝ questions note කරන්න:

0 characters

0 total characters

📸 Part 2: Photo & AI Analysis (Minutes 15)

දැන් AI ඔයාගේ design interpret කරන විදිය බලමු.

Step 1: ඔයාගේ Design Photograph කරන්න

ඔයාගේ drawing එකේ clear, well-lit photo එකක් ගන්න
Labels හැමඑකම readable වෙන්න ඕන
Unnecessary background crop කරන්න

Step 2: AI ට Upload හෝ Describe කරන්න

Option A: ඔයාගේ AI images support කරනවා නම් (ChatGPT-4, Claude):

Image Upload Prompt

මම paper එකේ website design එකක් draw කළා (attached image බලන්න). කරුණාකර මේ design analyze කරලා build කරන්න use කරන HTML structure explain කරන්න. Plain English වලින් explain කරන්න, මෙහෙම: 'ඔයාට header container එකක් ඕන logo එක left එකේ navigation links right එකේ...' STRUCTURE එකට focus කරන්න, styling නෙමෙයි. Use කරන HTML elements specifically කියන්න.

ChatGPT Claude

Option B: ඔයාගේ AI images support කරන්නේ නැත්නම්:

Text Description Prompt

මම website design එකක් draw කළා මේ layout එක්ක: HEADER: - මගේ name 'Alex Smith' left side එකේ - Navigation links 4ක් right එකේ (Home, About, Projects, Contact) HERO SECTION: - Square photo එකක් left එකේ - 'Hi, I'm Alex!' large text photo එකට right එකේ - Smaller tagline text below - 'View My Work' button එකක් ABOUT SECTION: - 'About Me' heading එක - Text paragraphs 2ක් below PROJECTS SECTION: - 'My Projects' heading එක - Row එකක project cards 3ක්, each එකට image සහ description CONTACT SECTION: - 'Contact Me' heading එක - Name, email, message fields එක්ක form - Submit button FOOTER: - Copyright text left එකේ - Social media icons 3ක් right එකේ කරුණාකර මේක build කරන්න use කරන HTML structure describe කරන්න. Plain English වලින් use කරන elements explain කරන්න.

ChatGPT Claude

Step 3: AI ගේ Response Review කරන්න

AI respond කරන්න ඕන මෙහෙම:

"මේ design එකට, මෙහෙම structure කරන්න:

Header: <header> element එකක් create කරන්න ඔයාගේ logo/name සඳහා <div> එකක් සහ navigation links සඳහා <nav> element එකක්..."

Step 4: Follow-up Questions Ask කරන්න

Follow-up: Generate HTML

දැන් මේ design එකට basic HTML skeleton ලියන්න. Styling නැතුව, just HTML structure with placeholder text.

ChatGPT Claude

Follow-up: CSS Question

Row එකක cards 3ක් තියෙන projects section එකට recommend කරන CSS layout technique මොකක්ද?

ChatGPT Claude

Follow-up: Responsive Design

මේ design mobile phones වලට responsive කරන්නේ කොහොමද?

ChatGPT Claude

🔍 Part 3: Reflection (Minutes 10)

📝

Reflection Journal

Saved privately on your device

1AI ඔයාගේ design accurately තේරුම් ගත්තාද? Well capture කළේ මොනවද? Miss කළේ මොනවද?

0 characters

0 total characters

📝

Reflection Journal

Saved privately on your device

1ඔයා දන්නේ නැතිව AI suggest කළ HTML elements මොනවද? (e.g., <header>, <nav>, <section>, <main>, <article>)

0 characters

0 total characters

📝

Reflection Journal

Saved privately on your device

1Better results වලට MORE clearly describe කරන්න ඕන මොනවද?

0 characters

0 total characters

💡 මේ Exercise එකෙන් Key Insights

1. Visual → Verbal → Code

Idea එකෙන් code එකට path:

ඔයාගේ Vision → Description → AI Understanding → Code

ඔයාගේ description clearer වුනොත්, code එක better.

2. Style ට කලින් Structure

STRUCTURE (HTML) එකට focus කළා, appearance (CSS) නෙමෙයි. Correct order එක මේක:

First: Elements මොනවද exist කරන්නේ
Then: ඒවා look කරන විදිය

3. AI ට Context ඕන

Just "website එකක් හදන්න" කිව්වොත් random results. Specific sections, relationships, elements describe කළොත් accurate results.

4. Paper Prototyping Time Save කරනවා

Sketching minutes 10ක් wrong direction එකේ coding hours save කරන්න පුළුවන්.

🎯 Vibe Coding එකට Connection

Old Way

Vibe Coding Way

HTML structure ඉගෙන ගන්න

ඕන දේ describe කරන්න

Every tag manually ලියන්න

AI structure generate කරනවා

Trial and error

Visual prototype → description → code

Code first, design second

Design first, code generated වෙනවා

Key Takeaway

ඔයාගේ paper sketch ඔයාගේ "prompt" එක — just visual form එකෙන්.

📋 Completion Checklist

✅ Everything Complete කළාද?

0/6

🏆 Bonus Challenge

Extra time තියෙනවා නම්:

✅ Extra Challenges:

0/3

✅ පාඩමේ සාරාංශය

Practice කළ දේ

Visual ideas structural thinking වලට translate කිරීම
AI ට designs communicate කිරීම
Description හරහා HTML structure තේරුම් ගැනීම
Prototype → describe → generate workflow එක

Key Takeaway:

Idea එක first draw කළොත් AI ට describe කරන්න much easier — better descriptions better code mean කරනවා.