Get Design
Turn selected frames into a ready-to-use design.md + SKILL.md for AI coding tools.
Plugin Preview
About this plugin
Get design.md reads the frames you select and turns them into two ready-to-use Markdown documents you can hand to AI coding tools (Claude, Cursor, Copilot…) or teammates:• design.md — human-readable design guidelines with a machine-readable YAML front matter (colors, typography, rounded, spacing tokens).• SKILL.md — an AI-agent-optimized spec (mission, style foundations, rules, quality gates).How it works1. Select one or more frames on the canvas.2. Click “Extract Design”.3. Preview, edit if you want, and copy the output.What it extracts• Colors (with hex, usage frequency and linked styles/variables)• Typography / type scale (family, weight, size, line-height, tracking)• Spacing and corner-radius scales• Effects / elevation (shadows, blur)• Auto-layout patterns• Components and buttons• Local styles and variables actually used by your selection
Plugin Details
| Version | 2 |
|---|---|
| Created | July 2, 2026 |
| Last Updated | July 2, 2026 |
| Category | Software development |
| Creator | Sujeito programador |
| Stats | 41 installs, 9 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Network Access:
Optional AI enhancement sends the selected frames' text and design summary to the OpenAI API, using an API key the user stores locally.
- Editor Types:figma
- Allowed Domains:
- https://api.openai.com
More Like This
Discover other plugins in the Software development category.
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code