Design Context Bridge — Extensible Design Context

Extensible design context for coding agents

Design Context Bridge turns design-platform nodes into cached, validated local context packages for coding agents. It combines a deterministic local CLI with an agent workflow for creating new pages or migrating a specific existing page. A multimodal agent implements the page and compares the source design screenshot with the real running application.

Provider-neutral architecture, Figma first

The core, context-package schema, CLI and skill workflow are designed to be provider-neutral. A source-adapter interface and registry separate platform-specific retrieval and normalization from shared caching, validation, workspace state and implementation guidance.

Figma is the first and currently the only implemented adapter included in this release. Additional design platforms require their own adapter implementation and verification; they are not supported out of the box. This is an extensible architecture, not a claim of existing multi-platform compatibility.

Included in this free package

• design-replicate SKILL.md, reference documents and examples.
• Bundled design-context-bridge 0.2.0 Node.js CLI and a Bash wrapper.
• Instructions for using an existing CLI installation or the bundled runtime.
• MIT license. Original source: https://github.com/yinghuzhu/design-context-bridge

Workflow

1. Confirm the target repository, page/route and complete Figma node. For migrations, identify approved references and protected business behavior.
2. Resolve an external workspace, prepare the design package and validate it.
3. View the source screenshot before reading or editing the target implementation. Stop if the selected Figma node does not contain the requested design.
4. Reuse the project's stack and components, preserving protected API, state and interaction behavior.
5. Run the application, compare real browser screenshots and run relevant business checks. Record evidence and limitations before requesting human acceptance.

Requirements and limitations

Requires Node.js 20+, Git, a Bash-compatible local shell, filesystem/network tools, your own locally configured FIGMA_TOKEN, and an agent with image understanding and real-browser access. Designed for Codex and Claude Code; compatibility with every other agent is not verified. Figma is the first and currently the only implemented provider; the provider-neutral architecture supports future adapter development. Reference documents are currently in Chinese.

The bundled CLI can run without npm installation when the delivered files are available locally. Connector-only users may need the separate open-source local installation described in the repository README. No hosted runtime, credentials, paid support or automatic pixel-perfect guarantee is included. CLI validation checks structure, not visual correctness; the agent must inspect actual screenshots. Only access designs and repositories you are authorized to use.

Privacy and storage

Figma credentials remain in the user's local environment and must not be pasted into chat. Generated context, screenshots and migration state default to external cache/state directories rather than the target worktree. Implementation intentionally changes the user-approved target files. No Git commit or push is performed by this listing.

Free, open-source software under the MIT license. Copyright notice and license are included.