SkillFoxx

Type a name, a task or a service

DESIGN.md generator for Figma

A TypeUI Figma plugin that reads a file's styles and generates DESIGN.md and SKILL.md for Claude Code, Codex and Cursor

PluginLow risk

bergside/design-md-figmaAuthor: Bergside

Install

npm install
npm run build

Build from source. Then in Figma Desktop: Plugins, Development, Import plugin from manifest and pick manifest.json.

This is third-party code. Review the repository files before installing.

What it does

The plugin reads local styles and variables from the open Figma file: colors, typography, spacing, radii, effects, grids and component families. From them it builds a DESIGN.md with all tokens and a SKILL.md with agent rules: style foundations, WCAG 2.2 AA accessibility, dos and don'ts, component state requirements and quality gates. Both files can be edited in the plugin window and downloaded. The format follows the open TypeUI DESIGN.md spec.

Who it is for. For designers and frontend developers who want the agent to build UI within a Figma design system.

Good fit when

  • You need to hand the agent tokens and design system rules from Figma
  • The agent builds UI that drifts from the designs in colors and fonts
  • You need a starter DESIGN.md for a new project

Not a fit when

  • The Figma file has no local styles or variables
  • Tokens are already exported from code or a separate package

Example request

Build the pricing page following the rules in DESIGN.md and SKILL.md at the project root

Limitations

Runs in Figma Desktop; loading from source requires Node.js and a build. Output quality depends on how well the file's styles are organized. The generated SKILL.md should be reviewed and edited by hand.

How to disable. Remove the plugin from your Figma plugins. Delete generated files from the project manually.

Security check

  • The plugin only reads Figma file styles and generates text

README in short

The README explains the plugin's purpose and shows loading it in Figma Desktop: install dependencies, build and import manifest.json. Tables describe the available actions and the sections of both generated files. The plugin is also published in the Figma Community; MIT licensed.

FAQ

How does DESIGN.md differ from SKILL.md?

DESIGN.md lists tokens from the file, while SKILL.md turns them into rules and a workflow for the agent.

Editors’ pick

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginMedium risk142.3K
Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium risk123.8K
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk68.1K
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.2K