LibreAI / デザイン / design-md-figma
// design · bergside/design-md-figma

design-md-figma

design-md-figmaは、bergsideが公開しているオープンソースのデザインプロジェクトです(GitHub: bergside/design-md-figma)。GitHubスターは153、フォークは20で、MITライセンスの下で公開されています。GitHubでの最終更新は2026年5月25日です。

Figma plugin that turns your style guide into DESIGN.md and SKILL.md for AI

💎 隠れた名作★ 153 スター⑂ 20 フォークMIT更新 2026年5月
▦ ビジュアル — このプロジェクトのREADMEには埋め込み可能なスクリーンショットがないため、
ここではプレースホルダーを表示しています。下のガイド自体は完全な内容です。
// プロジェクトの基本情報

プロジェクト基本情報

GitHubスター
153
フォーク
20
ライセンス
MIT
GitHubでの最終更新
2026年5月25日
カテゴリ
デザイン
掲載タイプ
隠れた名作 — あまり知られていないプロジェクトのための短めのページ
公式サイト
Official site
// 仕組み

仕組み

  1. Install the plugin

    Add it from the Figma community page.

  2. Open your file

    Load the design with your styles.

  3. Extract guidelines

    The plugin reads local styles.

  4. Export files

    Get DESIGN.md and SKILL.md for your AI.

// 機能

選ばれる理由

Figma native

Runs inside your design file.

Style extraction

Reads colors, type and components.

DESIGN.md output

Design rules as a markdown file.

SKILL.md output

Agent-ready skill files.

AI-tool ready

For Claude Code, Codex, Cursor.

MIT licensed

Free for commercial use with attribution.

Advertisement
// 自分で実行

自分で実行してみる

  1. Step 1 — Clone the repo

    Download the source and move into the project folder.

    git clone https://github.com/bergside/design-md-figma.git
    cd design-md-figma
  2. Step 2 — Check the README

    Every project documents its own setup; start with install requirements.

    cat README.md | head -60
  3. Step 3 — Run it

    Follow the project's launch command — Docker, pip, npm, or a binary release.

    # see README for the exact launch command
// 活用例

作れるもの

Advertisement
// よくある質問

よくある質問

Who maintains design-md-figma?

It is an open-source project at bergside/design-md-figma with 162 forks. Check the repo's contributors and recent commits to see how active maintenance is.

Is it free for commercial use?

MIT licensed — commercial use allowed with attribution.

Which AI tools accept the output?

Claude Code, Codex, Cursor and other AI tools.

What gets extracted?

Local style guidelines — colors, typography, components.

DESIGN.md vs SKILL.md?

One documents the design; the other packages it as an agent skill.

// さらに探索

似ているツール

デザイン

Screenshot To Code

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

★ 80.0k スターMIT
ガイドを見る →
デザイン

Penpot

Penpot: The open-source design platform for Product teams that need scalable collaboration

★ 60.6k スターMPL-2.0
ガイドを見る →
デザイン

Onlook

The Developer Tool for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your code with AI • World's…

★ 26.9k スターApache-2.0
ガイドを見る →
デザイン

wibi-style

36 installable visual-design skills for Codex — turn photos into artwork

★ 162 スターCustom
ガイドを見る →
デザイン

figma-console-mcp

Your design system as an API — an MCP server that connects AI to Figma for extraction, creation and debugging

★ 2.5k スターMIT
ガイドを見る →
デザイン

archify

Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill

★ 79.8k スターMIT
ガイドを見る →
// 代替候補

代替候補: デザイン

LibreAIカタログに掲載されたデザインプロジェクトの中で最もスターの多いもの — design-md-figmaが合わなかった場合に検討したい、現実的な候補リストです。

// さらに見る design

さらに見る: デザイン

カタログの中でdesign-md-figmaとスター数が近いデザインプロジェクト — 前後の棚もそのまま見て回れます。

design-md-figmaを入手する

無料でオープン — ソースコードを入手して、リポジトリにスターを付け、作り始めましょう。