Web Design APIs: Figma and quality tools
Skill packs and prompts are provided in English so they work best with the AI tools. Use them as-is.
This lesson applies the general lesson "APIs & MCP — getting the most out of Claude" to web design. The centerpiece is Figma, which has an official MCP and works in both directions — design to code and code to design — completed by two fronts that need no API at all: accessibility/performance audits and serious color and typography work.
What you'll get: Figma connected and working in both directions (design-to-code and code-to-design), WCAG 2.2 AA and Core Web Vitals audits with local tools, and the prompting habit that separates a mediocre result from a professional one: ask for the reasoning and iterate.
Part 1 — Figma: the central connector of this area
Figma has an official MCP and is, by far, the most powerful connection for a web designer working with Claude — it works in both directions: Figma to code, and code to Figma.
How to connect it
- Settings → Connectors in Claude, find Figma, authorize your account.
- The first time you use a design action, Claude automatically loads the matching skill before doing anything — you don't need to invoke it yourself, but you do need the Figma file open or its link handy.
The 4 capabilities
Figma to code
Pass it a component's link and Claude implements it as real code, respecting the file's color and spacing tokens.
Code to Figma
Takes a page you've already built and pushes it into Figma as an editable file, so the design team can iterate without touching code.
Design system
Reads a Figma file's component library and generates the design tokens in standard format, ready to use in your stack.
Diagrams
Turns a user flow you describe in words into a FigJam diagram.
The example prompts, ready to copy
Figma to code (design-to-code):
Here's the link to this component in Figma. Implement it as a React component with Tailwind, respecting exactly the file's color and spacing tokens.
Code to Figma (code-to-design):
Take this page we already built in Next.js and push it into Figma as an editable file, so the design team can iterate on it without touching code.
Design system:
Read this Figma file's component library and generate the design tokens in W3C format (color, typography, spacing) ready to use in Tailwind.
Diagrams (FigJam):
Turn this user flow I'm describing into a FigJam diagram.
The real weak spot of this area (be honest with your students). Fully automatic design-system generation and high-fidelity Figma-to-code still have rough edges — not everything comes out perfect on the first try. Teach them to iterate: first pass with the MCP, then human review, then adjust. Don't sell it as 100% automatic magic.
Part 2 — Accessibility (WCAG) and performance
These two don't depend on an account or API key — they run as local tools Claude invokes directly (Lighthouse for performance, contrast/ARIA audits for WCAG 2.2 AA accessibility).
Example prompt (accessibility):
Audit this page against WCAG 2.2 level AA. Give me every violation with its severity, the exact element, and the specific fix — no generic advice.
Example prompt (performance):
Run a Core Web Vitals analysis on this page. If something's wrong, tell me the root cause (not just the symptom) and the highest-impact fix first.
Part 3 — Color and typography
For serious color-theory work (color spaces, APCA vs WCAG contrast, palette generation), you don't need any API — it's knowledge Claude applies directly. What's worth teaching is to ask for the reasoning, not just the result:
Give me a 5-color palette for a [sector] brand, with the accent color meeting AA for text on white and on the dark background. Explain the why of each choice, not just the hex codes.
Rule for this lesson. Unlike Legal and Marketing, in Web Design most of the value doesn't come from "connecting one more API" but from how you structure the prompt — ask for the reasoning, iterate, and never accept the first result as final in design systems or Figma-to-code conversion.
10-minute practice. Connect Figma (Settings → Connectors), open one of your real files and run the design-to-code prompt on a small component (a button or a card). Compare the generated code against the original file — color tokens, spacing — and ask for one concrete adjustment in a second pass. That iteration is exactly the habit this lesson is here to build.