Cradis · AI Bootcamp · Session 4

Dive Deeper in
Claude Code.

From prompt to production. Master the tools that turn your ideas into live products — Claude Code as a design partner, GitHub for version control, and Cloudflare for instant deployment.

TrackUX/UI Design
Case StudyAlmosafer
Duration55 hours · 7 weeks
almosafercase study
Session 4 · Overview
Today's journey

What we'll cover today

①

Part 1 — Understanding Claude Code

  • What Claude Code really is
  • The Context Window
  • CLAUDE.md — your project memory
  • Plan Mode
  • Prompting effectively
②

Part 2 — From Local to Live

  • Git concepts & GitHub setup
  • Cloudflare Pages
  • The full deployment pipeline
  • Practical: Deploy to Cloudflare
  • Homework: Make it production-ready
By the end of this session → Your AI Interviewer will be live on the internet with its own URL, ready to share with anyone.
Almosafer Case Study · AI in UX/UI Design 02 / 27
Quick Refresh
Last session

What we covered last time

🔁

The Agent Loop

Perceive → Plan → Act → Observe → Adjust. The fundamental cycle every AI agent follows.

🤖

Built an AI Agent in n8n

A customer feedback classifier with smart routing — our first real agent in production.

🎨

Agent UX Patterns

Trust spectrum, transparency, personality, and turn-taking — the design layer of agents.

⚖️

Code vs Drag-and-Drop

Two valid approaches to building AI agents — knowing when to use which.

Homework Check → Did you build your AI Interviewer Agent? How did it go?
Almosafer Case Study · AI in UX/UI Design 03 / 27
Already Remarkable
A quick reality check

You did something amazing last week

You gave Claude Code a single prompt and got a working AI app — let's appreciate what just happened.

What you typed
~/projects/ai-interviewer
$ claude
› Build a local web app for an AI interviewer agent
   that conducts adaptive interviews with summary insights...
What you got
  • A complete HTML / CSS / JS app
  • Working API integration
  • Light & dark mode toggle
  • Adaptive interview logic
  • Summary with insights
But what's actually happening behind the scenes? And how can you get even better results next time?
Almosafer Case Study · AI in UX/UI Design 04 / 27
Part 01

Understanding
Claude Code.

The AI agent on your machine — what it is, how it thinks, and how to direct it like a trusted design partner.

Concept
The fundamentals

What is Claude Code?

Claude Code is an AI agent that lives in your terminal. It can read your files, write code, and run commands — autonomously.

👁
Perceive

Reads your files

→
🧠
Plan

Decides approach

→
⚡
Act

Writes & runs code

→
🔍
Observe

Checks results

Remember the Agent Loop from Session 3? Claude Code IS an agent. It perceives your project, plans what to build, acts by writing code, and observes if it works — exactly like the agents you studied.
Almosafer Case Study · AI in UX/UI Design 06 / 27
Memory
How Claude remembers

The Context Window

Think of it as Claude's working memory — everything it can "see" at once.

📋

What's in the window

  • Your conversation so far
  • Files it has read
  • Results of commands it ran
  • CLAUDE.md instructions
  • Error messages and outputs
⚠️

When it fills up

Claude starts "forgetting" earlier parts of the conversation.

Like a whiteboard that gets erased from the top — oldest content disappears first to make room for new content.

Almosafer Case Study · AI in UX/UI Design 07 / 27
Hygiene
Keep the conversation healthy

Managing your context

The context window has a limit. Here's how to keep it healthy.

1
/compact — Summarize & free up space

Claude compresses the conversation history while keeping key information. Use it after working for a while.

2
/context — Check usage

See how much of the context window is used. Like checking how much storage is left on your phone.

3
New chat — Start fresh

New task? Start a new conversation. Claude works best with focused sessions, not 10-topic mega-chats.

Rule of thumb → One task per conversation. If you're switching topics, start a new chat.
Almosafer Case Study · AI in UX/UI Design 08 / 27
Project Memory
Briefing your AI agent

CLAUDE.md — your project memory

Instructions that Claude reads every time it starts a new conversation in your project.

Why it matters

Without CLAUDE.md, every new conversation starts from zero. Claude doesn't know your project's conventions, style, or rules.

✕ Without CLAUDE.md

"Build me a page" → generic Bootstrap page

✓ With CLAUDE.md

"Build me a page" → matches your design system, uses your API, follows your naming conventions

CLAUDE.md
# My AI Interviewer

## Project
Single-page AI interview app.
Uses Gemini API (gemini-2.5-flash).

## Rules
- All code in one HTML file
- Support light & dark mode
- Arabic / English bilingual
- Mobile-responsive

## Workflow
- Always test locally after changes
- Push to GitHub once validated
- Never break existing features
Almosafer Case Study · AI in UX/UI Design 09 / 27
Two Scopes
Personal + project-level

CLAUDE.md works at two levels

Every project gets its own CLAUDE.md. Plus you have one for you.

👤 User Level  ~/.claude/CLAUDE.md

Your personal preferences across all projects. Private to you.

"Always respond in Arabic. I'm a UX designer. Use modern, clean UI."

