Toolkit · Claude & Claude Code
4 things to build with Claude
Four practical build prompts, working HTML starter files and checks for a campaign mockup, brand animation, task-list prototype and product explainer.
Added 22 September 2026. Free.
What’s inside
- Download the guide
- Download the working examples
- Before you paste anything
- Build 1: a campaign mockup with a live headline toggle
- Build 2: a brand animation with a real reduced-motion fallback
- Build 3: an app prototype with real local state
- Build 4: a product explainer with keyboard steps
- The build loop
- Troubleshooting
- Swap the brand for your own
- Next steps
More on Claude & Claude Code
How Claude made my map explainer: the full process
The 6 steps and every prompt behind my Red Bull Stratos map explainer, plus the real maps and photos the reel skipped.
The aircraft-manual skill for Claude
A Claude skill that makes every answer read like a repair manual: short, exact and clear on the first read. 26 rules, a swap list and a 7-step check, plus a 5-page PDF.
How Claude Edits My Reels: The Full Process
The 8 prompts I give Claude Code to turn one raw take into a finished Instagram reel.
21 Motion Graphics for Claude
All 21 face effects from the MOVES reel, each with a one-line job and a paste-able Claude Code prompt that rebuilds it. Plus the setup prompt and a 24-page PDF.
665 Claude Design components (and how to use them)
Stop Claude Design giving you everyone's look. Pick a component from a library of 665, copy its hand-off prompt, and paste it in with your brand. Six tested prompts, each with a before and after.
Make any AI image editable in Canva with Claude
Stop Claude redrawing the whole image every time you change one word. Connect Canva, run one prompt, and get the design back in editable layers.
Charlie Hills