T2 · 01 · Designers Working in a Real Product Codebase
Your First Components with AI: HTML and CSS
A design system doesn’t end in Figma: it comes alive in code. We take a real Figma file, turn colours and type into tokens, write a component spec and build it with an agent, then send the tokens back to Figma.
- 2 hours
- Live session
What we do
- A project folder and a CLAUDE.md that sets the rules
- Colours and type turned into primitive and semantic tokens
- A spec read from your Figma file via MCP
- A button built, previewed in every state and checked against the spec
- Tokens exported back to Figma, closing the loop
You leave with
A set of documented components, the tokens behind them and the skills to repeat it.
Who it’s for
For product and design-system designers who change real screens and components and want to guide and review an agent’s work.
Format
- Length
- 2 hours
- Format
- Live session, online
- Price
- Single or as part of the track