惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
Secure Thoughts
罗磊的独立博客
T
The Blog of Author Tim Ferriss
人人都是产品经理
人人都是产品经理
博客园 - 叶小钗
Last Week in AI
Last Week in AI
美团技术团队
Google Online Security Blog
Google Online Security Blog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
D
Docker
G
Google Developers Blog
大猫的无限游戏
大猫的无限游戏
酷 壳 – CoolShell
酷 壳 – CoolShell
小众软件
小众软件
月光博客
月光博客
L
LINUX DO - 最新话题
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
W
WeLiveSecurity
H
Heimdal Security Blog
Vercel News
Vercel News
SecWiki News
SecWiki News
Forbes - Security
Forbes - Security
Blog — PlanetScale
Blog — PlanetScale
Google DeepMind News
Google DeepMind News
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
www.infosecurity-magazine.com
www.infosecurity-magazine.com
TaoSecurity Blog
TaoSecurity Blog
T
Troy Hunt's Blog
A
About on SuperTechFans
C
Check Point Blog
S
Security Affairs
Hacker News - Newest:
Hacker News - Newest: "LLM"
AI
AI
WordPress大学
WordPress大学
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Help Net Security
Help Net Security
博客园_首页
The Last Watchdog
The Last Watchdog
S
SegmentFault 最新的问题
Hugging Face - Blog
Hugging Face - Blog
Security Archives - TechRepublic
Security Archives - TechRepublic
Engineering at Meta
Engineering at Meta
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
I
Intezer
K
Kaspersky official blog
M
MIT News - Artificial intelligence
J
Java Code Geeks
G
GRAHAM CLULEY
P
Palo Alto Networks Blog

Open Design Blog

Best AI Design Agents in 2026: An Honest, Tested Guide Best AI Prototyping Tools in 2026: An Honest, Tested Guide Best AI Design Tools in 2026: An Honest, Tested Guide Best Bolt.new Alternatives in 2026: An Honest Comparison Best Design-to-Code Tools in 2026: An Honest, Tested Guide Best Figma Alternatives in 2026: An Honest, Tested Guide How to Use Claude Code for Frontend Design (2026 Guide) Best Lovable Alternatives in 2026: An Honest Comparison Best v0 Alternatives in 2026: An Honest Comparison Open Design is coming to Osaka / Kyoto Open Design 0.12.0: your brand is a design system Vibe Design Tools: An Honest Guide to What Works Vibe Design vs Vibe Coding: Where They Split and Why It Matters Vibe Design with Google Stitch: What It Nails, Where It Traps You What Is Vibe Design? The 2026 Guide to Designing by Intent Open Design 0.11.0: the Bazaar Open Design 0.10.0: the all-in-one design workspace Open Design 0.9.0: design for everyone The open-source alternative to Figma Open Design 0.8.0: everything is a plugin The layout layer the canvas used to hide BYOK reality check: 5 things that break in Open Design today The open-source alternative to Claude Design 31 skills, 72 systems: how the Open Design library works BYOK design workflow: run Claude, Codex, or Qwen on your own key Why we built Open Design as a skill layer, not a product
How to port a Figma workflow into an Open Design plugin
Open Design · 2026-05-18 · via Open Design Blog

The 0.8.0-preview thread asks contributors to port old design workflows one plugin at a time. Here is the concrete path for a Figma export, token sync, or brand kit.

A Figma workflow usually starts as muscle memory: export these frames, sync those tokens, rebuild that deck template, hand the spec to engineering.

The 0.8.0-preview thread makes a sharper ask: port that muscle memory into a plugin. Not a panel bolted onto a canvas. Not a private script only one team can run. A reusable Open Design workflow that an agent can pick up, execute, review, and hand off through the same local-first loop as any other design task.

This is the practical version of the 0.8.0-preview call for plugins. If your team has one repeatable design workflow today, this post shows what it looks like to turn it into a plugin-shaped contribution.

The workflow worth porting is smaller than you think

Do not start with “replace Figma.” Start with one annoying, repeatable job.

Good first plugin candidates:

