Peeradonte48

Figma Wireflow Connect Skill — Design skill for Claude Code

Design community

Claude Code agent skill that connects Figma screen frames with real Connectors in a design file (createConnector is FigJam-only).

How to install Figma Wireflow Connect Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Peeradonte48/figma-wireflow-connect-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Figma Wireflow Connect Skill does

Claude Code agent skill that connects Figma screen frames with real Connectors in a design file (createConnector is FigJam-only). Builds wireflow and user-flow boards that tools can read over the Figma REST API, through the Figma MCP use_figma tool.

Alternatives in Design

Algorithmic Art — Create generative art using p5.js with seeded randomness, flow fields, and particle systems 94.1k ★
Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Scroll Craft — Claude Code skill for premium scroll-driven websites 1k ★

README

figma-wireflow-connect-skill

An agent skill that connects the screen frames of a Figma **design** file with real Connectors, so a wireflow board is not just a picture of arrows but a graph that tools can read over the Figma REST API.

It works with Claude Code (and any agent that loads `SKILL.md` skills) through the official Figma MCP server's `use_figma` tool.

![A real flow board in a Figma design file: a blue "Flow : edit / delete applied promotion" title banner, four white group banners in Thai, and rows of screen frames joined by blue elbowed Connectors](examples/boards/edit-delete-promotion.webp)

*A real board laid out and connected by this skill (screens blurred): one title banner, a group banner per sub-flow, sub-flows laid out in rows, and every arrow a real Connector.*

Why this exists

Three facts about Figma design files that cost real debugging time:

figma.createConnector() only works in FigJam. In a /design/ file it throws.
Arrows drawn by hand are not Connectors. A VECTOR or LINE arrow looks right on the canvas, but a REST reader sees zero edges between the frames.
A design file can still hold Connectors. Paste one from FigJam and it stays a real CONNECTOR node, and clone() works on it.

So the skill finds one existing connector (the donor), clones it once per edge, points each clone at two frames, styles it, and checks the result by geometry and over REST.

What is in this repo

connecting-figma-flow-boards/     the skill: copy this folder into your skills directory
  SKILL.md                          steps, house layout pattern, common mistakes
  clone-connector.js                the use_figma script that clones and re-points the donor
examples/
  01-find-donor.js                  list pages, then find a CONNECTOR to clone
  02-clone-edges-login-flow.js      clone-connector.js filled in for a 4-screen login flow
  03-reset-magnets.js               re-point every connector's sides after moving frames