skill

sync-od

Open Design project sync with opencode as a plugin. Sync your code base with open design like you do with claude design and claude code

ross-sec/sync-odcommunitylistedunreviewed

Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/ross-sec/sync-od itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 26, 2026

What it does

Mode	What happens
A — Project sync	Turn a codebase into an OD project: build `od-bundle/` OD-safe pages, upload, grade, keep in sync
B — Design system sync	Extract the design system: `DESIGN.md` + tokens (light + dark)
Both (default)	Mode B then Mode A

Features

Feature	Description
18 bundled scripts	Detect, extract, build, validate, grade, upload — all automated
Adversarial grading	5-axis rubric: THEME / RTL / FIDELITY / COMPLETENESS / POLISH
Bidirectional sync	Pull designer edits back safely via managed blocks
Secret guard	Blocks secret-bearing content from reaching OD
Drift detection	Logs when tracked files are edited
Subagent support	Lead / worker / extractor agents

Install

Global (recommended — available everywhere)

opencode plugin @ross-sec/sync-od --global

This installs to ~/.config/opencode/ and makes /sync-od available in all projects.

Per-project

opencode plugin @ross-sec/sync-od

Adds to project's .opencode/opencode.json — only available in that project.

Prerequisites

OpenDesign daemon MUST be running for sync operations:

Desktop: open the Open Design app. It starts the daemon on a random high port — not the documented 7456 — so any od command needs --daemon-url http://127.0.0.1:<port> or OD_DAEMON_URL.
Server/CLI: pnpm tools-dev (from OpenDesign repo)

The plugin auto-detects MCP connectivity and falls back to od CLI if needed.

Usage

/sync-od                    # full pipeline (both modes)
/sync-od --mode project     # Mode A: codebase → OD project
/sync-od --mode design-system  # Mode B: extract DESIGN.md + tokens
/sync-od --test             # connectivity check only

The tool runs Step A of RE-ANCHOR RITUAL — executes ods-status.js, reports exact next phase. You run that phase's script, verify DONE-gate, flip task box, call /sync-od again. Loop until DONE.

Usage

Once installed, run the autonomous pipeline:

/sync-od                    # full pipeline (both modes)
/sync-od --mode project     # Mode A only: codebase → OD project
/sync-od --mode design-system  # Mode B only: extract DESIGN.md + tokens
/sync-od --test             # connectivity check only

The plugin runs Step A of RE-ANCHOR RITUAL — executes ods-status.js, reports the exact next phase, then you run that phase's script, verify DONE-gate, flip the task box, and call /sync-od again. Loop until DONE.

Plugin hooks

Hook	Purpose
`tool.execute.before`	Secret guard — blocks secret-bearing content from being synced
`file.edited`	Drift detection — logs edits to tracked design-sync files

Scripts

All scripts live in scripts/ and are run by the agent (never by the plugin directly):

Script	Purpose
`ods-init.js`	Bootstrap `.design-sync/`
`ods-detect.js`	Detect stack (Tailwind, CSS vars, etc.)
`ods-extract-tokens.js`	Extract light+dark tokens
`ods-build-design-system.js`	Build DESIGN.md + tokens
`ods-build.js`	Build OD-safe bundle
`ods-validate.js`	Validate bundle
`ods-capture.js`	Grade lifecycle
`ods-resync.js`	The driver (final build)
`ods-upload-plan.js`	Generate upload plan
`ods-upload-verify.js`	Verify upload
`ods-manifest.js`	Track src↔od pairs
`ods-pull.js`	Pull designer edits

Links

Platform	Link	Description
npm	@ross-sec/sync-od	Public package
GitHub Packages	ross-sec/sync-od	GitHub mirror
Open Design	open-design.ai	The design workspace
Skills Hub	skills.ross-developers.com	Ross Technologies skills