Audit and accounting software
Role
Freelance design systems lead
Period
2026
Scope
Component inventory, Figma descriptions, review workflow
An audit and accounting product built in Angular on PrimeNG and AG Grid. Its Figma components needed descriptions that designers, developers and AI agents can all rely on. Writing those by hand, one at a time, doesn’t scale, and the style drifts with every author.
One source of record. A component inventory in Airtable holds every description and feeds the descriptions in Figma, so the two don’t drift apart.
A fixed shape. Every description follows the same structure: one sentence on what the component is, its props, anything Figma-specific, the related architecture decision, related components, and a link to the PrimeNG docs. One component serves as the benchmark.
Drafting at scale. Drafts are written with Claude and written back to the inventory in batches, instead of one record at a time.
A person signs off. Every draft goes to my design partner, who owns the house style, before it counts as done. AI drafts are proposals, not the final word.
Icon sourcing. Material Icons, Material Symbols and MDI get mixed up constantly. Tracing each icon to its real source decides whether it comes from a bundled font or needs its own SVG.
1
What it is
One sentence on what the component is for.
2
Props
The props that matter, by name.
3
Figma notes
Anything that only applies in Figma.
4
Decision
The architecture decision record it follows.
5
Related
Components it is used with or confused with.
6
Docs
A link to the PrimeNG documentation.
The fixed shape every component description follows.
Two places, one truth. Descriptions live in an inventory and get read in Figma. Keep them in two places and they drift, so the inventory had to be the only place anyone edits.
AI drafts drift. Left alone, AI-written descriptions slide toward generic prose and stop matching each other. Speed was never the problem. Consistency was.
Figma isn’t a rich text editor. Descriptions show up as plain annotations in Figma, so formatting choices like punctuation and structure had to work without styling.
Icons with the same name. Icon names that look identical come from different libraries. Get the source wrong and the icon is missing from the bundle developers rely on.
One benchmark. Every new description is checked against a single reference component, so “does this match?” has a concrete answer instead of a gut feeling.
A human gate. Drafts are proposals. Nothing counts as done until my design partner, who owns the house style, has signed it off.
Batch, then review. Drafts are written back to the inventory in batches, which makes filling dozens of empty descriptions practical and leaves review time for what matters.
Trace every icon. I traced icons to their real source, Material Icons, Material Symbols or MDI, before deciding between the bundled font and a direct SVG.
When every description has the same structure, a reviewer can scan it in seconds, a developer knows where to look, and an agent can read and apply it. That’s what makes a design system AI-ready in practice: not a feature, but documentation that is consistent enough to trust.
Have a design system that needs this kind of work?