AI and Emerging Tech | Design Tool 2026 | GyanDhan
Building a Responsive Table System — Figma → Claude
--- 01 Context
Beacon (our design system) had four different comparison-table patterns scattered across the product, each hand-built and inconsistent — inconsistent number formatting, no clear rule for column width, and no plan for how any of them should behave on mobile. I owned defining a single, content-driven table system that could replace all of them and hand off cleanly to engineering.
--- 02 Process
Audit in Figma
Reasoning with Claude, not just prompting.
Rather than asking for a finished screen, I used Claude as a design partner to pressure-test logic: what should happen with only two columns, when both are text-heavy, when there are 8+ columns, when a column is a single digit next to a paragraph. Talking through each scenario before building anything kept the system honest the rule had to survive real content shapes, not just the happy path.
From rule to prototype
Once the column-classification logic was settled (numeric/short/text, shrink-vs-flex, equal-share for competing text columns), Claude built a live HTML lab with real Excel test data — six seeded scenarios and four freeze-mode variants (basic, frozen column, frozen row, both) — so the logic could be checked against real numbers instead of imagined ones.
Iterating like a design review
I fed back the same way I would to a teammate: "why no columns," "make it work on phone without cards," "there's dead space at the bottom" — Claude adjusted the underlying CSS/logic each time and I re-checked the rendered result, closing the loop fast without leaving the browser.
Handoff.
The final deliverable wasn't a static mock — it was a governing spec (.md) covering column logic, row height, padding, freeze behavior, and a copy-paste component file with the CSS and classifier JS engineers could drop straight into the codebase.
My role vs. the tool
Figma stayed the space for auditing and comparing what existed. Claude became the space for testing a rule against reality — building working, data-driven mockups faster than I could hand-craft each edge case, so I could spend my time on judgment calls (what should freeze, what should stack, what's the actual brand color) instead of redrawing tables.
Outcome
One system instead of four. Column widths and mobile behavior now derive automatically from content — no future table needs to be manually classified. Shipped as a spec doc + working component so engineering could implement without further design clarification.