📁 ai-interviewer / CLAUDE.md

  • Single-page interview app
  • Gemini API (gemini-2.5-flash)
  • All code in one HTML file
  • Support light & dark mode

📁 my-portfolio / CLAUDE.md

  • Multi-page portfolio site
  • Tailwind CSS for styling
  • Projects in /projects/ folder
  • Deploy via Cloudflare Pages
Claude reads User + Project CLAUDE.md at the start of every conversation. Different project = different rules, same personal preferences.
Almosafer Case Study · AI in UX/UI Design 10 / 27
Format
Simple text formatting

Markdown (.md) files

CLAUDE.md, README.md, and many other files use Markdown — a simple way to format text.

What you write (raw)
raw markdown
# Heading
## Sub-heading

- Bullet point
- Another point

**Bold text** and *italic*

1. Numbered list
2. Second item
What you see (preview)

Heading

Sub-heading

  • Bullet point
  • Another point

Bold text and italic

  1. Numbered list
  2. Second item

CLAUDE.md

Instructions for Claude

README.md

Project front page on GitHub

Any .md file

Notes, docs, plans

Almosafer Case Study · AI in UX/UI Design 11 / 27
Plan Mode
Think before you build

Plan Mode — review before code

Ask Claude Code to plan first instead of jumping straight into coding.

✕ Without Plan Mode

You: "Add a results export feature"

Claude: immediately starts writing code…

Maybe it picks CSV when you wanted PDF. Or adds it in the wrong place. Now you have to undo and redo.

✓ With Plan Mode

You: "Add a results export feature. Plan first."

Claude: "Here's my plan: 1) Add export button below summary 2) Export as PDF with themes + quotes 3) Include interview metadata…"

You review, adjust, then approve. Right solution the first time.

✓ Use it for

  • New features
  • Major changes
  • Anything complex

✕ Skip it for

  • Quick fixes
  • Small text changes
  • Simple styling tweaks
Almosafer Case Study · AI in UX/UI Design 12 / 27
Prompting
Speak Claude's language

Prompting Claude Code effectively

The quality of your prompt directly determines the quality of the result.

✕ Vague Prompt

vague
› Make it look better

Claude guesses what "better" means. Results vary wildly.

✓ Specific Prompt

specific
› Redesign the chat: card-based
  layout, rounded corners, typing
  indicator, font-size 16px. Keep
  the teal color scheme.

Claude knows exactly what to change. Predictable results.

The Prompting Formula

What you want  +  Where it goes  +  How it should look  +  Constraints

Almosafer Case Study · AI in UX/UI Design 13 / 27
Part 02

From Local
to Live.

GitHub, Cloudflare & Deployment — getting your AI Interviewer onto the internet for the world to see.

GitHub
Cloud storage for code

What is GitHub?

A place to store, share, and deploy your code — like Google Drive for developers.

💾

Backup

Your code is safe in the cloud. Even if your laptop breaks, your work is preserved.

👥

Collaboration

Share with teammates. Work on the same project together without overwriting each other.

🚀

Deployment

Push code → it auto-deploys to a live website. Production in seconds.

Repository = your project folder in the cloud. Each project gets its own repo. That's the only term you need to know today.
Almosafer Case Study · AI in UX/UI Design 15 / 27
Git Concepts
No commands needed

Understanding Git

You don't need to memorize commands — Claude Code handles that. But understanding the concepts helps.

📸

Commit = Snapshot

Save a version of your work with a description. Like "Save As" with a note about what changed.

⬆️

Push = Upload

Send your snapshots to GitHub. Your code is now backed up in the cloud.

⬇️

Pull = Download

Get the latest changes from GitHub. Useful when working from a different device or with a team.

🌿

Branch = Parallel Version

A separate copy to try things without affecting the main version. Merge it back when ready.

🔓 Public Repo

Anyone can see your code. Great for portfolios & open-source.

🔒 Private Repo

Only you and invited collaborators. For work projects.

Almosafer Case Study · AI in UX/UI Design 16 / 27
Activity
Hands-on time

Set up your GitHub

Let's get your code on GitHub. Follow these steps — we'll do it together.

1
Create a GitHub account

Go to github.com → Sign up (free).

2
Authenticate GitHub in Claude Code

Tell Claude Code: "Set up GitHub authentication for me."

3
Create a repo & push your code

Tell Claude Code: "Create a public GitHub repo called ai-interviewer and push my code."

4
Verify on GitHub

Visit github.com — your files should be there!

Your code is now backed up in the cloud and ready for deployment.
Almosafer Case Study · AI in UX/UI Design 17 / 27
Hosting
Free, fast, global

Cloudflare Pages

Free hosting that auto-deploys every time you push to GitHub.

How it works

  1. Connect your GitHub repo to Cloudflare Pages
  2. Every code update on GitHub auto-deploys
  3. Your project gets a live URL: your-project.pages.dev
  4. Anyone in the world can access it
Free tier: Unlimited sites, unlimited bandwidth, custom domains, SSL certificates.
☁️

Why Cloudflare?

  • Free — no credit card needed
  • Fast — global CDN, loads everywhere
  • Simple — connect once, deploy forever
  • Professional — real production hosting
