Decision
Why not pick colors manually
Agents drift when tokens are vague. A machine-readable palette with Figma variable names gives both humans and AI the same source of truth.
Eliminating manual color picking from the workflow
Automating design token extraction with Claude + GPT
Overview
I paired Claude and GPT to automate HEX extraction from Figma variables into a project-ready design token document — removing a repetitive step that slows down AI-assisted implementation.
The problem
Manual token extraction does not scale
When matching Figma exactly, every color must be named, hex-coded, and mapped to CSS variables. Doing that by hand for each project is error-prone and breaks flow when directing AI agents.
Approach
Two models, one pipeline
I used GPT to parse and normalize color lists from Figma variable exports, then Claude to structure them into a design-system document with semantic names, hex values, and Figma variable cross-references.
The output became docs/design-system.md — a stable reference agents and I could both cite during the portfolio build.
Learning
Lesson
Small automation wins compound: token extraction took minutes instead of an hour, and downstream prompts became more precise.
Outcome
Tokens that agents could actually use
The portfolio build referenced Primary dark (#333333), Page cream (#f4f0e5), and Text secondary (#626c81) consistently — because they were documented once and reused everywhere.