AI for Designers & Non-Developers
Claude Code in practice – from idea to prototype without writing a line of code yourself.
Agenda
2 hours – from fundamentals to practical demos
Intro & Icebreaker
Who are we? Why should designers care about AI? The CLI monster – don't be afraid of the terminal!
Fundamentals
Terminal, Claude Code, IDE, Git, Figma integration, Markdown
Break
Stretch, coffee & open discussion
Practical Workshop
Live demos – from voice prompting to designing in Figma via the terminal.
Closing & Discussion
How can I use this in my role? Next steps, accounts, teaser for the "Getting Things Done" series.
Workflow & Pro Tips
From the Claude Code team and Boris Cherney – the creator of Claude Code
Explore
Understand the codebase and problem
Plan
Let Claude suggest a plan
Implement
Build with Claude Code
Commit
Save and version
Boris Cherney's setup
The creator of Claude Code runs 5 Claude instances in parallel in the terminal, numbered for easy navigation. Plus 5–10 "background Claudes" on claude.ai. He alternates between exploring, planning, and implementing.
& – Hand off local sessions to the webgit worktrees for parallel workGhostty CLI
The Claude Code team likes Ghostty as terminal. Color-code tabs to distinguish different worktrees.
Voice Dictation (STT)
You speak 2–3x faster than you type. Voice dictation gives better prompts and therefore better results.
Context is everything
The right context is the most important thing for good results. The fuller the context window, the worse the results. Clear often with /clear.
Be specific
- -Reference files with
@ - -Give URL to spec/info you want in your context
- -Use
/permissionsto approve common domains and MCP tools
Use subagents
Subagents save context – they do things and report back their findings. Perfect for exploring, designing or analyzing without filling the context window.
Let Claude see its results
Use browser MCP, Skills or screenshots so Claude can review its own work and iterate toward better results.
Tools
Everything you need to get started with AI-driven design work
Claude Code
CoreAI assistant in the terminal. Opus for complex tasks, Sonnet for speed, Haiku for simple queries.
Read moreWarp Terminal
TerminalModern terminal with built-in AI. Makes the terminal less intimidating for beginners.
Read moreAntigravity / VS Code
IDECode editor to see what Claude does. Antigravity is an IDE from Google.
Read moreFigma MCP
DesignConnect Claude directly to Figma via Model Context Protocol. Official integration supported by Figma.
Read moreSuperpowers
PluginStructured methodology: Brainstorm, Plan, Execute, Review. Perfect for the design process.
Read moreGit & GitHub
VersionsVersion control – save, undo and collaborate. Claude handles git for you.
Read moreQuick Guide
The cheat sheet – take it home after the workshop
Start Claude Code
claude# Start in current folderclaude "Describe task"# Start with a promptTerminal Basics
pwd# Where am I?ls# What's here?cd folder-name# Enter a foldercd ..# Go up one levelmkdir new-folder# Create a new folderopen .# Open folder in FinderCommon Commands
/helpShow help/clearClear conversation/initCreate CLAUDE.md/modelSwitch model/contextShow context usage/mcpManage MCP servers/compactCompress conversationShift+TabToggle auto-acceptShift+Tab x2Plan modeEscStop ClaudeEsc x2Undo / rewindGood Prompts
"Create a responsive landing page for a coffee roastery with a hero, three USP cards and a CTA button."
"Review the accessibility of this page according to WCAG 2.2 AA. Give the top 5 issues."
"Create 3 personas for a booking app. Include needs, pain points and a user journey."
Tips
- Be specific – "Blue header, white background, green CTA" instead of "make a nice page"
- Iterate – Say "change the button to red" instead of starting over
- CLAUDE.md – Write your preferences, Claude remembers them next time
- Skills – Create custom /commands for tasks you do often
Book workshop
Claude Code in practice – from idea to prototype without writing a line of code yourself.
Book workshop