10_UICollective_Designing_With_AI

15 min read

Overview

UI Collective’s founder (Kirk) walks through the complete AI-native design stack end-to-end. His core argument: “AI is not a tool, AI is a workflow.” Where designers used to rely on a single tool (Figma), they now must juggle a suite — Claude, Codex, Claude Design, Google Stitch, and Figma — and know when to use each to save time and tokens. He lays out a staged pipeline: use Google Stitch for free, fast mid-fi iteration to align with stakeholders on metrics/data/widgets; use Claude Design for polished high-fi first drafts but sparingly (it’s slow and burns limited credits); generate initial designs in Claude/Claude code (better output and more accurate with Figma attributes), then iterate and refine in Codex (3-4x fewer tokens, faster), pushing back and forth through Figma as the hub. He runs a real experiment showing Codex completing identical changes in 4 min/17K tokens vs Claude’s 12 min/38K tokens. The latter half is about training AI on your design system: building reusable Claude/Codex skills for variables, type styles, and components so AI stays on-brand, plus a strong caution against using AI to build design systems themselves (buttons, variables) — use paid/free templates instead and reserve AI for complex layouts and widgets. He also shows how to feed AI reference screenshots (from Mobbin) for faster, first-try results.

Key Insights

  1. AI is a workflow, not a tool — two to three years ago design relied on one tool (Figma); now it’s about using and collaborating between multiple tools (Claude, Codex, Google Stitch, Figma) and adjusting approach per task. Designers still habitually look for one tool that does everything. (0:53)
  2. The “one perfect tool” doesn’t exist — a boss may pressure you to find a tool that flawlessly ingests your design system, prompts-to-design on a canvas, gives Figma-like fine control, and one-click builds handoff docs and production code. That dream tool doesn’t exist yet (maybe in 3 years). (1:50)
  3. Reality instead of the dream — you must train AI on your design system through a series of prompts (brand, styles, variables, components), store that knowledge, generate multiple iterations across tools (outputs differ between Claude, Codex, Stitch), push/pull from Figma for iteration, build with a developer (not one-click production code), and still dialogue with AI on usability/accessibility guidelines. (3:08)
  4. Figma has fallen behind in AI — despite clickbait about Figma dying, it’s not finished, but its AI is “incredibly underwhelming.” Figma Make’s design-system sync misapplies things (e.g. applying error states everywhere), and its general AI produces generic results. You get far better output in Codex, Claude code, Claude Design, and Stitch. (5:52)
  5. Codex is OpenAI’s answer to Claude code — both can produce good designs, but with key differences: Claude is the better coder (developers prefer Claude code over Codex; a designer’s Codex output had to be redone in Claude), while Codex uses ~3-4x fewer tokens for the same work and is faster. (7:39)
  6. Claude is more accurate with Figma attributes — when pushing a design to Figma (with Figma MCP + skills connected), Claude is generally better at using auto-layout and responsive properties (fill, hug) than Codex. (8:34)
  7. Token/plan economics matter — even on a paid Claude pro plan you often run out of tokens on large, complex designs; there are rumblings of Anthropic raising or removing the $20/mo plan. Be strategic about token spend. (8:19)
  8. Figma MCP ≠ Figma skills — MCP gives AI access to your actual design files (it can read/understand them; without it the AI can’t read anything in your files), while skills teach the AI how to use Figma (apply variables, use components, navigate the canvas). You need both. (9:27)
  9. Google Stitch web designs are weak, mobile designs much better — running the same financial-app prompt, the desktop output was “way worse” and clearly AI-generated, while mobile was far better. Stitch is in beta and results are hit-or-miss, but some base prompts produce clean, polished output. (17:36)
  10. Claude Design asks clarifying questions to polish first try — unlike Stitch (which just runs), Claude Design asks about the primary user, key workflows, hero screen, aesthetic direction, and information density to produce a polished version the first time. (24:31)
  11. Claude Design is slow and expensive — one dashboard took ~8% of weekly usage; two prompts brought usage to 15% (resets next week). For fast early-stage iteration and concept exploration, Stitch is better; save Claude Design for high-fi where you want a great first result. (25:42, 27:55)
  12. Use Stitch to inform your Claude Design prompt — Stitch’s objective is mid-fi wireframing to align on metrics/formats/charts with stakeholders; then feed Claude Design the specific data, format, and metrics you aligned on, to reduce edits and get it right first try. (28:35)
  13. Claude Design doesn’t feel like a design tool — it can’t rearrange things like Figma; you edit items individually or leave comments for the model to change manually. It’s very static for larger layout changes. (29:50)
  14. Design-system import into Claude Design is not production-ready — importing your design system still misses fundamental elements (missing variants, no ghost/danger names, no H3/H5/H6, no body large/medium). It’s gotten better since launch but still misses core parts. If your boss says “just import the design system,” show them the flaws. (42:22)
  15. “Just because AI can do it doesn’t mean you should use AI to do it” — AI-built variable libraries/components are incomplete and you’ll spend more time reverse-engineering them than building them yourself. AI has no idea about your brand’s guidelines and needs. (49:16)
  16. AI should build complex layouts/widgets, not simple components — building even a button component took 6 minutes and 5.4K tokens, and it still missed variants/variables. Buttons, links, fields, labels, inputs are everywhere in free/paid templates; reserve AI for complex tables, graphs, dialogues, and layouts. (53:56)
  17. Train AI on your design system in a staged order — first train it on variables and styles, then on components + related documentation, and only then use AI to build larger modules/widgets/dialogues. Make everything reusable so you don’t retrain every time — this is where custom skills come in. (58:35)
  18. Build your own variables so you know when each is used — if you ask AI to define usage cases it hallucinates; building variables yourself means you know exactly when they’re used and not, which is essential for correct training data. (1:00:29)
  19. AI works better from visuals — like telling a kitchen builder “I want it dark” (they guess), AI can’t intuit your vision. Provide specific reference examples (e.g. from Mobbin) so it can reproduce the look first try instead of burning tokens on back-and-forth. (1:15:09)
  20. GPT-5.5 image generation is an underused inspiration tool — in ChatGPT (not Codex) you can drop in a screenshot and get alternate design options fast; it’s included in the ChatGPT plan and can change aspect ratios. Most designers don’t know about it. (1:22:52)
  21. Push designs to Figma then iterate in Codex only for batches of changes — smaller tweaks (one color, two moved items) are better done in Claude; a full app with many changes justifies the Figma→Codex round-trip. Decide per task based on tokens/time cost. (1:21:32)
  22. Polish in Figma before returning to Claude/Codex — ensure styles and variables are applied in Figma first; don’t clean up small things in Codex if you can do it directly in Figma, then bring it into Codex or back to Claude. (1:26:33)

