Train Claude on Tokens & Components for On-Brand AI UI
Prep Figma design tokens with descriptions, build Claude skills for tokens/components, attach Mobbin screenshots, generate HTML locally then push to Figma for production-ready designs matching your system.
Prep Tokens and Components to Guide AI Precisely
Create a Figma template listing each design token's name, light mode value, dark mode value, and a one-line description of usage scenarios—this prevents AI misapplication from vague variable names alone. Copy the frame link and prompt Claude: "Review all design tokens and Figma variables in the linked frame. Master when each should be used, then build a Claude skill enforcing their application in designs."
Claude generates a skill detailing rules like "Use surface/page for main backgrounds; avoid on interactive elements" and captures text styles automatically. Save it for reuse.
For components, group them logically in Figma (e.g., form elements, navigation, data display) to organize AI's understanding—Figma Skills often miss full component breadth otherwise. Copy the design system link and prompt: "Review all components in form elements, navigation, and data display groupings, including variants/properties. Build a Claude skill on when to use each." Results include reference docs per group with do/don't rules; for complex systems, create separate skills per grouping to keep them lightweight. Review rules manually before saving.
This training ensures AI adheres to your system closer than generic Figma Skills, reducing drift like incorrect variables or missed components.
Use Mobbin Screenshots to Set Style Direction
Vague prompts like "build a paywall modal" yield poor results—feed 2-3 similar screenshots from Mobbin (e.g., gray-white paywalls from Manis, Informed News, Rocket Money) to anchor style and layout. Mobbin's repository lets you filter by app (e.g., Airbnb), flow (e.g., signup), or similarity, providing targeted inspiration without overwhelming AI.
Install Figma Skills in Claude: Download Figma Use Skill ZIP as a plugin and Apply Design System skill.md. Attach screenshots, link your design system file, and prompt with active skills: "Using attached example designs, design tokens skill, and design system components skill, build an HTML paywall for a finance app. We'll push to Figma in this file later—design locally first."
Iterate HTML Locally Before Figma Push for Efficiency
Claude outputs on-brand HTML using your tokens/components and mimicking examples (e.g., similar treatments, correct buttons/close icons). Tweak iteratively in Claude Code (faster than Figma roundtrips), like removing off-brand icons.
Once satisfied, prompt: "Push to Figma using all components, variables, and styles." Output checks out: responsive, correct surface/page variables, button/close/badge components, text styles/variables mostly applied. Complex areas may miss minor styles, but variables hit reliably—far better than un-trained Figma Skills. Manually fix drift post-import; simpler designs succeed more consistently.