BD

bergside/design-md-figma

Writing

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る

156 stars 品質 63 トレンド 21MIT

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 ステッチ、Claude コード、Codex などのツールを使用して、一貫性のある設計システム ブループリントでインターフェイスを構築することができます。 生成されたファイルは、オープンソースのTypeUI DESIGN.md形式に基づいています。

はじめる

Figmaデスクトップのプラグインをロードします。

  1. 依存関係を取付けて下さい:

  2. プラグインを作成する:

  3. Figmaのデスクトップで:

  • 開いたプラグイン -> 開発 -> マニフェストからプラグインをインポート…
  • このプロジェクトから[[T2]を選択します
  • 実行 設計MDスキルジェネレータ

キュレーションデザインスキル

typeui.sh/design-skills でキュレーションされたデザインシステムをチェックしてください。

利用可能なアクション

| 行動 | 概要 | | お問い合わせ | | オートエクストラクター | アクティブ・フィグマファイル(カラー、タイポグラフィ、間隔、半径、エフェクト、グリッド、コンポーネントファミリー)からローカルスタイルと変数を読みます。 お問い合わせ | [DESIGN.mdを生成します | 抽出されたファイル信号から編集可能な設計ガイドラインのマークダウンを生成します | | [SKILL.mdの生成 | 抽出されたファイル信号から編集可能なエージェント・レディ・マークダウンを生成します。 お問い合わせ | トグルビュー | [[T5]と「SKILL」の切り替え.

このページは 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
MCP 初心者?mcpskill.org のガイドから始めましょう →