Actionable Techniques

  1. Download/set up the full stack to follow along: Codex, a Claude account (prefer the desktop app), and a Google account for Google Stitch. (7:15)
  2. Install the required “Figma use” skill (Figma MCP server guide) in bulk — download the entire zip from GitHub because it contains all the sub-skills; the other skills won’t work well without it. (10:47)
  3. Install the “supply design system” skill — lets you connect existing Figma designs to your design system (the presenter uses it less but many designers find value). (11:25)
  4. Install the “audit design system” skill — the presenter’s favorite; it audits existing designs and flags where the design system isn’t applied, wrong component/variable/style, or unused elements, then fixes them. (11:53)
  5. In Claude, install via Customize → upload plugin — drag in the MCP-server-guide zip to bulk-upload sub-skills. Important gotcha: even though it says “includes the Figma MCP servers,” you still must go to Connectors → Install → Connect and sign in to Figma in the browser to actually establish the connection. (12:29, 13:33)
  6. In Codex, install skills under Skills → search “Figma” and install them individually (the Figma plugin containing all skills may only roll out to workspace users; on a personal plan the workaround is installing each skill). Availability varies per user. (14:22, 15:22)
  7. Use Google Stitch for fast, free early-stage concept iteration — generate mid-fi mobile wireframes without burning tokens; use “generate variations” with creative range (refining/exploring/reimagining) and vary by screen/element to explore layouts, widgets, and data display for internal-stakeholder alignment. Don’t show these to clients (they’re not production-level). (19:59, 21:26)
  8. Match tool to stage: Stitch (mid-fi) → Claude Design (high-fi first draft) → Claude/Codex + Figma (production) — use Stitch to align on metrics/formats/charts cheaply, then give Claude Design the specifics to reduce edits. (28:35)
  9. In Claude Design, build a new project, run the prompt, and answer its clarifying questions (primary user, key workflows, hero screen, aesthetic direction, information density) to get a polished result first try. (23:30)
  10. Hand off Claude Design to Claude code — use the “hand off to Claude code” button, copy the command, and paste it into a new Claude code chat. (32:07)
  11. Push Claude/Claude-code designs to Figma, then pull into Codex — designers are comfortable with the Figma step in between: make styling/layout tweaks in Figma, then bring it into the other AI tool. (33:57, 34:26)
  12. The efficient token workflow: start in Claude, iterate in Codex, return to Claude — generate initial designs in Claude (or Claude Design→Claude code), push to Figma, pull into Codex for faster/cheaper iteration (Codex made identical changes in 4 min/17K tokens vs Claude’s 12 min/38K tokens), then bring back to Claude to finalize for developers. (38:38)
  13. Decide per-task when to use Claude vs Codex — small changes (one color, two moved items) are not worth the Figma→Codex round-trip tokens; larger batches of changes (a couple of days of edits across a full app) justify it. (39:52)
  14. In Claude Design, build type styles + variables in an empty Figma file via prompt — e.g. “build me type styles H1-H6, P1/paragraph medium/large/small inside this Figma file, with variables inside each style.” It produced a typography collection with applied variables. (45:40)
  15. Use a three-tier variable architecture when prompting — Brand (raw hex codes + groupings), Alias (primary, secondary, error, etc.), and Map (surface/text/icon/border variables), with modes for second brand and dark mode. (47:14)
  16. Verify AI-built variables and components before use — even Claude’s button component set missed disabled variables/borders and left out a second-mode/success-warning variable set from the button variants. Always review and reverse-engineer AI output against your real needs. (49:25, 52:52)
  17. Don’t have AI build your design system from scratch — start from a design-system template (free on Figma community, or ~150 paid systems worth the investment) or build components yourself from tutorials; reserve AI token/time for larger, complex widgets, modules, and dialogues. (56:48, 58:17)
  18. Train AI on variables with a template — create a table of token/variable name, value on light mode, value on dark mode, and when it’s used; copy a link to the frame, then prompt the AI to study it and build a Claude skill teaching when to use different variables. Add guardrails (e.g. exclude type variables; focus on surface/border/text/icon) and save it as reusable markdown files. (1:00:08, 1:01:24)
  19. Train a separate type-scale skill — prompt the AI to study all text styles, the variables applied to them and their desktop/mobile values, and build a skill informing which styles are available (so it doesn’t leave a style unapplied because no exact match exists). (1:04:31)
  20. Group components into broad categories for training — organize as form elements (field/input/dropdown/textarea/checkbox/radio/button), navigation, and data display (tables/tags/avatars/badges); prompt the AI to master each group in order (“do not move to navigation until you have mastery of form elements”) and build a skill with per-group .md files. Always specify you want components, properties, and variants studied. (1:08:03, 1:11:05)
  21. Sync skills between Claude and Codex — in Claude, run a prompt to package your variable, type-style, and component skills into separate zip folders; in Codex, provide those zips and have it create matching skills so both tools follow your design system. (1:14:24)
  22. Feed AI reference screenshots (e.g. Mobbin) for first-try results — screenshot examples you like, drag them into Claude code with your skills, and reference them in the prompt (“using the reference example attached along with the variables, type styles, and component skills, build a page like this”). Provide multiple examples so the AI finds synergies and doesn’t copy one-to-one (which would be someone else’s design). (1:16:48, 1:19:38)
  23. Always attach your design-system file link even when skills cover it — copy a link to the Figma design-system file into the prompt as a fallback reference, and explicitly tell the AI not to push to Figma yet so you can review/refine locally first. (1:18:20)
  24. Batch fixes before deciding to push to Codex — when a design has issues (e.g. a rounded button overriding corner-radius variables), build out all remaining pages first, take stock of everything that needs changing, then decide whether it’s worth the Figma→Codex→Figma tokens; otherwise fix small items in Claude. (1:20:53)
  25. Use ChatGPT GPT-5.5 for alternate design options — drag a screenshot into ChatGPT and ask it to “generate alternate options of a screen like this”; download a result, then have Claude code “tweak the design to match” so it isn’t a one-to-one copy. (1:22:52)
  26. When pushing to Figma, reference the design-system rules — prompt “push this to Figma, remember to follow the design system and reference the type styles, variables, and components rules”; Claude fixed the rounded corner to the correct button radius when it reached Figma. (1:25:19)

