/figma-prep

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

How to install

Click Download skill above, double-click the file to unzip it, then ask Claude Code to install the folder for you. The full step-by-step is on the Skills page.