Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
One-prompt autonomous product design and implementation. An agent skill from kwakseongjae/oh-my-design.
$ npx skills add kwakseongjae/oh-my-design --skill omd-autopilot -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-autopilot --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/omd-autopilot .claude/skills/omd-autopilot && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "omd-autopilot" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-autopilot into .claude/skills/omd-autopilot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-autopilot", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-autopilotType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add kwakseongjae/oh-my-design --skill omd-autopilot -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-autopilot --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/omd-autopilot .agents/skills/omd-autopilot && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "omd-autopilot" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-autopilot into .agents/skills/omd-autopilot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-autopilot", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kwakseongjae/oh-my-design --skill omd-autopilot -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-autopilot --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/omd-autopilot .cursor/skills/omd-autopilot && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "omd-autopilot" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-autopilot into .cursor/skills/omd-autopilot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-autopilot", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/kwakseongjae/oh-my-design.git --path skills/omd-autopilot--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add kwakseongjae/oh-my-design --skill omd-autopilot -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-autopilot --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/omd-autopilot .gemini/skills/omd-autopilot && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "omd-autopilot" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-autopilot into .gemini/skills/omd-autopilot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-autopilot", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install kwakseongjae/oh-my-design omd-autopilotInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add kwakseongjae/oh-my-design --skill omd-autopilot -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/omd-autopilot .github/skills/omd-autopilot && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "omd-autopilot" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-autopilot into .github/skills/omd-autopilot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-autopilot", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kwakseongjae/oh-my-design --skill omd-autopilot -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-autopilot --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/omd-autopilot .opencode/skills/omd-autopilot && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "omd-autopilot" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-autopilot into .opencode/skills/omd-autopilot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-autopilot", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
omd-autopilotOne-prompt autonomous product design and implementation. An agent skill from kwakseongjae/oh-my-design.
Omd Autopilot is an agent skill from kwakseongjae/oh-my-design. One-prompt autonomous product design and implementation. Use automatically for broad greenfield UI requests such as 'from scratch', '새 제품/화면을 알아서 만들어줘', or requests that delegate DESIGN.md creation. It decides whether to reuse, establish, refresh, or skip a project design system; asks at most one consequential question batch; then builds and verifies the real surface. Use omd:harness instead only when the user explicitly asks for guided checkpoints.
Its SKILL.md is about 9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 25 other files, including reference files (for example `references/component-craft.md`, `references/derivation-chain.md` and `references/design-system-contract.md`).
It sits in Frontend & Design, covering Design tokens and Design systems. The repository describes itself as: Give your AI coding agent a design system. One command installs 500+ quality-graded company DESIGN.md references + skills into Claude Code, Codex, Cursor, and OpenCode. Free… The licence is MIT.
11 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit c0ec438. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
nodeFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Omd Autopilot loads about 9k tokens when it runs, and up to ~128k if it reads all its reference files. Until then it costs about 117 tokens; SKILL.md has 4,580 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from kwakseongjae/oh-my-design at commit c0ec438, republished under its MIT licence (© kwakseongjae). 4,580 words, ~9,005 tokens.
.claude/skills/omd-autopilot/SKILL.md (or your agent's skills folder). This skill also uses 20 other files; get the full folder from GitHub.Use this skill for an ordinary natural-language request to create a new product surface without requiring the user to name a skill, choose a reference, or set up the guided harness.
This is a separate workflow from omd:harness. Never claim to have approved or
bypassed its mandatory checkpoints.
The current main host agent is the only implementation owner. Specialists are
read-only advisers. They may write only inside the current run's advisory
folders and must never edit DESIGN.md or product files.
DETECT — inspect the repository, real consumer route, stack, existing
DESIGN.md, preferences, components, states, assets and protected behavior.
When OMD_AUTHORITY_CONTROLLER_RUN_DIR is present, use that exact relative
path as the one run directory; do not derive or substitute a slug.
Create the run-scoped task.md while retaining the exact user-prompt bytes
verbatim (extra clearly labelled code observations may follow, but may never
be presented as user authority), then run
autopilot-mission.cjs <project-root> <run-dir> bootstrap. This freezes the
initial product tree and mission budgets before any product write.
AUTHORITY_GATE — run scripts/design-council-prime.cjs in the run scope.
Freeze its decision ledger before any product write.
BOUNDED_COUNCIL — dispatch no more than three evidence-required, read-only
lanes. Do not dispatch a lane for a settled decision. A generic authorized
greenfield mission uses only the design-system and interaction lanes;
locale/copy or explicit external-evidence needs may add one relevant third
lane. After the authority
handoff reaches PROPOSE_PLAN, run
autopilot-council-plan.cjs <project-root> <run-dir>, dispatch exactly the
listed roles exactly once and in parallel (in bounded external-controller
mode, execute those same lanes inline per the budget section instead of
spawning advisers), then collect each result once and run
autopilot-council-reconcile.cjs <project-root> <run-dir>. The reconciled
receipt is mandatory and never grants product-write authority. Every lane
must write the exact JSON shape declared in plan.json. Never send a
follow-up, retry, or reformat request for a malformed/missing adviser result;
fail the council honestly and preserve implementation time instead.
CONSEQUENTIAL_INTERVIEW — ask zero or one batch. Ask only unresolved
product-authority decisions that materially change acceptance or the design
system. A sufficiently authorized prompt proceeds without a question. Never
create, infer, or edit council-intake.answers.json on the user's behalf;
that file may contain only an actual user response relayed verbatim after
the controller has entered CONSEQUENTIAL_INTERVIEW.
Unattended mode (--unattended in the prompt, or .omd/config.json
"unattended": true): there is no user to answer, so each question takes
its first (recommended) option and the choice is recorded in
loop-trace.json → autoSelected[] as {question, chosen, alternatives}
so the decision is auditable afterwards. Options that delete or overwrite
files that existed before the mission are never auto-selected — the mission
fails that requirement honestly instead. council-intake.answers.json is
still never written: auto-selection is a trace entry, not a user answer.
DESIGN_SYSTEM_DISPOSITION — resolve exactly one of reuse, establish,
refresh, or surface-local-only. A missing exact brand source is blocked.
After the council handoff reaches PROPOSE_PLAN, run the installed
design-system-plan.cjs <project-root> <run-dir> helper. Its
design-system-decision.json receipt is mandatory before any product write.
SYSTEM_PROOF — for establish or refresh, use the contract in
references/design-system-contract.md. The design-system architect may
propose; the main agent writes only run-scoped graph/provenance/coverage
drafts. New generation, synthesis, refresh, and refactor are single-write
Core v2: never emit legacy frontmatter or 13/15/16-section layouts. After the
design-system-decision.json receipt grants establish/refresh authority,
inspect the environment before preparing a review. When
OMD_AUTHORITY_CONTROLLER_RECEIPT is present, the main agent is explicitly
not the project owner: it must not run either approval helper, pass a
--reviewer, assert --authority-transition-approved, calculate a hash, or
choose a second output name. Author the three drafts once, with every
interactive component declaring all seven state-applicability entries and
every non-interactive component declaring only a reason (non-interactive
error/success display variants do not require a focus-visible state).
Before spending the single activation, validate the drafts with the controller's provider-free dry-check. It may be run any number of times and never counts against the activation budget:
node $OMD_AUTHORITY_CONTROLLER_EXECUTABLE --dry-check . $OMD_AUTHORITY_CONTROLLER_RUN_DIRThe dry-check compiles the drafts into a scratch package and verifies that
every evidence path referenced by provenance.json and coverage.json
(for example council/<lane>/result.json) exists as a real file at the
project root. Fix every reported issue and rerun the dry-check until it
prints "status": "dry-check-pass". Only then invoke exactly once:
node $OMD_AUTHORITY_CONTROLLER_EXECUTABLE . $OMD_AUTHORITY_CONTROLLER_RUN_DIRBoth commands must be issued standalone, byte-exact as written — never
append ;, &&, echo, redirects, or any other text to either command.
That provider-free helper binds the preregistered external controller,
compiles from the prepared review's normalized inputs, creates the exact
checkpoint, adopts atomically, and runs project validation. If it fails,
preserve the single failure and stop system work—never create review-v2,
package-v2, or a replacement mission. This path exists to protect the
product-build budget; after success, move directly to the acceptance plan
and real route, giving the explicit unavailable-information state the same
implementation priority as default/focus-visible.
Without that receipt, follow the ordinary human-owner flow below.
validate the authority-neutral graph draft—without projection or
projection.sha256—and prepare the exact non-authoritative review preview:
omd design-md prepare-review <graph> --provenance <provenance> --coverage <coverage> --out-dir <review> [--migration-report <report>]The exact preview must be approved by the actual project owner or a preregistered external authority controller, never by the main agent itself:
omd design-md approve-review <review>/review-request.json --reviewer <project-owner-id> --out <approval> --authority-transition-approved
omd design-md compile <review>/input-graph.json --provenance <review>/provenance.json --coverage <review>/coverage.json --review-receipt <approval> [--migration-report <review>/migration-report.json] --out-dir <fresh> --adoptIf the public binary is unavailable, only the installed exact-equivalent
prepare-design-md-core-review.cjs and compile-design-md-core.cjs helpers
with the same inputs are allowed. Never hand-write or patch DESIGN.md, section
anchors, the seven design-md:claim declarations, any design-md:claim-end,
manifest, or binding hashes; those bytes are canonical compiler-owned output.
If the compiler demands a placeholder, precomputed, or zero projection SHA,
fail closed; the compiler must create the first binding itself.
Never publish into an existing, project-owned, or symlinked output directory.
Read back and validate the fresh adopted package before project adoption.
Compiler PASS proves only schema, Portable declaration conformance, canonical
rendering, and binding integrity. It does not prove factual accuracy,
provenance truth, font/asset licenses, locale behavior, accessibility, or
visual quality. Coverage booleans are not evidence: every
provenance/group reference must resolve to a real project or run artifact,
and the validator computes system checks from the graph and manifest bound to
the exact compiler-produced DESIGN.md. Keep provenance/coverage and the
installed final project-system validator mandatory; never fill missing
bindings with agent-calculated hashes. If the compiled manifest does not bind
them, fail closed at staging. Bind and install the six exact artifacts only via:
omd design-md prepare-checkpoint <fresh> --reviewer <project-owner-id> --out <checkpoint> --authority-transition-approved
omd design-md adopt <fresh> --project-root <project-root> --checkpoint-receipt <checkpoint>If the receipt-gated atomic adopter is unavailable, preserve the stage and
stop. Then run
validate-project-design-system.cjs <project-root> <run-dir>. Do not implement
the product until that proof passes.
If refresh/refactor starts from a legacy document, run the provider-free
migration/check first and require dropped=0, no unsupported promotion,
round-trip equality, and opaque preservation under
extensions["dev.oh-my-design.migration"]. The staged migration candidate is
non-authoritative and keeps its named source DESIGN.md canonical until the
explicit compile/adopt transition. Do not hand-edit legacy headings.
Never author or edit system/proof.json directly. Run the installed
validate-project-design-system.cjs <project-root> <run-dir> helper; the
mission controller validates its full schema, source hashes, required
groups/checks, outcome, and exact DESIGN.md binding before it authorizes
PRODUCT_BUILD. A minimal { pass: true } proof is an authority failure.
ACCEPTANCE_PLAN — before product admission, materialize
acceptance-plan.json. Quote the exact task bytes for every journey,
constraint, and protected unknown. Lock the real route, default/loading/
empty/error/success/disabled states, 1440/390/320/200%-reflow viewports,
and the exact functionality/journey/responsive/keyboard/accessibility/
honesty/design-conformance checks. A generic checklist is not admission.
Preserve every positive journey and supported-item claim at equal or
stronger semantics. An honest unavailable, unknown, deferred, or fallback
state may coexist with a required journey, but it never satisfies or
replaces that journey unless the prompt explicitly makes that exact item
unavailable. For example, “start a reservation” requires a newly operable
reservation-start state, not only a notice that reservations are
unavailable; a stated five-locale surface requires localized core content
in all five locales even when a secondary translation resource has an
unavailable state. Reject the plan and revise it before product admission
when one requirement weakens or contradicts another.
PRODUCT_BUILD — implement the requested real route and all required
empty/loading/error/success/disabled states. Apply only proven or explicitly
proposed project tokens. When a controller execution budget is present,
finish authority and council work before its handoff reserve begins. The
reserve belongs to implementation, acceptance proof, and controller
handoff—not additional research or adviser repair. Treat zero document
overflow at 390px, 320px, and 200%-reflow as a product requirement, and keep
primary task controls at least 44×44 CSS px on touch viewports unless the
control is an inline prose link or a native control whose associated label
supplies the target. Treat state transitions as product contracts: a
validation error moves focus to the failing control and is programmatically
associated with it; a success status names the affected record/action and
remains reflected in the source collection or detail state. Run contrast
checks on enabled and disabled task controls—not only the final success
state. A filterable collection must retain a meaningful baseline dataset
that makes the filter outcome observable; when a native select is used, its
selected option is both the programmatic and visible active state. If a
progressbar role is present, keep aria-valuenow and aria-valuemax
synchronized with the visible progress text in every state and locale.
Never hide focusable descendants with aria-hidden alone: use hidden,
inert, or remove/disable their focusability until the state opens. When an
acceptance requirement makes an honesty boundary observable (for example
fictional sample data or “not medical advice”), render that boundary as
visible accessible product copy rather than keeping it only in source notes.
VERIFY — verify functionality, same-route desktop/mobile/320px/200%,
keyboard, accessibility, responsive behavior, copy, evidence honesty and
DESIGN.md-to-code conformance. proof.json schema 0.2 must bind the mission,
acceptance plan, product-build admission, route, exact current product-tree
SHA, repair round, every task requirement, and every quality check. Each
atomic result needs non-empty evidence. pass is the conjunction computed
from those results; prose confidence or a self-authored summary is not proof.
“Browser unavailable”, skipped checks, or missing screenshots must be a
failed check, never a passing substitute.
Render integrity is an atomic check. Run the deterministic checker on
every rendered page the mission produced — node test-v2/tools/render-integrity.mjs <page.html…>
in this repo, omd check render <page.html…> when installed — and bind
its verdict per page into proof.json with the tool output as evidence
(overflow-x, viewport escape, text clip, unreset UA margins, missing font,
broken image, encoding). A FAIL is a failed check; a page the tool could not
load is a failed check.
Text contrast is a second atomic check. Run node test-v2/tools/text-contrast.mjs <page.html…>
in this repo, omd check contrast <page.html…> when installed, on the same pages
and bind its verdict into proof.json the same way. It measures the nominal
computed color against the actual background pixel, so accent-on-accent text,
headlines over photos or gradients, and grey meta text are caught before the
critique round, not after delivery. Body text below 4.5:1 and large text, focus
rings, or essential UI boundaries below 3:1 are failed checks. Fix them by
changing tokens or adding a scrim in the build, never by lowering the threshold.
A page whose contrast the tool could not measure is a failed check, not a pass. Append one entry per verification round to
loop-trace.json → rounds[]: {round, renderIntegrity: {defects, items}, critique: {blocks}, fixed: [...]} so the mission can show its defect count
going down, not just its last verdict. The same file carries autoSelected[]
from CONSEQUENTIAL_INTERVIEW.
When .benchmark/controller-verification-policy.json is present, the
installed mission controller is the objective-verification authority. Every
local proof, passing or failing, must stop at EXTERNAL_VERIFY before any
repair budget is consumed; do not write delivery, start a local repair, end
the mission, remove the policy, or invent its receipt. The host controller
evaluates the real route and supplies the next hash-bound state. If the
controller passes while a broader local check still fails, the remaining
local failure may then use the same bounded repair budget.
In this controller-owned mode, never discover, install, launch, or probe a
local browser, Playwright/Chromium binary, HTTP server, screenshot command,
browser harness, or GUI application. Do not spend the controller handoff
reserve testing whether those tools exist. Finish deterministic source
checks, write the truthful proof, advance to EXTERNAL_VERIFY, and return
control immediately; the controller owns all browser execution.
BOUNDED_REVISION — the main agent may apply at most two focused repair
rounds in the same mission. The controller writes an exclusive receipt for
every failed proof, freezes the exact failed requirement/check IDs, and
requires both a changed product tree and a replacement proof at the next
round. Critics stay read-only. Unresolved BLOCK produces a failed handoff.
A controller-authorized round is an internal continuation of the same
one-prompt mission, not a retry or replacement. Read only its exact
.benchmark/controller-feedback/round-<n>.json, preserve passing behavior,
update the product and atomic proof for that round, and return to
EXTERNAL_VERIFY. Never bootstrap a second mission to escape the findings.
HANDOFF — report implemented files, system disposition, question count,
proof hashes, screenshots, failures, time and token coverage.
Run autopilot-mission.cjs <project-root> <run-dir> advance at every state
boundary. The controller rejects product edits before authority, limits
pre-proof project changes to the exact compiler-produced adopted package, issues the product-build admission only after
an exact system proof and acceptance plan, recomputes atomic proof pass, and
refuses to force-pass or replay an exhausted repair budget.
Only one project-scoped Autopilot mission may be active. Continue its bounded
repair loop in the same run; never create a second run to replace, retry, or
escape an unresolved active mission. Completed and failed missions are
terminal and non-resumable.
When OMD_AUTHORITY_CONTROLLER_RUN_DIR is present, the mission runs under a
hard wall-clock budget and the product route is the graded deliverable. The
design-system rigor stays intact — what changes is where the minutes go.
date +%s) at every state boundary. Authority, council,
and system work together must finish inside the FIRST 40% of the budget;
everything after belongs to PRODUCT_BUILD → VERIFY → controller handoff.--dry-check
until it passes, then invoke the controller once, immediately. Do not
re-read, re-verify, or beautify drafts the compiler will normalize anyway —
the dry-check IS the verification step, and it is free (it never counts
against the single activation).;,
&&, echo, date, or anything else to it (sequencing voids the
exactly-once contract). Run elapsed-time checks as their own separate
commands before or after.task.md bytes also exist
at the project root (copy from the run directory): the adopter requires
<project-root>/task.md as proof evidence.In PRODUCT_BUILD, implement in this exact order — a polished page missing a
required state scores zero, an honest skeleton with every state scores:
nav with
disclosure collapse, skip link targeting #main (never the primary CTA),
heading order, form field ID graph (label[for], aria-describedby
hint+error chain, role="alert" errors, focusable role="status" success).<state>" radios, demo toggles, or any state menu in the
product UI. data-state="<state-name>" markers live on the real
components that enter those states. Every entry in the system's
honesty/unknown ledger renders as a visible unavailable-information
node — prose disclaimers alone do not count.aria-selected / aria-pressed / aria-checked /
aria-current on the control itself, and for filters also a visible
role="status" or aria-live summary ("Showing only urgent …").aria-describedby pointing at a visible role="alert" (or
aria-live) message — all three together, not any one alone.role="status"
WITH the record's visible ID and the chosen value, and update the source
record's own text to show the same value.<html lang>, the selector's committed value, and
the rendered script together; never silently change the selected
language. Progress: role="progressbar" aria-valuenow/max must equal
the visible "N of M" text.role="dialog"|"region"|"complementary" containing
the record's visible ID; records carry stable visible IDs.data-cta="primary"; the form submit is
data-cta="submit"; repeated per-item controls are data-cta="local" and
never reuse the primary verb string. No sticky/footer primary duplicates.<main> and exactly one <h1> per
rendered view — count them in the final DOM, zero and two both fail.document.documentElement.scrollWidth <= clientWidth (no horizontal
document scroll), the primary action fully inside the viewport, every
interactive control ≥ 44px in its smaller dimension and horizontally
unclipped. A quick DOM-math pass over the final HTML/CSS counts; skipping
the check does not.aria-hidden and informative SVG named via
role="img" + title/desc, then visual polish last with whatever budget
remains.Before declaring the product finished, run a SELF-WALK: list every journey verb from the brief, and for each write (a) the exact keyboard path that reaches it and (b) the programmatic evidence that proves it (which attribute or role changes). Any row missing either entry is unfinished work — fix it before the mission proof, budget permitting, because a missing row scores the same as a missing page.
Read references/derivation-chain.md before any system draft. The order is
PHILOSOPHY → DERIVE (decision table with D-ids and rationales) → TOKENS
(with D-id back-references in comments) → COMPONENT SPECS (documented before
code; select from references/presets/INDEX.md first and derive token slots
from the decision table — never improvise from zero what the preset catalog
already validates (gate GS8); references/component-craft.md is the floor)
→ LAYOUT GRAMMAR (per page, with content back-calculation — if the data
cannot fill the grammar, enrich the data first, never leave wide viewports
empty) → BUILD (pages consume only) → RENDER CRITIQUE → DESIGN.md carrying
the philosophy and decision table so a designer can read WHY every value is
what it is. A token value without a D-id rationale is an improvised value
(gate GS7).
A screen is only as good as the data it carries. Before designing anything,
inventory the DATA TRUTH SOURCES and write data-inventory.md into the run
directory:
data/*.json, data/*.js, CSV, seeded stores.Then design FROM the data shape, not toward a template:
Before PRODUCT_BUILD, read references/visual-quality-contract.md in full
and treat every item as a gate, not a suggestion. Non-negotiables repeated
here because violating them wastes the whole run:
critique.md
into the run directory before the mission proof.When the brief asks for more than one page, the design system is the
consistency contract: ONE shared stylesheet owns tokens and components
(defined exactly once); every page links it and adds only page-level layout.
Nav and footer are designed once and rendered identically on every page with
aria-current on the active link. Body, heading, and primary-action styling
must compute identically across pages; every internal link resolves to a
real page. Build page one as the system's proof, then express the remaining
pages FROM it — if page two needs a new token or component, that is a system
change first, not a page-local invention.
Motion is a design-system concern, not per-element improvisation. When the brief asks for a modern/polished feel (or names transitions), establish motion TOKENS in the system first and cite only them:
transform and opacity (compositor-friendly); never animate
layout properties (width/height/top/margin) or box-shadow directly (fake
elevation with a pseudo-element opacity fade).@media (prefers-reduced-motion: reduce) with
a non-animated equivalent state — reduced-motion is a graded contract, not
an afterthought.The adopted design system is stack-neutral; the PRODUCT expresses it in the stack the brief names. Detect the stack from the brief and any provided runtime (vendored libraries in assets/), then project tokens and state semantics into that stack's native idiom — never a foreign one:
:root custom properties; states as
data-/aria- attributes driven by small event handlers.:root custom properties; components as functions
whose props carry state; aria attributes computed from the same props that
drive the visuals (single source of truth — never a DOM query after
render); lists keyed by stable record IDs; no innerHTML string templating.DESIGN.md → reuse without reopening it. Legacy
13/15/16-section and unmarked documents remain readable during the compatibility
window; reusing one does not silently rewrite it.establish.refresh; legacy input must pass
staged migration/check and opaque-extension preservation before replacement.surface-local-only; never promote local
choices as project facts.Reference selection happens only after this decision and only when it supplies useful verified inspiration. A reference never owns product facts.
Classify each consequential system decision as prompt-fact,
repository-fact, verified-reference-inspiration,
agent-proposed-greenfield-decision, or unresolved.
Unknown means absent at the smallest boundary. Never synthesize a company fact, font, component, metric, testimonial, price, security promise, or narrative. Core v2 does not require placeholder facts: omit unresolved values from tokens, prescriptive prose, and code. A consequential unresolved decision may be named in Governance without a suggested fallback.
Store permanent artifacts under .omd/runs/<run-id>/:
mission.jsoncouncil/decision-ledger.jsondesign-system-decision.jsonsystem/proposal.md, migration report/rollback references when applicable,
and generated system/proof.jsonimplementation.jsonacceptance-plan.jsonproof.json, repairs/round-<n>.json, and screenshotsloop-trace.json — per-round renderIntegrity/critique counts and
autoSelected[] (the audit trail of unattended choices); an empty
rounds[] means verification never ran and the proof cannot passdelivery.jsonReceipts bind the original task, repository evidence, DESIGN.md, product output, consumer route, states, viewports and validator results. Missing proof is not a pass.
The project-owned canonical system lives outside the run at:
.omd/system/manifest.json.omd/system/graph.json.omd/system/provenance.json.omd/system/coverage.jsonThe visible DESIGN.md begins with # <Product> Design System, contains exactly
the seven neutral design-md:section anchors in the frozen Core order, and has no
YAML/frontmatter, OmD/tool/generator/quality metadata at its top. Only an adopted,
valid profile: portable-core manifest with exact graph/projection hashes makes
the graph canonical; a migration candidate keeps its named source DESIGN.md
canonical. The seven semantic design-md:claim declarations and every
design-md:claim-end are compiler-owned and must not be edited after rendering.
The Markdown remains a complete portable contract on its own.
If the user explicitly asks to review journey/system/validation checkpoints or
to collaborate phase by phase, route to omd:harness and preserve all of its
mandatory checkpoints. Do not silently switch an active guided run to
Autopilot.
© kwakseongjae, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 20 other files (references) in skills/omd-autopilot of kwakseongjae/oh-my-design.
Open the folder on GitHubat commit c0ec438
Omd Autopilot next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Omd Autopilot this skillkwakseongjae/oh-my-design | 533 | — | ~9k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Design SystemOhh-889/skyroc | 795 | 11 repos | ~1.7k | Automated safety check: Pass | MIT | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Scalar Design Systemscalar/scalar | 16k | — | ~2.7k | Automated safety check: Pass | MIT |
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
google-labs-code/stitch-skills
Generates a DESIGN.md design-language file for Google Stitch that encodes color, typography, layout, component behavior and motion rules to avoid generic AI-looking UI.
kwakseongjae/oh-my-design
When you need a browser, read this Skill by default. An agent skill from kwakseongjae/oh-my-design.
kwakseongjae/oh-my-design
현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬.
kwakseongjae/oh-my-design
Maximum-craft one-page landing — the wow bar. An agent skill from kwakseongjae/oh-my-design.
kwakseongjae/oh-my-design
Scroll-native one-page landing that overwhelms — concept, composition, asset placement, and scroll choreography derived from DESIGN.md and the measured landing-craft codex.
kwakseongjae/oh-my-design
Brand-consistent asset sets from DESIGN.md — hero, section illustrations, icon sets, OG image — generated through whichever channel the user actually has (grok build imagegen, Codex $imagegen…
kwakseongjae/oh-my-design
Guided setup of the tools the design harness can use — image/video generation channels, browser, encoders.
Categories
One-prompt autonomous product design and implementation. An agent skill from kwakseongjae/oh-my-design. Omd Autopilot is an agent skill from kwakseongjae/oh-my-design. One-prompt autonomous product design and implementation.
Omd Autopilot fits situations like: explicitly asks for guided checkpoints; tasks that involve Design tokens; tasks that involve Design systems.
Run `npx skills add kwakseongjae/oh-my-design --skill omd-autopilot -a claude-code`. Or copy the skill folder (skills/omd-autopilot in kwakseongjae/oh-my-design) into .claude/skills/omd-autopilot in your project. Claude Code loads it when a task matches its description.
Run `npx skills add kwakseongjae/oh-my-design --skill omd-autopilot -a codex`. Or copy the skill folder (skills/omd-autopilot in kwakseongjae/oh-my-design) into .agents/skills/omd-autopilot in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add kwakseongjae/oh-my-design --skill omd-autopilot -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/omd-autopilot, .gemini/skills/omd-autopilot, .github/skills/omd-autopilot and .opencode/skills/omd-autopilot in your project.
Going by SKILL.md and its folder, Omd Autopilot needs the command-line tools its instructions call (node).
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Omd Autopilot is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 9k tokens (SKILL.md is roughly 36k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 119k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Omd Autopilot: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Design System (Ohh-889/skyroc, 795 stars) and Design Dna (zanwei/design-dna, 1.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
kwakseongjae (a GitHub user) maintains it in kwakseongjae/oh-my-design, which has 533 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 1, 2026.
Source: kwakseongjae/oh-my-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.