Figma design.example

Skill Mfrostbutter/skill-forge/examples/figma-design.example

Turn complex AI workflows into reusable Claude skills. Capture the lessons to a tagged journal that survives context resets, then crystallize it into a validated skill.

Install

npx -y skills add Mfrostbutter/skill-forge --skill figma-design.example

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Design, build, or edit a Figma file through a design connector (plugin-API calls verified with screenshots). Use whenever the task is to create or change a Figma design, mock up a UI, logo, infographic, or design system, build styles or components, or hand a design to dev. Triggers even if the user does not name Figma but asks to "mock up", "design a screen", or "build a component library". Encodes the hard rule that page structure and layer naming come before any frame.

SKILL.md

3.1 KB, as published. Nobody here has run it

Figma design + build

This is a worked example of a skill produced by skill-forge from examples/WORKLOG.example.md. It shows how tagged journal entries become a procedure, guardrails, and reference notes. The design tool runs JavaScript against the plugin API and renders server-side; drive it like a headless design tool and verify every step with a screenshot.

Procedure (ordered, do not reorder)

Establish page structure and a layer-naming convention before creating any frame. This is step 1, always. Frames-first produces ungrouped, default-named layers (Rectangle, Text) that are unusable for dev handoff and painful to fix after. Decide pages and naming first.
Confirm the account and plan. Edits fail silently on a view-only account.
Foundations first. Create paint, text, and effect styles (guard by name to avoid duplicates) before drawing any UI. This locks the palette and type ramp and makes every later node bindable.
Discover and load fonts up front. List available fonts filtered to your candidates, record exact style names (they vary: Semi Bold vs SemiBold), then load every weight before setting any text.
Build named, bound, and grouped as you go. Name every node on creation, bind to styles from the first draw, build each section inside a named container. Draw backgrounds before text.
Screenshot loop. Build a small piece, screenshot the real node, read it, fix, repeat. Never author a large design blind.
Componentize. Promote repeated UI to components; group variants. Name components with / folders (Logo/Mark, Button/Primary).

Hard rules (guardrails)

Bind nodes to styles from the first draw, never restyle after. Restyling a built screen by hand drifts from the system and wastes a pass.
Await the page switch before reading a page's children. Otherwise it returns an empty list.
Do not author blind. Hand-authoring without rendering ships ugly. The screenshot loop is the work.
Default node names are not acceptable. Text = its content, rects = their role (bg, divider, card).

Environment notes (compatibility)

Fonts render server-side from the design tool's built-in library. Locally installed fonts are invisible to the cloud connector even when the user has them. If a brand font is absent, mock with the closest twin and ship the real font in production.
Z-order is append order. Later-appended siblings render on top; draw backgrounds before text.
Rectangles cannot have children. Use frames or groups as containers.

Reference

references/conventions.md - naming scheme, page-per-purpose, component folders, cleanup discipline.