Sync With Open Design

Sync any codebase to Open Design and/or extract its design system.
Script-driven, adversarial grading, bidirectional sync with managed blocks.

---

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

npm

// opencode.json
{
  "plugin": ["@ross-sec/sync-od"]
}

GitHub Packages

echo "@ross-sec:registry=https://npm.pkg.github.com" >> .npmrc
npm install @ross-sec/sync-od

Local development

git clone https://github.com/ross-sec/sync-od.git
cd sync-od
npm install
npm run build

// opencode.json
{
  "plugin": ["./path/to/sync-od"]
}

---

Usage

Once installed, the skill triggers automatically when you ask to sync a codebase to Open Design:

/sync-od
sync this project to Open Design
create an OD design system for this repo

---

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

---

MIT © Andre Ross / Ross Technologies