Process Sydney 002 — March 2026
A companion to Redesigning Design. The talk doesn't go deep on how to use any of these tools — that's not what 25 minutes at a bar is for. This guide is the practical bit.
You don't need to learn to code. You need to learn to describe what you want. Every tool below either understands plain English or gets written for you by something that does.
01
These are the models — the things you have conversations with. Think of them as collaborators who can write code, think through problems, and build things with you.
An AI model made by Anthropic. It's what I use for almost everything — writing code, scripting design tools, building browser extensions, thinking through problems.
Why this one: It's the best at writing code and following complex instructions. When I say "I described what I wanted and it built it," Claude is what I'm talking to.
Get started: Sign up, start a conversation. That's it.
claude.aiClaude, but running in your terminal. Instead of chatting in a browser, it works directly with files on your computer — it can read your project, write code, create files, run commands.
Why it matters: This is how a one-person team builds a Figma plugin in ten minutes, or an animation pipeline before work on Monday. It's not copying and pasting code from a chat window — it's an AI that works directly in your project.
How to install:
npm install -g @anthropic-ai/claude-codeThen open your terminal, navigate to a project folder, and type claude. That's it.
Requires: Node.js — grab it from nodejs.org (LTS version).
An AI image generator. You describe an image in text, it generates options, you refine. The quality is genuinely impressive for photography-style imagery, textures, and conceptual visuals.
Standard at $30/month gives you unlimited generations in relaxed mode, which is plenty for most designers.
midjourney.comOpenAI's model. The most well-known AI tool. Good for general tasks, writing, and brainstorming.
Why it's here: It's a solid alternative. If Claude is down or you want a second opinion, ChatGPT Plus is worth having. Most designers will benefit from trying both and picking a primary.
chatgpt.com02
This is how the Birthday project from the talk was made — 28 animated Instagram posts, built by one person, before work on a Monday morning.
The concept: animate in the browser → capture frames → compile to video. Three tools, working together. You don't write any of this code yourself — Claude Code does.
GreenSock Animation Platform. Animates things in the browser. Move elements, fade, scale, sequence complex timelines — anything you can do in After Effects, GSAP can do in code.
It's been the industry-standard web animation library for over a decade. You describe what you want to Claude — "fade in this text from the left, then scale up the logo" — and it writes the GSAP code.
In plain English: GSAP is like After Effects, but it runs in a web browser instead of a desktop app. It makes things move — fade in, slide across, bounce, spin. Claude writes all the GSAP code for you.
gsap.comControls a browser programmatically. In this pipeline, it opens your animation in a headless Chrome browser and captures each frame as an image.
Think of it as: A robot that watches your animation and takes a screenshot of every single frame.
In plain English: Puppeteer opens an invisible browser window, plays your animation, and takes a picture of every single frame. You end up with a folder full of PNG images — one for each frame of your animation.
pptr.devTakes a sequence of images (the frames from Puppeteer) and compiles them into a video file. MP4, MOV, GIF — whatever you need.
Think of it as: The "export" step. Frames go in, video comes out.
In plain English: ffmpeg takes all those PNG images from Puppeteer and stitches them together into a video file. It's the command-line version of hitting "Export" in Premiere or After Effects.
Install (Mac):
brew install ffmpegIf you don't have Homebrew yet:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"How the pipeline works
The entire pipeline gets set up in a single conversation with Claude Code. You describe the animation you want, and it builds everything — the HTML, the animation code, the capture script, and the export command.
Puppeteer can't find Chrome: On Mac, Puppeteer looks for Chrome in the default install path. If you get a "browser not found" error, tell Claude — it'll update the script to point to your Chrome location. Usually: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
"ffmpeg: command not found": You need to install it first. Run brew install ffmpeg in your terminal. If you don't have Homebrew, install that first (see the ffmpeg card above).
Animation looks choppy: Increase the frame rate in the capture script. Tell Claude: "capture at 60fps instead of 30." More frames = smoother video, but slower to process.
Video is too large: Ask Claude to add compression to the ffmpeg command. Something like: "compress the output to under 10MB while keeping it looking good."
03
Everything is code. Chrome, Photoshop, Illustrator, Figma — they all have scripting interfaces. You don't need to know the scripting languages. You describe what you want, and Claude writes the code.
Custom tools that run inside Figma. The brand guidelines checker from the talk is a Figma plugin.
How to create one:
claudePhotoshop's modern scripting platform. Automate anything you can do manually — batch processing, layer manipulation, effects, exports.
Method 1 — UXP Developer Tool (modern):
.psjs fileMethod 2 — Legacy ExtendScript (.jsx):
.jsx fileNote: UXP (.psjs) is Adobe's modern platform — better for new scripts. ExtendScript (.jsx) is legacy but still works and has more online examples. Claude can write both.
Illustrator's scripting system. Can automate layout, generate patterns, batch export — anything you do manually.
How to run a script:
.jsx fileInDesign's scripting system. Automate layouts, generate documents from data, batch export, manipulate styles — anything repetitive.
How to run a script:
.jsx file.jsx file in that folderScripts folder path (Mac): ~/Library/Preferences/Adobe InDesign/[version]/en_US/Scripts/Scripts Panel/
Custom tools that run in your browser. The brand guidelines checker (the browser version) is a Chrome extension.
How to load one:
chrome://extensions in ChromeThat's it. No publishing, no Chrome Web Store. It just runs locally.
04
If you do one thing after this talk, do this.
Go to claude.ai and subscribe to Pro ($20/month). The free tier is fine for trying it out, but Pro gives you the usage you'll need for real work.
Open your terminal and run:
npm install -g @anthropic-ai/claude-codeIf you don't have Node.js, grab it from nodejs.org first.
The one you do every week that makes you want to scream. Resizing assets. Renaming layers. Exporting in twelve formats. Checking brand colours. Whatever it is.
Open Claude Code in your terminal (claude) and just… describe the task. In plain English. Be specific about what goes in and what comes out.
Reference
| Tool | What it does | Cost | Learn it? |
|---|---|---|---|
| Claude | AI model — your coding collaborator | Free / $20/mo | Yes — the main thing |
| Claude Code | Claude in your terminal | Included with Pro | Yes — install & type claude |
| Midjourney | AI image generation | From $10/mo | Yes — for image work |
| ChatGPT | AI model — alternative | Free / $20/mo | Optional |
| GSAP | Browser animation library | Free | No — Claude writes it |
| Puppeteer | Captures browser frames | Free | No — Claude writes it |
| ffmpeg | Compiles frames to video | Free | No — Claude writes it |
| Node.js | Runs JavaScript tools | Free | No — just install it |
| Homebrew | Mac package manager | Free | No — just install it |
| InDesign Scripts | Automate InDesign layouts | Free (with InDesign) | No — Claude writes it |