
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 등과 같은 도구를 사용하여 일관된 디자인 시스템 청사진과 인터페이스를 구축 할 수 있습니다. 생성된 파일은 open-source TypeUI DESIGN.md 형식을 기반으로 합니다.
시작하기
Figma 데스크탑에서 플러그인을 로드:
-
의존성 설치:
-
플러그인 구축:
-
Figma 데스크탑에서:
- 오픈 플러그인 -> 개발 -> 가져 오기 플러그인 …
- 이 프로젝트에서
manifest.json을 선택하세요 - Run **Design MD Skill Generator **
Curated 디자인 기술
typeui.sh/design-skills에서 curated 디자인 시스템을 확인하십시오.
사용 가능한 작업
| 행동 | 묘사 |
인포메이션
| Auto-extract | 활성 Figma 파일(컬러, 타이그래피, 간격, 반경, 효과, 격자, 구성 요소 제품군)의 로컬 스타일과 변수를 읽습니다. ·
| 생성 DESIGN.md | 추출된 파일 신호에서 편집 가능한 디자인 가이드라인 마크다운 제작. |
| 생성 SKILL.md | 추출된 파일 신호에서 편집 가능한 Agent-ready Markdown 제작 ·
| 토글보기 | [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:
-
Install dependencies:
npm install -
Build the plugin:
npm run build -
In Figma Desktop:
- Open Plugins -> Development -> Import plugin from manifest…
- Select
manifest.jsonfrom 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. |
추천 도구
다른 키워드를 입력하거나 필터를 제거해 보세요.
설치
npx skillfish add bergside/design-md-figma