Tools & Skills Mentioned

  • Claude / Claude code — best-in-class design output out of the box; more accurate with Figma attributes (auto-layout, fill/hug); the better coder; preferred by developers. (7:43, 8:34)
  • Codex (OpenAI) — OpenAI’s answer to Claude code; uses ~3-4x fewer tokens and is faster; weaker out-of-the-box design and less accurate with Figma attributes; good for iteration/refinement. (7:39)
  • Google Stitch — free, fast mid-fi wireframing; best for mobile; hit-or-miss quality; cannot be trained on your design system yet; ideal for early concept iteration and stakeholder alignment. (16:31)
  • Claude Design — high-fi, senior-level design; asks clarifying questions; slow and credit-limited; good for polished first drafts, not iteration. (23:30)
  • Figma — the hub for push/pull iteration between AI tools; MCP + skills enable AI access and usage. (33:57)
  • Figma MCP — gives AI read/understanding access to your actual Figma design files. (9:27)
  • Figma skills (Figma community) — teach AI how to use Figma (apply variables, use components, navigate canvas). (9:27)
    • “Figma use” skill (Figma MCP server guide, required) (10:47)
    • “Supply design system” skill (11:25)
    • “Audit design system” skill (11:53)
  • Custom Claude/Codex skills — reusable markdown knowledge packs for variables, type styles, and components that keep AI on-brand. (58:35, 1:01:24)
  • Mobbin — massive repository of real app screens/flows; screenshots + Figma plugin for inspiration; 20% off annual plan via link. (1:16:03)
  • ChatGPT GPT-5.5 — image generation of alternate designs from a prompt/screenshot; included in the ChatGPT plan. (1:22:52)
  • UI Collective Academy — courses on AI, design systems; community forum. (0:22)

