Katas First steps · About 15 minutes

Make a clickable prototype

Turn a single prompt into a tiny app you can tap, test and remix.

01 / See it first

Here’s what you can make

Try this mini garden: filter the plants and mark one as planted.

This working reference was created for the kata with AI assistance. It is an example of the target outcome, not a claim that your assistant will reproduce it exactly.

02 / Your turn

Copy the prompt. Make it yours.

Open a new chat in ChatGPT or Claude, paste this prompt, and replace anything you want to change.

Your complete prompt

You are my prototype developer. Make me a tiny, responsive web app called Pocket Garden.

Create one complete HTML file with its CSS and JavaScript inside the file. Do not use external libraries, images, fonts, network requests, or a server.

The page should have:
- A friendly heading and short introduction.
- Three plant cards: Basil and Sunflower like sun; Mint likes shade.
- Three filters: All plants, Loves sun, and Likes shade. Each filter should show the right cards.
- A button on each card that toggles between “Mark as planted” and “Planted”.
- A layout that works on a phone and a keyboard. Give buttons clear labels, visible focus, and pressed states.
- A note that choices reset when the page reloads.

Return the entire HTML in one code block so I can copy it. Then give me four short checks to try. Do not claim that you tested it unless you actually did.

You can also select and copy the text.

Try your creation here

Copy only the HTML inside the assistant’s code block, without the backtick fences or extra notes. Paste it here and tap Preview. The Dojo does not save or send the text you paste.

Run code you trust and leave out sensitive information. The isolated preview restricts external assets, requests and forms; code or links can still navigate the frame to another site.

Your HTML

03 / Your ingredients

A simple stack

Harness: ChatGPT or Claude app, or either service in a browser.
Model: A model available in your chosen chat. Access and limits depend on your account.
Instructions: The complete prompt above. Change the topic and constraints to fit your goal.
Context: Your idea and any non-sensitive details you choose to share.
Skills, CLI, MCP, plugins or connectors: None needed for the basic chat version. Optional ways to equip your setup are below.
Agent and verification: One chat assistant drafts; you inspect the result against the checks below and ask it to fix problems.

04 / Pick your setup

Use the device you have

Choose one path. You can do the chat exercise without installing a command line tool.

Phone · ChatGPT app

Open the ChatGPT app, start a new chat, and paste the prompt. Ask the assistant for the requested result. Some account-available plugins can be used on mobile; desktop-only plugins cannot. Plugins are optional here. ChatGPT plugin guide.

Phone · Claude app

Open the Claude app, start a new chat, and paste the prompt. Ask for the requested result. Remote connectors are optional; local desktop extensions do not run on the phone. Claude connectors guide.

Windows

Open ChatGPT or Claude in a browser and paste the prompt. Alternatively, install one CLI in PowerShell using an official command below. These commands download and execute installers; check the linked vendor instructions first. Sign in when prompted; eligibility and plans vary. Use a folder you are comfortable granting the tool access to.

Codex CLI (official setup):

powershell -ExecutionPolicy ByPass -c "irm https://chatgpt.com/codex/install.ps1 | iex"
codex

Claude Code (official setup; an eligible paid or other supported account is required):

irm https://claude.ai/install.ps1 | iex
claude

Then paste the same prompt into the CLI. Review any access or changes it asks to make.

macOS

Open ChatGPT or Claude in a browser and paste the prompt. Alternatively, install one CLI in Terminal using an official command below. These commands download and execute installers; check the linked vendor instructions first. Sign in when prompted; eligibility and plans vary. Use a folder you are comfortable granting the tool access to.

Codex CLI (official setup):

curl -fsSL https://chatgpt.com/codex/install.sh | sh
codex

Claude Code (official setup; an eligible paid or other supported account is required):

curl -fsSL https://claude.ai/install.sh | bash
claude

Then paste the same prompt into the CLI. Review any access or changes it asks to make.

Linux

Open ChatGPT or Claude in a browser and paste the prompt. Alternatively, install one CLI in a terminal using an official command below. These commands download and execute installers; check the linked vendor instructions first. Sign in when prompted; eligibility and plans vary. Use a folder you are comfortable granting the tool access to.

Codex CLI (official setup):

curl -fsSL https://chatgpt.com/codex/install.sh | sh
codex

Claude Code (official setup; an eligible paid or other supported account is required):

curl -fsSL https://claude.ai/install.sh | bash
claude

Then paste the same prompt into the CLI. Review any access or changes it asks to make.

05 / Check and remix

Make sure it works for you

Copy only the HTML inside the assistant’s code block, without the surrounding backticks or the follow-up checks. Paste it into the preview above and tap Preview my creation.
Tap each filter. Check that sun shows Basil and Sunflower, and shade shows Mint.
Toggle a plant button twice. Check that it changes both ways; reload to check that choices reset.
Try the controls with a keyboard if you have one. If something fails, tell the assistant exactly what happened and ask for a complete corrected file.

Remix: change the theme to a book list, game collection or recipe planner. Keep the same checks and add one of your own.

The preview runs on your device and restricts external assets, requests and forms. Code or links can still navigate the preview, so review the code and keep sensitive data out. If your assistant offers its own preview, you can use that too.

Explore more katas