Building the language AI could work from
LattiQ - a SaaS team management platform built to find out whether a design system could become the language AI needed to generate work worth keeping.
At a glance
Hand-designed the dashboard to set the direction; Claude generated the remaining 13 screens from the system.
Time saved
Context
Most product teams building SaaS already have a Figma design system in place - variables, components, patterns. This project starts there: not from scratch, but from a foundation that already exists. The question it answers is how AI enters that workflow without disrupting it.
The Product
LattiQ is a SaaS platform for team leaders and managers - tracking attendance, work quality, and project delivery. Unlike a typical SaaS product, LattiQ opens on an AI homepage where users interact with AI to pull information from the database. Across all pages, an AI button next to “Create new” lets users generate content via prompt instead of filling out forms.
Process overview
01 · Ideation
The sitemap and information architecture were built in collaboration with Claude before any screen design began - mapping the full product scope before committing to any visual direction.
02 · Design System
A fully tokenized, documented design system - variables, a type scale, and a complete component set - built by hand in Figma before Claude is involved. Three steps take this foundation from a file Claude can read to an agentic design system it can actually work from.
Step 01 · Preparing the library
Before Claude can generate anything useful, it needs a complete and accurate design language to reference. Color and typography variables, spacing tokens, and a full component set are built by hand in Figma - no shortcuts.
Step 02 · Building the skill
Claude can't reliably crawl Figma's own interface - it's client-rendered, so scanning it directly means guessing at half of what's there. The fix: translate the system into markdown Claude can actually traverse, plus a structured metadata sheet - one row per token, one per component, each covering not just what it is, but when to use it, when not to, and what to use instead. That sheet is what onboards Claude to the system; from it, Claude encodes everything into a reusable skill - its reference for every screen it generates.
Input · The metadata sheet
One row per token, 458 rows total - this is a slice of it. Every row states not just what a token is, but when not to use it and what to use instead.
Output · What Claude built from it
Step 03 · Reviewing what Claude extracted
This step exists because Claude doesn't always get it right. The most common failure is text styles - Claude will invent names that don't exist in the library, or merge styles that are actually distinct. Before generating a single screen, the extracted skill is reviewed against the original Figma file and corrected. Skipping this produces screens with phantom styles baked in.
03 · AI-Generated Screens
I designed the main dashboard myself to set the product's visual direction. From that foundation, Claude generated 13 screens following the existing patterns. The 3 earliest needed the most rework - few patterns to reference yet; the final 6 needed only minor edits. Drag to compare - AI output on the left, the designer's revision on the right.
Example 01
This screen had no existing pattern to reference. The AI output uses the correct components and styling tokens, but without a pattern, the overall layout and information hierarchy fall short of production standard.
Example 02
A comparable pattern existed for this screen. With something to anchor to, the AI output was much closer to production-ready - the designer's role shifted from rebuilding to refining.
Example 03
Here the AI was given no content constraints. The value wasn't the layout - it was the content inventory. The output surfaced information options the designer hadn't considered, which then became the starting point for deciding what actually belongs on the screen.
The workflow that emerged: AI handles screens where established patterns exist, freeing the designer to work on new and complex screens in parallel. Even when the output isn't usable, AI is a useful thinking partner for information structure. Accuracy improves the more the system is trained on the component library and existing patterns.
The revision took less time than building from scratch - the recorded AI Assistant screen went from ~8h to 3.5h. Even a wrong layout forces every content decision to the surface - the designer edits from a position, not from a blank page.
04 · Documentation
AI's value extends past pure design work. The biggest gain is in documentation - specifically the developer handoff, written in a language most designers aren't fluent enough to produce quickly. That gap is where the most time gets lost.
Example 01 · Designer Spec
The designer-facing spec covers when to use the component, variants, states, anatomy, and accessibility notes - written in the language designers already work in. AI drafts the structure from a Figma node; the designer reviews and refines.
Example 02 · Developer Handoff
Redlines, sizing tables, behaviour specs, edge cases - the language developers work in, which most designers aren't fluent enough to write quickly. This is where AI saves the most time: translating the same component into a build-ready document without the designer having to learn a new vocabulary.
The documentation that used to take the longest - developer handoffs, redlines, behaviour specs - became the easiest. A handoff spec that took ~2h now takes ~10 min. The AI writes in the language developers need; the designer's time goes into judgment, not drafting.
What I Learned
Train before you prompt
Don't hand AI a task and expect a design. Ask it to study the system, analyze the patterns, and write a record it can reference later. The quality of the output starts with the quality of the preparation.
80% is a starting point, not a finish line
A well-trained AI gets close - but close isn't done. Always review the result. AI output is a strong draft, not a final product. The designer's judgment is what takes it the rest of the way.
It was a tool before it was a design tool
AI existed long before it entered the design workflow. The real opportunity is applying it openly - to research, to documentation, to communication - not just to the screens.