Quotes Worth Keeping

  • “AI is not a tool. AI is a workflow.” (0:53)
  • “Now, it’s about how we’re using multiple tools to make ourselves a little bit more efficient.” (1:38)
  • “We need to generate multiple iterations across tools, because the output that you might get from something like Claude is going to be different than the output that you might get from Codex, which is going to be different than something that you might get from Google Stitch.” (3:27)
  • “Despite the fact that their stock price is down like 85 plus percent of all time, it’s not finished… But they’ve fallen behind in the AI space. Figma’s AI is incredibly underwhelming.” (5:59)
  • “Codex uses about three to four times fewer tokens for the same work as Claude.” (8:02)
  • “Claude is more accurate with using Figma attributes when pushed to Figma… it’s generally a little bit better about using auto layout, using the responsiveness properties like fill, hug, than Codex.” (8:34)
  • “Figma MCP is about giving AI access to your actual design files… But Figma skills are more on teaching the AI how to use Figma.” (9:27)
  • “Stitch is basically free to spin up a bunch of different variations… to chat with internal stakeholders.” (22:05)
  • “What you’re doing is you’re using Stitch to inform your prompt for Claude design… your goal is just to reduce the number of edits you need in Claude design. The closer you can get to it first try, the better.” (28:35)
  • “This is one of those scenarios where just because AI can do it doesn’t mean you should use AI to do it.” (49:16)
  • “You’re going to spend more time trying to figure out what it is that AI gave you than it would be to learn how to build your variable library properly.” (49:59)
  • “It is my honest opinion that AI should be used for more complex layouts and modules and dialogues and things like that that actually take a lot of time to build.” (54:18)
  • “Don’t rely on AI to build your simple components. It’s a waste of tokens, it’s a waste of time.” (57:21)
  • “AI doesn’t automatically know the usability guidelines, the accessibility guidelines for everything that we’re spinning up. We still need to dialogue with the AI in order to get the specific outputs that we’re looking for.” (4:36)
  • “AI always works better from visuals.” (1:15:09)

Graph View

Backlinks