Trent Michael — Process Sydney 002 — March 2026

The Beginner's Guide
to the Tools

A companion to Trent Michael's Redesigning Design talk from Process. 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

The AI Tools

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.

Claude

Primary tool Free / $20/mo Pro

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.ai

Claude Code

Key unlock Included with Pro

Claude, 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:

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

Then open your terminal, navigate to a project folder, and type claude. That's it.

Midjourney

From $10/mo

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.com

Nano Banana Pro

fal.ai Pay per use

Google DeepMind's image generation model (part of the Gemini family). Unlike other image generators, it reasons about images — delivering extremely accurate results with genuine semantic understanding.

Why it matters: Flawless text rendering, consistent characters across images, and 4K output. If Midjourney is great at vibes, Nano Banana Pro is great at precision.

How to use: Accessed through fal.ai — sign up, add credits, and generate via the web interface or API.

fal.ai

ChatGPT

Free / $20/mo Plus Alternative

OpenAI'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.com

Google AI Studio

Free Web tool builder

Google's AI platform with a "Build mode" — describe a web tool in plain English and it generates a working app. Free access to the latest Gemini models.

Why it's here: Perfect for quickly building interactive tools and prototypes. Need a colour palette generator? A unit converter? A client presentation timer? Describe it and you've got a working web app in minutes.

aistudio.google.com

02

The Animation Pipeline

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.

GSAP

Free You don't learn this

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.com

Puppeteer

Free You don't learn this

Controls 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.dev

ffmpeg

Free You don't learn this

Takes 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 ffmpeg

If you don't have Homebrew yet:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

How the pipeline works

You describe the animation to Claude Code
↓
Claude writes GSAP code (runs in browser)
↓
Puppeteer captures every frame as a PNG
↓
ffmpeg compiles the PNGs into an MP4
↓
You have a finished video
Try it yourself "I want to create a simple animation where a circle bounces across the screen from left to right, and export it as an MP4 at 1080×1080. Use GSAP for the animation, Puppeteer to capture frames, and ffmpeg to compile the video. Set up the whole pipeline for me."

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.

Troubleshooting the pipeline

Common issues

Something break? Describe the error to Claude. It'll fix it.

See it in action

Building a web-based pattern maker tool for Petbarn — described in plain English, built by Claude Code.

03

Scripting Your Design Tools

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.

Figma Plugins

TypeScript Plugin API

Custom tools that run inside Figma. The brand guidelines checker from the talk is a Figma plugin.

How to create one:

  1. In Figma: Plugins → Development → New Plugin
  2. Figma generates a starter template
  3. Open that folder in your terminal, run claude
  4. Describe what you want the plugin to do
Plugin docs

Photoshop Scripting (UXP)

.psjs files

Photoshop's modern scripting platform. Automate anything you can do manually — batch processing, layer manipulation, effects, exports.

Method 1 — UXP Developer Tool (modern):

  1. Get Claude to write you a .psjs file
  2. In Photoshop: Plugins → Development → UXP Developer Tool
  3. Click "Add Plugin" and load your plugin folder
  4. Click "Load" to run it

Method 2 — Legacy ExtendScript (.jsx):

  1. Get Claude to write you a .jsx file
  2. In Photoshop: File → Scripts → Browse
  3. Select your file and run it

Note: 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.

UXP docs

Illustrator Scripting (ExtendScript)

.jsx files

Illustrator's scripting system. Can automate layout, generate patterns, batch export — anything you do manually.

How to run a script:

  1. Get Claude to write you a .jsx file
  2. In Illustrator: File → Scripts → Other Script
  3. Select your file and run it
Scripting docs

InDesign Scripting (ExtendScript)

.jsx files Scripts Panel

InDesign's scripting system. Automate layouts, generate documents from data, batch export, manipulate styles — anything repetitive.

How to run a script:

  1. Get Claude to write you a .jsx file
  2. In InDesign: Window → Utilities → Scripts
  3. Right-click "User" folder → "Reveal in Finder"
  4. Drop your .jsx file in that folder
  5. Double-click the script in the Scripts panel to run it

Scripts folder path (Mac): ~/Library/Preferences/Adobe InDesign/[version]/en_US/Scripts/Scripts Panel/

InDesign scripting docs

Chrome Extensions

manifest.json JavaScript

Custom tools that run in your browser. The brand guidelines checker (the browser version) is a Chrome extension.

How to load one:

  1. Get Claude Code to build the extension in a folder
  2. Go to chrome://extensions in Chrome
  3. Enable "Developer mode" (top right toggle)
  4. Click "Load unpacked" and select the folder

That's it. No publishing, no Chrome Web Store. It just runs locally.

04

Getting Started

If you do one thing after this talk, do this.

Sign up for Claude Pro

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.

Install Claude Code

Open your terminal and run:

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

Pick your most annoying repetitive task

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.

Describe it to Claude

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.

Starter prompts to try

For Figma "Build me a Figma plugin that checks if all text layers in my selection use our brand fonts: Graphik and Tiempos. Flag anything that doesn't match."
For Photoshop "Write me a Photoshop script that takes every layer in my current document and exports each one as a separate PNG at 2x resolution."
For Browser Tools "Build me a Chrome extension that adds a colour picker overlay to any webpage. When I click a colour, copy the hex value to my clipboard."
For Animation "Create a simple text animation where the word 'Hello' types on letter by letter, pauses for a beat, then fades out. Export it as an MP4 at 1080×1080."

Reference

Quick 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
Nano Banana Pro AI image generation — precision Pay per use Yes — for precise imagery
ChatGPT AI model — alternative Free / $20/mo Optional
Google AI Studio Build web tools with AI Free Yes — for quick prototypes
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