karimaballalearn

Playground

Practise before you touch your machine

Working copies of the real apps: Claude Code, the Codex app and Hermes Desktop. Pick a mission and an arrow shows you where to tap next. Tap anything else and it explains itself.

Missions

Pick a mission. An arrow shows you where to tap next, and waits for you.

bakery-site⎇ main worktree
Build a one-page site for a bakery in Arabic and English. It has to work on a phone.

I'll read the project first, then add an Arabic page with a language switch.

Thinking: the Arabic page needs lang="ar" and dir="rtl", and a font with Arabic letters.
Read 2 files

● Read index.html

● Read styles.css

Plan

  1. Add ar/index.html with dir="rtl"
  2. Add a language switch to both pages
  3. Check both pages at 390 px wide

● Edited index.html +48 −2

Review this edit

● Run npm run build

Allow this command?

Checked by the auto-mode classifier

2 files changed
index.html
- <nav>
+ <nav>
+   <a href="/ar/" hreflang="ar">العربية</a>
ar/index.html  new
+ <html lang="ar" dir="rtl">
+ <h1>مخبز الحي</h1>
~/bakery-site $ npm run build
[your build output appears here]

No background tasks running.

Chat

Everyday conversations with Claude. Software work lives in the Code tab; longer jobs and Dispatch live in Cowork.

Dispatchone conversation for your tasks

Message Dispatch a task. It decides how to handle it.

~/bakery-site — claude

$ cd bakery-site && claude

Type a task, / for commands, Shift+Tab to change mode.

>

⏸ manual mode on

Claude DesignResearch preview

Neighbourhood Bakery

Fresh bread from 6 am

Sourdough, date rolls and Friday specials, a short walk from home.

Order for pickup

مخبز الحي

خبز طازج من السادسة صباحًا

اطلب للاستلام

Illustrative layout. Claude Design is an Anthropic Labs research preview (April 2026) that turns prompts into designs, prototypes and decks; its real interface differs.

Simulation for learning. Labels follow Anthropic's Claude Code docs, checked 2026-09-30; the real apps can differ.

Sessions each keep their own chat and folder

+ New session (Ctrl+N) runs tasks in parallel

Worktree: an isolated copy, so sessions never collide

Prompt box: Enter sends; type again to redirect it

Transcript: every read, edit and command it runs

Transcript view: Normal, Thinking or Verbose (Ctrl+O)

Permission mode: Manual, Accept edits, Plan, Auto, Bypass

Where it runs: Local, Cloud, SSH or WSL

Model: next to Send, switch it any time

+ menu: Connectors, Slash commands, Plugins

Customize: skills, plugins and connectors in one place

Settings: computer use, worktrees, the bypass switch

Panes: diff, terminal, browser, tasks. Drag to arrange

Review code: Claude comments on its own diff

Views opens more panes