The recording from our first free workshop, where 250+ designers started to build a design system from scratch with Claude. Everything you need to build along is right here.

<aside> 🛠️

We didn't get through the whole workshop. We ran out of time before the end, so this covers the build up to where we stopped. We're doing a Part 2 to finish it properly, and we'll email you the details soon.

</aside>

▶️ The recording

https://zoom.us/rec/share/hd8jhFJpjSDwtQ1wkYqBcQlZv7TqX_q8QCkox_1nbF_5m0UhQKfR7kjPvTrqPmLM.Vy_tVG_OXS5zoE5K?startTime=1780588420000

Quick heads up: the recording started a few minutes late, so it picks up partway through. To get the full context on what we were building, open the Figma file below first, it walks the whole thing from the start.

🧰 Build along

https://www.figma.com/design/seq8flZxq0DncA6JnkM5Od/Yummy-Labs-AI-|-Design-Workshop--1?node-id=2-2&t=uDrL9ZTJK2VW2wtl-1

This is the exact file we built in during the workshop, and it has all the resources you'll want to download before you start. Begin here, then play the recording.

Note: We cannot give you access to this figma file (please duplicate to your own project in figma)

📚 What's in the starter kit (download in Figma)

Here's everything in the kit and what each piece does. A few of you said the foundations were the most valuable part, and we agree, so these are worth a read even on their own:

• Project instructions (plain text): context for your Claude project. Paste this into your project's custom instructions so Claude knows how to work with you.
• Product brief (.md): what Knowunity is, what it does, and who it's for. The foundation Claude needs to understand the product.
• User personas (.md): the students we designed for, with their goals, pain points, and context. This feeds every design decision.
• Design principles (.md): what the product's design stands for, playful or minimal, approachable or professional. This guides every token decision.
• Platform constraints (.md): the technical guardrails, platforms, breakpoints, grid systems, spacing scales, sizing, and typography.
• Design system building practices (.md): how Claude should architect and build the design tokens in Figma.
• Visual standards for token displays (.md): how to get Claude to produce portfolio-quality visuals of your tokens in Figma.
• Style tile (Figma): the visual starting point for token generation. Duplicate it into your own Figma file where you have the MCP connected.
• Bonus, Figma Console MCP Plugin API Reference skill (2 .md files): a set of files that teach Claude every undocumented quirk of the Figma Plugin API before it writes a single line of code. API rules, performance patterns, a standardized build sequence, troubleshooting for known errors, and visual quality principles.

All the .md files go into your Claude project as context. The style tile goes into your own Figma file, and Claude reads it through the MCP when you start your chat.