SkillsMay 13, 2026·2 min read

design-md-figma — Generate DESIGN.md from Figma Styles

design-md-figma is a Figma plugin that extracts local styles and generates editable DESIGN.md/SKILL.md so agents build UIs consistently.

Skill Factory
Skill Factory · Community
Agent ready

This asset can be read and installed directly by agents

TokRepo exposes a universal CLI command, install contract, metadata JSON, adapter-aware plan, and raw content links so agents can judge fit, risk, and next actions.

Native · 98/100Policy: allow
Agent surface
Any MCP/CLI agent
Kind
Skill
Install
Single
Trust
Trust: Established
Entrypoint
Asset
Universal CLI install command
npx tokrepo install 1dc5c57f-0978-54c8-b3ae-7a9d48f86d8b
install contractmetadata JSONadapter planraw content
Intro

design-md-figma is a Figma plugin that extracts local styles and generates editable DESIGN.md/SKILL.md so agents build UIs consistently.

Best for: Teams using AI coding tools who want design-system consistency from Figma

Works with: Figma Desktop, Node.js, TypeUI DESIGN.md format, Claude Code/Codex/Stitch

Setup time: 8-20 minutes

Key facts (verified)

  • GitHub: 82 stars · 15 forks · pushed 2026-04-27.
  • License: MIT · owner avatar + repo URL verified via GitHub API.
  • README-verified entrypoint: `npm install ````.

Main

  • Use it to export a stable design contract: generate DESIGN.md for tokens (colors/typography/spacing) and SKILL.md for agent constraints.

  • Run it on the same Figma file your team actually designs in so extracted variables/styles match reality, not a theoretical system.

  • Treat the generated markdown as versioned artifacts: commit them to your repo so agents and humans share the same source of truth.

Source-backed notes

  • README says the plugin extracts local styles/variables from the active Figma file and generates editable DESIGN.md and SKILL.md outputs.
  • README’s getting started flow builds the plugin with npm install + npm run build, then imports manifest.json in Figma Desktop.
  • README lists supported actions including auto-extract, toggling views, refresh, and downloading outputs.

FAQ

  • Is it a published Figma Community plugin?: README documents a local dev install via manifest import; follow upstream for distribution status.
  • What should I commit to git?: Commit the generated DESIGN.md/SKILL.md so UI changes can be reviewed like code.
  • Does it replace a design system?: No — it exports the system signals; you still need your Figma library and review process.
🙏

Source & Thanks

Source: https://github.com/bergside/design-md-figma > License: MIT > GitHub stars: 82 · forks: 15

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Awesome DESIGN.md — UI Specs for Coding Agents

Awesome DESIGN.md is a curated set of design-system docs; copy one into your repo so coding agents generate UI that matches a real style.

Skills
AI Open Source

robotics-agent-skills — ROS/Testing/Safety SKILL.md Pack

robotics-agent-skills is a curated SKILL.md library for robotics agents; verified 197★ and includes ROS1/ROS2, bringup, testing, and security skills.

Skills
Skill Factory

ClaudeForge — Auto-Generate CLAUDE.md for Any Project

Generate and maintain CLAUDE.md files automatically. Scans your codebase, scores existing docs, and creates context-specific instruction files for Claude Code. MIT, 340+ stars.

Skills
Script Depot

OOP Architect — Self-Updating UML in CLAUDE.md

Generate and maintain Mermaid UML diagrams inside CLAUDE.md as you code; verified 105★ and installs as a Claude Code skill via marketplace or git clone.

Skills
Skill Factory
◈Home🔍Search👤Me