Figma Prep
← All skills
Design · Runs in Claude Code

/figma-prep

Prepares an HTML or CSS layout so it ports into Figma cleanly.

/figma-prep Download skill Updated yesterday

What it does

Before a built web page or layout is rebuilt in Figma, this reads the design and works out everything Figma needs: the colours, the type sizes, the spacing, and which fonts to use. It writes that out as a prep document so the Figma build goes in clean rather than guessed.

When you'd reach for it

  • An HTML or CSS layout needs rebuilding in Figma
  • You want a code-built design ported across without the styling drifting
  • Run it at the start of any build-to-Figma job

What you get back

  • A prep document listing the colours, type, and spacing for the build
  • Fewer surprises when the layout lands in Figma
Department Design
Runs in Claude Code
Command /figma-prep
Last updated yesterday