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

推荐订阅源

TaoSecurity Blog
TaoSecurity Blog
Jina AI
Jina AI
雷峰网
雷峰网
月光博客
月光博客
The GitHub Blog
The GitHub Blog
WordPress大学
WordPress大学
B
Blog RSS Feed
美团技术团队
C
CXSECURITY Database RSS Feed - CXSecurity.com
小众软件
小众软件
Security Latest
Security Latest
Microsoft Azure Blog
Microsoft Azure Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
C
Cybersecurity and Infrastructure Security Agency CISA
Last Week in AI
Last Week in AI
A
Arctic Wolf
Latest news
Latest news
Attack and Defense Labs
Attack and Defense Labs
I
Intezer
F
Fortinet All Blogs
罗磊的独立博客
MongoDB | Blog
MongoDB | Blog
Webroot Blog
Webroot Blog
S
Secure Thoughts
Help Net Security
Help Net Security
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
V
Visual Studio Blog
P
Proofpoint News Feed
博客园 - 【当耐特】
P
Privacy International News Feed
V
Vulnerabilities – Threatpost
Stack Overflow Blog
Stack Overflow Blog
Know Your Adversary
Know Your Adversary
云风的 BLOG
云风的 BLOG
Hacker News: Ask HN
Hacker News: Ask HN
L
LINUX DO - 最新话题
H
Help Net Security
爱范儿
爱范儿
酷 壳 – CoolShell
酷 壳 – CoolShell
S
SegmentFault 最新的问题
Forbes - Security
Forbes - Security
T
Tailwind CSS Blog
量子位
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
T
Tenable Blog
Cloudbric
Cloudbric
N
News and Events Feed by Topic
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Hugging Face - Blog
Hugging Face - 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 How to port a Figma workflow into an Open Design plugin BYOK reality check: 5 things that break in Open Design today The open-source alternative to Claude Design BYOK design workflow: run Claude, Codex, or Qwen on your own key Why we built Open Design as a skill layer, not a product
31 skills, 72 systems: how the Open Design library works
Open Design · 2026-05-13 · via Open Design Blog

A walk through the four primitives that make Open Design composable: skills, systems, adapters, and the daemon. With concrete examples of how a Markdown file becomes a pixel-perfect deliverable.

Open Design is, mechanically, four primitives stacked on top of each other:

  1. Skills — what the agent should do
  2. Systems — what the output should look like
  3. Adapters — which agent does the work
  4. The daemon — the loop that wires them together

Each primitive is a folder of files. None of them require a database, a plugin runtime, or a hosted service. This post walks through each in turn and shows what happens when you point your agent at a real brief.

Skills: the unit of capability

A skill is a folder containing one SKILL.md and zero or more supporting files. The Markdown file is the agent’s contract. A typical skill looks like this:

skills/
  guizang-ppt/
    SKILL.md
    templates/
      magazine.html
    examples/
      product-launch.html
      pitch-deck.html

SKILL.md declares the skill’s name, the trigger conditions, the input shape, the output shape, and any inline guidance for the agent. When the daemon boots, it scans skills/ and registers every folder containing a SKILL.md. There is no plugin manifest. There is no version field. There is the file, and the file is the source of truth.

We currently ship 31 skills. Some are deck generators, some produce mobile mockups, some build editorial pages, some write office documents (Word, Excel, PowerPoint). Each one is a folder you can fork, edit, or replace.

Systems: the unit of taste

A system is a DESIGN.md file plus optional reference assets. It describes a visual identity in machine-readable form:

  • Color — OKLch values for foreground, background, accent, error, and so on
  • Type — font stack, weights, the type ramp, line-height conventions
  • Space — base unit, spacing scale, container widths, gutter rules
  • Layout posture — grid choices, asymmetry rules, density preferences
  • Voice — typography of words: tone, vocabulary, sentence rhythm

We ship 72 systems out of the box, including portable versions of Linear, Vercel, Stripe, Apple, Cursor, Figma, and a long tail of editorial and brand systems.

A system is not a Figma library. There are no components, no variants, no nested instances. It is a contract that any agent can read and any human can audit. The cost of writing your own is roughly 30 minutes of focused work.

Adapters: the unit of agent

An adapter is a small TypeScript file in adapters/ that knows how to:

  • detect whether the agent is installed on the user’s $PATH
  • start a session with that agent
  • pipe a skill invocation in
  • collect the output back

We ship adapters for 12 agents today: Claude, Codex, Gemini, Cursor, Copilot, OpenCode, Devin, Hermes, Pi, Kimi, Kiro, Qwen. The daemon auto-detects which ones are present and offers them as a dropdown on first boot.

If you want to add a new adapter, the file is roughly 80 lines of TypeScript and a single register() call. No SDK to learn, no permission to request.

The daemon: the loop that ties it together

The daemon is a small Node process you start with pnpm tools-dev. It does four things:

  1. Detect — scans $PATH for installed agents and skills/ for installed skills, on boot
  2. Discover — opens an interactive question form to pin down surface, audience, tone, scale, and brand context for the current brief
  3. Direct — presents 5 deterministic visual directions (palette in OKLch, font stack, layout posture cues) and asks the user to pick one
  4. Deliver — invokes the selected skill with the locked-in system, lets the agent write to disk, and previews the output in a sandboxed iframe

The whole loop fits in roughly 1500 lines of code. It is intentionally small. The cleverness is in the skills, not in the runtime.

What it feels like in practice

Suppose you want a launch deck for a new product feature. Here’s the flow:

  1. You run pnpm tools-dev in a terminal. The daemon starts on localhost:7780.
  2. You open the URL. The daemon shows you which agents it found (e.g. Claude, Cursor, Codex).
  3. You pick guizang-ppt from the skill list.
  4. A 30-second question form pops up: who’s the audience, what’s the tone, what’s the brand context.
  5. You’re shown 5 visual directions — different palettes, type pairings, layout postures. You pick one.
  6. The agent writes to disk. A sandboxed iframe shows the result. You can export to HTML, PDF, PPTX, ZIP, or Markdown.

The output is real. The files are yours. You can edit them in any editor, hand them to a designer, or feed them back into another skill.

Why files, not a database

Every primitive — skills, systems, adapters — is a folder of text files. There is no central database. There is no “Open Design account.” There is no hosted service that has to keep working for your work to keep working.

This is a deliberate trade. We give up the ability to do clever cross-user analytics, cross-project memory, or hosted collaboration. We get back: portability, longevity, auditability, and the ability for anyone to fork the entire library and ship their own variant.

If you’ve watched a generation of design tools die taking your files with them, you’ll understand why this trade is worth it.