Almosafer Case Study · AI in UX/UI Design 18 / 27
Pipeline
Idea → product

The full pipeline

From idea to live product — this is how real apps are shipped.

💡
Your Idea

Describe what you want

→
🤖
Claude Code

Builds the code

→
📦
GitHub

Stores your code

→
☁️
Cloudflare

Auto-deploys

→
🌐
Live URL

Anyone can access

⏱

First time

~15 minutes to set up the full pipeline.

⚡

After that

Every update is just "push to GitHub" → live in seconds.

Almosafer Case Study · AI in UX/UI Design 19 / 27
Environments
Local + public

Two environments

Now you have two copies of your project. Understanding the difference is important.

💻

Local Environment

Your computer · localhost:8000

  • Only you can see it
  • Where you build and test
  • Changes happen instantly
  • Safe to experiment and break things
🌐

Public Environment

Cloudflare Pages · your-project.pages.dev

  • Anyone with the link can see it
  • The "live" version users interact with
  • Updates when you push to GitHub
  • Should be tested and working
Workflow → Build & test locally, push to GitHub, public site updates automatically.
Almosafer Case Study · AI in UX/UI Design 20 / 27
Deploy
Ship it

Deploy to Cloudflare

Same pattern as GitHub — create account, authenticate, and let Claude Code do the rest.

1
Create a Cloudflare account

Go to dash.cloudflare.com → Sign up (free).

2
Authenticate Cloudflare in Claude Code

Tell Claude Code: "Set up Cloudflare authentication for me."

3
Deploy your project

Tell Claude Code: "Deploy my project to Cloudflare Pages."

⭐

Claude Code handles everything

It creates the project, connects your repo, deploys, and gives you a live URL.

Almosafer Case Study · AI in UX/UI Design 21 / 27
It's Live!
Celebration time 🎉

Your AI Interviewer is live

🔗
Live URL https://ai-interviewer-xxx.pages.dev
OPEN
📱

Open it on your phone

🔗

Share with a partner

🎤

Run an interview

💬

What would you improve?

Almosafer Case Study · AI in UX/UI Design 22 / 27
Reflection
The full picture

What you just did

Let's step back and appreciate the journey from prompt to production.

1

Session 3 → You wrote a prompt describing an AI interviewer.

2

Claude Code → Built a complete web application from that prompt.

3

GitHub → Stores and version-controls your code.

4

Cloudflare → Deploys it to the internet automatically.

5

Anyone → Can now use your AI tool with just a link.

This is vibe-coding. You described what you wanted, and AI + modern tools made it real. This is the future of building products.
Almosafer Case Study · AI in UX/UI Design 23 / 27
Homework · Week 4
Your assignment

Make your AI Interviewer production-ready

The Assignment

Use Claude Code to improve your deployed AI Interviewer. Push updates to GitHub — they'll auto-deploy.

Improvements to make

  1. Add a CLAUDE.md — document your project
  2. Polish the UI — mobile, animations, loading states
  3. Save interview history — localStorage or backend
  4. Export results — PDF or text download

Deliverable

  • Updated live URL (same Cloudflare Pages link)
  • CLAUDE.md file in your repo
  • At least 2 improvements from the list
  • Brief summary: what did Claude do well? Where did you guide it?
Tip → Use Plan Mode for each improvement. Review the plan, then let Claude build it.
Almosafer Case Study · AI in UX/UI Design 24 / 27
Copy & Paste
Your starter prompt

The homework prompt

claude code · paste this
# Paste this into Claude Code

Improve my AI Interviewer app. Plan first before making changes.

## Improvements
1. Add interview history — save completed interviews to localStorage,
   show a list of past interviews on the home page.
2. Add export — after the summary, add a "Download as Text" button
   that saves the full interview transcript + summary.
3. Polish the UI — smooth transitions, loading skeleton, fully
   responsive on mobile.
4. Create a CLAUDE.md file documenting this project.

## Rules
- Keep everything in one HTML file
- Don't break existing functionality
- Keep the light/dark mode toggle working
- Test each change before moving to the next
Almosafer Case Study · AI in UX/UI Design 25 / 27
Recap
In summary

Session 4 — key takeaways

  • Claude Code is an AI agent — perceives, plans, acts, observes
  • Context window = working memory, keep it focused
  • CLAUDE.md = persistent project instructions (user + project)
  • Plan mode = review before building
  • Good prompts = specific + contextual
  • Git: commit (snapshot) → push (upload) → pull (download)
  • Local environment (test) vs public environment (live)
  • Cloudflare Pages: auto-deploy on every update
7
Weeks of bootcamp
55h
Of training
1
Live AI product shipped
Almosafer Case Study · AI in UX/UI Design 26 / 27
End of Session 4

Thank
you.

Questions before we wrap up? Next: applying everything to a real Almosafer UX case study — User Interviews, Personas, UX Audit, and Usability Testing, all powered by Claude Code as your design partner.

Designed bySundos
BootcampCradis · Badi Ammar
Next stopBehance Case Study
almosafercase study
1 / 27