MMCPMarkets
BD

bergside/design-md-figma

写作

本页由 AI 翻译，技术细节请以原文为准。 查看原文

156 stars 质量 63 趋势 21MIT
Repository Install

bergside/design-md-figma 是从 https://github.com/bergside/design-md-figma. 导入的特工技能候选

概览

bergside/design-md-figma 是从 https://github.com/bergside/design-md-figma. 导入的特工技能候选

概述（AI 翻译）

该 Figma 插件从当前文件中提取本地样式和系统信号，生成可编辑的 DESIGN.md 和 SKILL.md 输出，您可以使用如 Google Stitch、Claude Code、Codex 等工具构建具有一致设计-系统蓝图的接口。生成的文件基于开源的 TypeUI DESIGN.md 格式。

开始

在Figma Desktop中加载插件：

  1. 安装依赖：

  2. 构建插件：

  3. 在Figma Desktop中：

  • 打开 插件 -> 开发 -> 从manifest导入插件…
  • 从该项目中选择 manifest.json
  • 运行 Design MD 技能生成器

策划设计技能

请访问 typeui.sh/design-skills 查看策展设计系统。

可用动作

动作 描述
自动提取 从活跃的 Figma 文件中读取本地样式和变量（颜色、排版、间距、半径、效果、网格、组件族）。
生成 DESIGN.md 从提取的文件信号生成可编辑的设计指导标记。
生成 SKILL.md 从提取的文件信号生成可编辑的代理准备标记。
切换视图 在DESIGN.md和“技能”之间切换。

本页由 AI 翻译，技术细节请以原文为准。

README

以下为原文 README 节选，完整内容请查看原文。

DESIGN.md generator for Figma - TypeUI

This Figma plugin extracts local styles and system signals from the current file and generates editable DESIGN.md and SKILL.md outputs that you can use with tools such as Google Stitch, Claude Code, Codex, and others to build interfaces with a consistent design-system blueprint. The generated files are based on the open-source TypeUI DESIGN.md format.

Getting started

Load the plugin in Figma Desktop:

  1. Install dependencies:

    npm install

  2. Build the plugin:

    npm run build

  3. In Figma Desktop:

    • Open Plugins -> Development -> Import plugin from manifest…
    • Select manifest.json from this project
    • Run Design MD Skill Generator

Curated design skills

Check out curated design systems at typeui.sh/design-skills.

Available actions

Action Description
Auto-extract Reads local styles and variables from the active Figma file (colors, typography, spacing, radius, effects, grids, component families).
Generate DESIGN.md Produces editable design-guideline markdown from extracted file signals.
Generate SKILL.md Produces editable agent-ready markdown from extracted file signals.
Toggle view Switches between DESIGN.md and SKILL.md in a single editor panel.
Refresh Re-runs extraction for the current Figma file state.
Download Saves generated output as DESIGN.md or SKILL.md.

Generated file structure

The plugin generates two markdown files with consistent structure.

DESIGN.md

Section What it does
Source Captures file/page origin and extraction timestamp.
Variable Collections Lists local Figma variable collections used for tokens.
Color Tokens Lists extracted paint styles and color variables.
Typography Tokens Lists extracted text styles and type scales.
Spacing / Radius / Motion Tokens Lists layout and motion-related token signals.
Effect Styles Lists shadows, blur, and effect style signals.
Grid Styles Lists extracted layout grid definitions.
Component Families Lists discovered component-set family names.

SKILL.md

Section What it does
Mission Defines the design-system objective for the extracted Figma file.
Brand Captures product/brand context, audience, and product surface.
Style Foundations Lists inferred visual tokens and foundations.
Accessibility Applies WCAG 2.2 AA requirements and interaction constraints.
Writing Tone Sets guidance tone for implementation-ready output.
Rules: Do Lists required implementation practices.
在 GitHub 查看完整 README

推荐工具

换一个关键词，或者移除筛选条件。

安装

npx skillfish add bergside/design-md-figma
新手？先看 mcpskill.org 教程 →