figma-to-design-mdlisted
Install: claude install-skill lukedj78/dev-flow
# Figma → DESIGN.md
Generate a `DESIGN.md` file that conforms to the **Google design.md spec** (open format for portable design systems across AI agents — see `references/spec.md`). The source of truth is a Figma file the user points to via URL.
## Dev-flow contract
This skill participates in the **dev-flow** workflow. When invoked on a project that has a `.workflow/` folder at its root:
- **Output** goes into `<root>/.workflow/`:
- `DESIGN.md` (the main artifact)
- `screenshots/` (any HD frame captures used during extraction — saved with slugged page names like `home-hero.png`, `type-system.png`)
- **State** is updated by setting `meta.json#phase = "design_extracted"` (only if the current phase is earlier in the enum), refreshing `updated_at`, and appending an entry to `meta.json#history` with skill name, inputs (figma URL, path used: MCP/REST/manual), and outputs.
- **Standalone mode** (no `.workflow/` present) is still supported — fall back to the original behavior of writing `DESIGN.md` at the user-specified project root.
The canonical contract spec is in `references/contracts.md`. Read it if any rule above is unclear.
## When this skill applies
Trigger on any of:
- A Figma URL pasted by the user (`figma.com/file/...`, `figma.com/design/...`, `figma.com/proto/...`, `figma.com/board/...`).
- An explicit request: "crea/genera il DESIGN.md", "estrai il design system", "build a DESIGN.md from this Figma", etc.
- Both combined.
If only a URL is pasted with no instr