Name Attention Design System
Overview Attention is the design system I built for PortfolioIQ, Synaptic's VC portfolio management platform, replacing a fragmented UI with one premium, AI-readable language across brand, design, and code. I led it end to end: aligned brand tonality with the founders, architected a three-layer token system bridging Figma and Ant Design, built a Figma-to-code plugin, and pushed AI-generated fidelity from 70% to 95%+. The result: features that used to take a sprint now ship in a day, every designer works directly in the system with codebase access, and zero competing libraries survive, one source of truth across design and code.
My Role Design Systems, UI/UX Design, Design-to-Code Tooling
Attention Design System cover slide: PortfolioIQ logo, title, and subtitle — from fragmented UI to a premium design language with a single prompt turning Figma into production code at 95%+ fidelity
Overview and My Role: Attention unifies PortfolioIQ's fragmented UI into one AI-readable design language; role covered brand tonality, the three-layer token architecture, the Figma-to-code plugin, and governance
Goal: build a design system where Figma and code are one-to-one, so AI can turn any design into production code at near-100% fidelity
Contents: five-stage process — Discovery, Define, Develop, Deliver, Delight
Section 1, Discovery: understanding how a product built by skilled designers became visually inconsistent, and what it was costing the business
Understanding before proposing: a one-month MVP deadline had designers building in parallel with no shared foundation, and every sprint after shipped new features on top of the inconsistencies
UI audit findings: visual drift, engineering drift, and a system unreadable to AI — 8+ button variants, 4 heading styles, zero documented tokens, 5 greys used inconsistently
Feedback analysis: clients felt the visual gap against premium pricing, and internal teams were slowed down hunting for components and re-litigating style debates
UI before Attention: six screenshots of PortfolioIQ's fragmented interface across company pages, documents, and metrics tables
Section 2, Define: converging discovery evidence into a sharp problem statement — the problem, the users, and measurable success
The problem wasn't the components, it was the process: every design-to-development handoff introduced small inconsistencies with no shared source of truth
Three users with competing needs: designers wanted a small curated token set, engineers wanted complete low-maintenance components, and AI needed identical naming across design and code
Success criteria: one source of truth with zero competing libraries, and the measurable bet that a precise enough system lets AI turn Figma into near-100%-fidelity code
Goal restated: Figma and code one-to-one, so what is designed is exactly what ships
Design strategy pyramid: build the token foundation first, map components instead of reinventing them, govern adoption, then make it AI-native
Section 3, Develop: building the bridge between two disciplines with opposite instincts and a third user, AI, resolving the library conflict and building the tooling
The first fight — which library: designers wanted shadcn's simplicity, engineers wanted Ant Design's completeness; the call was to architect a bridge instead of picking a winner
Three-layer token architecture: Figma Variables to semantic tokens to Ant Design tokens, shown end to end with the emerald-800 example
I built the translator: a Figma-to-code plugin converting designs directly into Ant Design components
Figma tokens, the plugin, and generated code side by side: the Ant Design to attention-ui token mapper detecting a DatePicker selection and producing theme.ts token mappings
Components mapped, not reinvented: study Ant Design's states, recreate them in Figma with Attention's tonality, and document every deliberate deviation
Attention Design System documentation: Radio Group states across default, hover, focused, and disabled, plus the component sidebar and a modal spec
The 70% moment: the first AI-built page hit ~70% fidelity; watching an engineer work exposed naming mismatches and undocumented states, which were fixed to reach 95%+
Section 4, Deliver: getting every team onto one system
Every team using one system: designers ship UI fixes directly with codebase access, engineers work from a full Ant Design mapping, PMs and analysts prototype and ship in the system's own language
How it stays clean: a token gatekeeper, a deviation log, a request workflow, and one name for the system instead of competing internal libraries
Attention Design System documentation in light mode: the same Radio Group and modal specs, plus icon-only, stretched, and hug layout variants
What changed: 95%+ AI accuracy, 1-day feature velocity, zero competing libraries, 100% design adoption
Next in Attention: the current frontier is a table specification for data-heavy screens, covering hover states, padding, and row height, handed to engineers as implementable pseudocode
Section 5, Delight
Beyond usable, making it feel premium: a PortfolioIQ company page demonstrating numbers as the hero, space that breathes, restrained color, and states that speak
What each team gained: designers get a token set small enough to enjoy, engineers ship features in a day instead of a sprint, PMs and analysts gain the confidence to ship changes themselves
Closing slide: Thank You — Randheer Kumar, Senior Product Designer