Plumbline · With IIIMPACT · In progress
The situation
Different tools.
Different results.
Teams work across Figma, AI design tools and the product code. When each uses different components or rules, mockups and the finished product drift apart. AI-assisted builds can also lack a clear design system in the code itself.
Design
Figma
Design components and guidance.
AI mockups
Claude Design
The tool’s starting components.
The product
Client codebase
The components people actually use.
Design audits · Tokens · Components · Build checks
How I helped
Start with
the codebase.
With IIIMPACT, I’m helping establish design systems in client codebases. On my own AI Ching site, I replaced repeated styling values with shared tokens and components, then added a build check to catch new inconsistencies.
AI Ching · Initial audit
Similar cards, different values
- Card A
1.25rem- Card B
1.3rem- Card C
1.35rem
The decision
One shared token
rounded-card
Define the card corner once.
The build
Reuse the component
Consistent appearance across pages.
Design audits · Tokens · Components · Build checks
What changed
One source.
Connected tools.
The client’s codebase stays the source of truth. With IIIMPACT, I’m working on views of that system in design tools, and plugins that make its rules available while coding. Both are in progress.
Source of truth
Client codebase
Shared tokens + components
Projection → design tools
Design from the same rules
In progress
Plugin → developers
Build from the same rules
In progress
Design audits · Tokens · Components · Build checks