Current workflowPlugin-shaped version
Export a Figma marketing page and rebuild it in codefigma-migration plugin that extracts layout, maps tokens, and generates a web artifact
Turn a brand kit into launch slides every monthDeck plugin with a SKILL.md, example assets, and a locked design system
Create the same mobile onboarding mockup for every clientMobile-screen plugin with input fields for audience, tone, feature list, and platform
Convert a component spec into Storybook-ready UICode-migration plugin that reads the repo, maps components, and writes a reviewable diff

The unit is not the whole design department. The unit is one workflow someone already repeats twice a week.

That is why Open Design’s skill layer matters. A plugin is not an opaque runtime extension. It is a folder of files: a SKILL.md contract, optional design systems, optional examples, and an open-design.json sidecar that tells Open Design how to display and apply the workflow.

The Open Design angle is portability

The plugin spec states the contract plainly: SKILL.md stays the executable agent contract, while open-design.json adds marketplace metadata, input fields, defaults, previews, and context wiring.

That gives one workflow two lives. In Open Design, it appears as a plugin with a preview, inputs, provenance, and a one-click “use” path. In Claude Code, Cursor, Codex, Gemini CLI, OpenClaw, or another skill catalog, the same folder still works as a plain agent skill because the core behavior lives in Markdown.

The library walkthrough already explains the base primitives: skills, systems, adapters, and the daemon. Plugins add distribution and repeatability around those primitives.

For a Figma-to-code workflow, the surfaces usually look like this:

SurfaceConcrete file
Agent behaviorSKILL.md
Open Design metadataopen-design.json
Brand or visual contractdesign-systems/{brand}/DESIGN.md
Example outputexample.html or examples/{plugin-id}/example.html inside the plugin folder
Preview mediapreview/poster.png or preview/index.html inside the plugin folder

The result is not a screenshot generator. It is a reusable agent workflow with a visible contract.

A concrete porting path

Here is the minimum path for a plugin that ports one Figma landing-page workflow:

  1. Name the repeatable job. Example: “Turn one Figma marketing frame into a responsive Astro page.”
  2. Write the skill contract. Create SKILL.md with the input shape, output path, constraints, and review checklist.
  3. Add the Open Design sidecar. Create open-design.json so the marketplace can show the title, description, required inputs, preview, and source repo.
  4. Attach the design system. If the workflow depends on brand rules, add a DESIGN.md file instead of burying color and typography in prose.
  5. Include one real example. Save a generated artifact under examples/ so reviewers can judge the output, not just the promise.
  6. Validate and pack. Run the plugin commands before opening a PR.

The current CLI path uses a lowercase plugin id. Avoid slash-separated registry names at scaffold time; od plugin scaffold creates <out>/<id>/..., so the follow-up commands point at that generated folder:

od plugin scaffold --id figma-workflow --title "Figma workflow" --out ./plugins/community
od plugin validate ./plugins/community/figma-workflow --no-daemon
od plugin pack ./plugins/community/figma-workflow

When the plugin is ready for registry review, authenticate through GitHub with od plugin login and od plugin whoami --json, then follow the publishing docs for the current review path. Open Design does not store your GitHub credentials.

What this looks like in a real design team

Imagine a small product team with a Figma frame for a launch page, a house brand system, and a monthly release rhythm.

Before the plugin, the workflow is a handoff chain: designer exports frames, engineer rebuilds layout, PM rewrites copy, someone checks token drift, someone else files bugs. The work is familiar, but the memory lives in people.

After the plugin, the workflow becomes a runnable artifact:

StepWho directs it
Choose the pluginDesigner or PM
Attach Figma URL / screenshot / local assetsDesigner
Pick the brand systemDesigner or design engineer
Generate the web artifactClaude Code, Cursor, Codex, Gemini CLI, or another detected agent
Review section IDs, copy, density, and responsive behaviorHuman in the Open Design preview
Export or hand off filesThe same local project folder

The team still needs taste. The plugin just stops making them re-explain the same workflow every release.

What to do next

If your team has a Figma export, token sync, brand kit, or deck template that keeps coming back, port the smallest repeatable slice first. Start with a SKILL.md, add open-design.json, validate it, and open the PR before the workflow grows into a private tool nobody else can reuse. The screenshot-to-prototype example shows the plugin-shaped version: a portable skill plus an Open Design sidecar.

Try this workflow.