vagejs
GitHub Get started

How to turn a Figma design into a website with AI
Your design, built by your AI assistant, checked by vagejs.

To turn a Figma design into a vagejs website, connect your AI assistant to Figma, paste a link to the frame you want, and ask for plain HTML and CSS split into a layout, a stylesheet and Markdown pages. Then run vage check and vage audit, look at the page next to the design, and ask for a second pass on what doesn't match.

Updated

vagejs doesn't import Figma files itself. Your assistant reads the design through Figma's own connection for AI tools (its MCP server), and vagejs keeps the result fast, accessible and easy to edit. We tested every step below on a real design: a long content page from a free Figma Community kit, with a cover, seven sections of text and twelve images.

What you need

  • A vagejs site. Start one with npm create vagejs@latest my-site.
  • An AI assistant that can use MCP servers. This guide uses Claude Code; Figma's own setup docs cover other assistants too.
  • A Figma account. The free plan allows 20 calls to Figma's MCP server a month, which is enough for a page or two. A paid Dev or Full seat allows far more.
  • Figma's editor needs WebGL. If files bounce you back to the file list, turn on "Use graphics acceleration when available" in Chrome's settings and relaunch.

1. Connect your assistant to Figma

In a terminal, add Figma's MCP server to Claude Code for all your projects:

terminal
claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp

Then start claude, type /mcp, choose figma and approve access in the browser. claude mcp get figma should now say Connected.

Open the design in Figma, right-click the frame you want as a page and choose Copy link to selection. Link the frame itself, not the whole section around it: when we linked a section, Figma first sent back only an outline, and the assistant needed an extra call per frame.

3. Ask for the page

Open your assistant in the site's folder and paste this prompt, with your link:

Build this Figma design as a page of this vagejs site: FIGMA LINK

Read AGENTS.md first and follow it. Use the Figma MCP tools (get a screenshot and the design context of that frame). Ask Figma for plain HTML and CSS, not React or Tailwind. My Figma plan has few calls, so make as few Figma calls as you can.

- Put the look (page structure, sections) in a layout in src/layouts/ and the colors, fonts and spacing in public/styles.css, taken from the design's colors and text styles.
- Put all the words in the Markdown page, so they can be edited without touching code. Use the design's text exactly; don't invent any.
- Save the images to public/images/ with alt text that describes them.
- Keep it static: no client-side JavaScript.
- Run npx vage check and npx vage audit, and fix everything they report.
- At the end, list what you couldn't match from the design and why.

Asking for plain HTML and CSS matters: by default, Figma hands assistants React with Tailwind, which a vagejs layout doesn't use.

In our test this took 3 Figma calls and about seven minutes. The words, sections, colors and text sizes matched the design, every image had alt text, and the page shipped no JavaScript.

4. Look at it, then ask for a second pass

Run npm run dev and put the page next to the design. In our test, four of the seven section images didn't show: the assistant had written a separate crop for each image in CSS, and the crops hid them. The images also weighed 8 MB against a 500 KB page budget, which vage audit reported.

One follow-up prompt fixed both, with no new Figma calls:

Look at the built page next to the design screenshot you already have. The images in the SECTION NAMES sections don't show. Fix that with simple CSS: show each image whole, fitted to its card. Don't make new Figma calls. Then make the images light enough for the page budget: install sharp as a dev dependency and turn on images: { optimize: true } in vage.config.ts. Run npx vage build and npx vage audit again and tell me what's left.

With images: { optimize: true }, vagejs writes small WebP copies of the images in your pages at several widths. In our test the page's images went from 8 MB to 911 KB in about two minutes. The rest was one background image set in CSS, which the optimizer doesn't touch; converting it to WebP is a one-line job for your assistant.

Two things are deliberately left to you:

  • Links to other sites. vagejs fails vage check on links to domains you haven't approved, so a design can't sneak in links you didn't choose. Run npx vage links to see them, then npx vage links approve DOMAIN for each one you want to keep.
  • Fonts. The assistant names the design's fonts in the CSS but doesn't load them from another site. To get the exact look, download the font files into public/fonts/ (check their license) and ask your assistant to add them with @font-face. Until then, visitors see a similar system font.

What to expect

  • What came across well: layout, wording, colors, text sizes, spacing, images and alt text.
  • What needed a person: checking the page against the design, the second prompt for images and weight, approving links, and the fonts.
  • What changes: a design is a fixed picture at one width, such as 1,440 pixels, and a website has to fit every screen. Expect the assistant to decide how sections stack on a phone, and check it on a small screen.

The tidier the Figma file, the better the result. Named layers, auto layout and defined color and text styles give the assistant real values instead of guesses.

Start with one command.
You'll have a site running in a minute.

npm create vagejs@latest my-site

Read the docsUse it with your AI assistant