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 |