MMCPMarkets
BD

bergside/design-md-figma

Writing

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

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.

Обзор (машинный перевод)

Этот плагин Figma извлекает локальные стили и системные сигналы из текущего файла и генерирует редактируемые выходы DESIGN.md и SKILL.md, которые вы можете использовать с такими инструментами, как Google Stitch, Claude Code, Codex и другими, для создания интерфейсов с согласованным планом системы проектирования. Созданные файлы основаны на формате TypeUI DESIGN.md с открытым исходным кодом.

Начало работы

Загрузите плагин в Figma Desktop:

1.Установить зависимости:

  1. Создайте плагин:

3.В Figma Desktop:

  • Открыть ** Плагины -> Развитие -> Импорт плагина из манифеста…** Выберите manifest.json из этого проекта
  • Запуск Проект MD Skill Generator

Дизайнерские навыки

Ознакомьтесь с проверенными системами проектирования на typeui.sh/design-skills.

##Доступные действия

Оригинальное название: Action | Description [править править код] Считывает локальные стили и переменные из активного файла Figma (цвета, типографика, расстояние, радиус, эффекты, сетки, семейства компонентов). ! | Генерировать DESIGN.md | Производит редактируемую разметку из извлеченных файловых сигналов. | Генерировать SKILL.md | Производит редактируемую разметку агента из извлеченных файловых сигналов. ! [править] [править] [править] [править] [править].

Эта страница переведена автоматически. Технические детали смотрите в оригинале.

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.
Открыть полный README на GitHub

Рекомендуемые инструменты

Попробуйте другой запрос или уберите фильтр.

Установка

npx skillfish add bergside/design-md-figma
Новичок в MCP? Начните с руководства на mcpskill.org →