Nelson Jeronimo uses Claude Code connected to Figma to build and audit a multi-brand design system for a B2B e-learning product
A product designer rebuilds SkillUp's multi-brand tokens, grid and components with Claude Code in Figma, and lists what he had to correct.
Done withCCClaude CodeFFigma
Designer's own article; diagrams only, no product screens; ends with a contact pitch
WHAT THEY DID
Nelson Jeronimo, responsible for product design and the design system at SkillUp, a multi-brand B2B e-learning platform, works with Claude Code connected to Figma to build tokens, a 4-point grid and components, then to draw, audit and hand off product screens.
STEP BY STEP
- Tokens set up in Figma as four variable collections: primitives, semantic (light/dark), brands (one mode per brand) and responsive.
- Old colour tokens replaced; Claude Code rebinds the components to the new tokens.
- Audits against a closed 4-point spacing scale; off-scale values fixed.
- Local components moved into the library and instance counts checked.
- Product screens drawn at three widths with edge-case states, then audited, critiqued and handed off.
- React prototype and Storybook built from the package and compared with Figma's tokens.
HOW IT WENT
By his account: over a thousand variables in four collections, off-scale spacings (10, 14, 18, 22) moved onto the grid, over a thousand instances pointing at the library, a badge cut from a few hundred variants to about a hundred, and contrast checks with none failing at AA.
Reported results: Dozens of library pages left with zero bindings to the old colour layer, and a React prototype whose tokens matched Figma's on over a hundred colours across the brand modes, all but two (colour plus opacity, which the comparison could not read).
WORTH KNOWING
An unusually candid record of where the agent helped and where he had to correct it, including Figma API calls that fail silently. The figures are his own; he shows no product screens (only diagrams with made-up examples), says he did not measure the time saved, gives no work dates and ends with a 'talk to me' pitch.
TRY IT
- Close your spacing scale, then ask an agent to count every off-scale value in your Figma library.
- After any structural change made by an agent, read the file state back and count the result.
- Give brands and light/dark themes separate variable collections before you add a third brand.
Rates the entry, not the tool.
Source: Nelson Jeronimo · nelsonjeronimo.ptOpen as a page
- Work done: not stated in the source (Posted 8 Oct 2026; he describes the work as ongoing and everyday and gives no dates.)
- Source published: Oct 8, 2026
- On 4TC: added Oct 31, 2026 · checked Oct 31, 2026
About this source
Type: First-person workflow · Firsthand report
- Where Claude Code helps me every day: on the design system and on the product screens.
Nelson Jeronimo · nelsonjeronimo.pt · Published Oct 8, 2026 (Visible date 8 October 2026; matches page metadata.) · Checked Oct 31, 2026
Author's own article on his own site. No sponsorship disclosed; ends with a 'talk to me' contact call (self-promotional).
Access: open - The Figma agent is only as good as the rules you give it.
Nelson Jeronimo · nelsonjeronimo.pt · Published Oct 7, 2026 (Visible date 7 October 2026; matches page metadata.) · Checked Oct 31, 2026
Same author, his own site; corroborates his role at SkillUp.
Access: open
Source check: Reviewed by a 4TC editor on Oct 31, 2026. Claims, quotes and dates re-checked against the sources by Ella on 31 Oct 2026. Nobody at 4TC has tested this.
Claims and where they come from
- He works 'with Claude Code connected to Figma every day. It reads the file, writes to it and counts what is there.' (reported) [1]
- The project where he uses it most is SkillUp's, 'a B2B e-learning platform where I am responsible for product design and for the design system, across several brands.' (reported) [1][2]
- In Figma the system is four variable collections (primitives, semantic tokens, brands, responsive); 'When the library was published, it had over a thousand variables.' (reported) [1]
- An audit 'found spacings of 10, 14, 18 and 22 in components'; 'They moved to 8, 12, 16 and 20'. (reported) [1]
- After moving local components into the library, 'Claude counted: over a thousand instances pointing at the library, and none at a local component.' (reported) [1]
- 'The badge we inherited had a few hundred variants. The new one has about a hundred'. (reported) [1]
- Contrast audit: 'several hundred checks, none failing at AA, with the pairs read from the token file and not from a hand-written list.' (reported) [1]
- A React prototype and Storybook were compared with Figma: 'over a hundred colours across the brand modes, all equal but two.' (reported) [1]
- 'Some calls to the Figma API raise no error and leave the wrong result.' His rule: 'after any structural change, read the state back and count.' (reported) [1]
- 'I did not measure how much time this saves, so this article does not have that number.' (reported) [1]
- 'I am not showing product screens: the drawings are diagrams, with made-up examples.' (reported) [1]
4TC interpretation
Our reading, not something the source says.
Design-system work is mostly precise, repetitive counting. This shows a working designer handing that counting to an agent while keeping the system decisions, and the checks he added after it went wrong.
Designer impact
Established [1]
Agent edits through the Figma API can fail silently and leave wrong results.
- Re-read and count the file state after every structural change.
- Run an audit after a session of back-to-back agent changes.
Established [1]
Rules written as colour-ramp step numbers can produce the wrong colour.
- Check each rule against the colour that actually renders.
Established = documented by primary sources or the company’s own statements. Disputed = contested with evidence on both sides. Alleged = reported, not established.
Votes rate whether this entry was useful. They are not an endorsement of the tool, and don’t mean voters agree with the company’s practices.
Report an issue or correction
Share your own experience
4TC does not endorse a tool unless an explicit 4TC endorsement is shown.