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.
Turn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff.
Install Reference Design Contract
$ npx skills add nexu-io/open-design --skill reference-design-contract -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install nexu-io/open-design reference-design-contract --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/nexu-io/open-design.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/reference-design-contract .claude/skills/reference-design-contract && 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 "reference-design-contract" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/reference-design-contract into .claude/skills/reference-design-contract/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reference-design-contract", 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/nexu-io/open-design/tree/main/skills/reference-design-contractType 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 nexu-io/open-design --skill reference-design-contract -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install nexu-io/open-design reference-design-contract --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/reference-design-contract .agents/skills/reference-design-contract && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "reference-design-contract" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/reference-design-contract into .agents/skills/reference-design-contract/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reference-design-contract", 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 nexu-io/open-design --skill reference-design-contract -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install nexu-io/open-design reference-design-contract --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/reference-design-contract .cursor/skills/reference-design-contract && 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 "reference-design-contract" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/reference-design-contract into .cursor/skills/reference-design-contract/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reference-design-contract", 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/nexu-io/open-design.git --path skills/reference-design-contract--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 nexu-io/open-design --skill reference-design-contract -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install nexu-io/open-design reference-design-contract --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/reference-design-contract .gemini/skills/reference-design-contract && 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 "reference-design-contract" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/reference-design-contract into .gemini/skills/reference-design-contract/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reference-design-contract", 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 nexu-io/open-design reference-design-contractInstalls 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 nexu-io/open-design --skill reference-design-contract -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/reference-design-contract .github/skills/reference-design-contract && 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 "reference-design-contract" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/reference-design-contract into .github/skills/reference-design-contract/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reference-design-contract", 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 nexu-io/open-design --skill reference-design-contract -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install nexu-io/open-design reference-design-contract --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/reference-design-contract .opencode/skills/reference-design-contract && 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 "reference-design-contract" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/reference-design-contract into .opencode/skills/reference-design-contract/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reference-design-contract", 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.
Facts
- Skill name
reference-design-contract- GitHub stars
- 100k
- Token cost
- ~1.3k tokens
- SKILL.md length
- 458 words
- Files
- 3 (incl. references)
- Skills in repo
- 244
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Turn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff.
- Works in 3 steps: DESIGN.md — the reusable visual… → design-contract.md — the decision… → implementation-handoff.md — concise…
- Needs a reusable visual direction rather than a one-off prompt
- SKILL.md covers What this skill produces, Workflow and Output rules
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Reference Design Contract is an agent skill from nexu-io/open-design. Turn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff. Use it before prototypes, decks, redesigns, or image remix work when the user needs a reusable visual direction rather than a one-off prompt.
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/checklist.md`).
It sits in Frontend & Design, covering Design tokens. The repository describes itself as: 🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes… The licence is Apache-2.0.
When your agent uses it
- Needs a reusable visual direction rather than a one-off prompt
- Tasks that involve Design tokens
Example prompts
- “make it feel like this”
- “/reference-design-contract”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- DESIGN.md — the reusable visual direction, following OpenDesign's
- design-contract.md — the decision record: evidence used, keep/change
- implementation-handoff.md — concise build instructions for the next
What it can do on your machine
Read from SKILL.md and the folder at commit 53231d4. It shows what the files ask for, not the result of running them.
Tool permissions
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.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Reference Design Contract loads about 1.3k tokens when it runs, and up to ~1.6k if it reads all its reference files. Until then it costs about 79 tokens; SKILL.md has 458 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.
Safety
Auto-check passed
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.
SKILL.md
The full file from nexu-io/open-design at commit 53231d4, republished under its Apache-2.0 licence (© nexu-io). 458 words, ~1,297 tokens.
Download SKILL.mdSave it as
.claude/skills/reference-design-contract/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- reference-design-contract
- description
- Turn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff. Use it before prototypes, decks, redesigns, or image remix work when the user needs a reusable visual direction rather than a one-off prompt.
- zh_name
- 参考转设计合约
- en_name
- Reference Design Contract
- triggers
- design contract, reference design brief, style contract, visual direction handoff, turn references into DESIGN.md, make it feel like this, 做同款但不照抄, 把参考图转成设计规范
- od.mode
- design-system
- od.platform
- desktop
- od.scenario
- planning
- od.category
- design-systems
- od.capabilities_required
- file_write
- od.example_prompt
- Create a reference design contract for a developer-notes app. The direction should feel editorial, calm, tactile, and serious, but not copy any specific…
Reference Design Contract
Use this skill when the user has taste signals, references, or a rough "like this" request and needs a reusable design contract before generation. The goal is not to write a longer prompt. The goal is to make design decisions explicit enough that a later prototype, deck, redesign, or image-remix run can execute without guessing.
What this skill produces
Create three files:
DESIGN.md— the reusable visual direction, following OpenDesign's standard nine-section design-system shape.design-contract.md— the decision record: evidence used, keep/change boundaries, rationale, risks, and quality gate.implementation-handoff.md— concise build instructions for the next artifact-producing skill or coding agent.
If a preview is useful, also create example.html as a small hand-built
contract preview. Do not make it the main deliverable.
Workflow
- Lock the job. Identify target artifact type, audience, brand/product context, references, and constraints. Ask at most two questions only when a missing answer would change the direction. Otherwise choose a sensible default and label it as inferred.
- Read evidence. Use provided screenshots, URLs, existing
DESIGN.md, brand docs, image artifacts, or user notes. If evidence is missing, say so and base the contract on the brief only; do not invent brand facts. - Separate reference semantics. For every reference, split it into:
Keep: qualities to preserve, such as density, composition, material, typography rhythm, color temperature, or motion attitude.Change: subject matter, copy, brand marks, exact layout, protected assets, and anything the user wants adapted.Do not copy: literal screenshots, logos, claims, pricing, proprietary UI, or exact prompt wording from examples.
- Freeze the direction. Choose one coherent visual stance. Do not provide five unrelated moodboards. If there are genuinely competing directions, name them briefly, pick the recommended one, and continue.
- Write
DESIGN.md. Use these nine headings exactly:## 1. Visual Theme & Atmosphere## 2. Color## 3. Typography## 4. Spacing & Grid## 5. Layout & Composition## 6. Components## 7. Motion & Interaction## 8. Voice & Brand## 9. Anti-patterns
- Write
design-contract.md. Include:- goal and target artifact
- evidence table with confidence (
observed,provided,inferred) - keep/change/do-not-copy table
- final design stance in one paragraph
- risks and explicit unknowns
- quality gate checklist
- Write
implementation-handoff.md. Keep it short and operational:- files to read
- token/palette/type/layout constraints
- asset rules
- responsive requirements
- "first artifact should prove..." acceptance notes
- Validate. Read
references/checklist.mdand satisfy every P0 gate before final handoff.
Show full SKILL.md (74 more words)Show less
Output rules
- Make every claim traceable to user input, observed reference evidence, or an explicitly labeled inference.
- Prefer concrete constraints over adjectives: "one warm accent, no purple or blue glow" beats "premium".
- Treat "do the same style" as "borrow controllable qualities", not "clone the original subject or prompt".
- If the user asks for immediate UI generation too, finish these contract files first, then hand off to the appropriate artifact skill in the next step.
© nexu-io, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (references) in skills/reference-design-contract of nexu-io/open-design.
- SKILL.md
- example.html
- references/checklist.md
Open the folder on GitHubat commit 53231d4
Compare with similar skills
Reference Design Contract 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 |
|---|---|---|---|---|---|---|
| Reference Design Contract this skillnexu-io/open-design | 100k | — | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| 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 | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT | |
| 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 |
Similar skills
Figma use_figma Plugin API Rules
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.
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
Design Dna
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…
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
More from nexu-io/open-design
All 244 skills in this repoHumanize PPT
nexu-io/open-design
Turns raw notes into a talk-ready slide outline with per-page image, diagram or video decisions, then checks the rendered deck against that outline.
Last 30 Days Trend Research
nexu-io/open-design
Produces a cited Markdown briefing on recent community sentiment and social reaction to a topic, labeling every source it could not actually check.
OpenDesign Contribution Flow
nexu-io/open-design
Helps newcomers contribute to OpenDesign: ship a skill or design system, translate docs, fix docs or report a bug, ending in a pull request or issue.
Chat Motion Overlay Generator
nexu-io/open-design
Turns a chat transcript or screenshot into a configurable animated chat clip, rendered as a Remotion bundle with optional transparency.
Flowai Live Dashboard Template
nexu-io/open-design
Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity…
Hatch Pet
nexu-io/open-design
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references.
Related
Categories
Questions about Reference Design Contract
What does Reference Design Contract do?
Turn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff. Reference Design Contract is an agent skill from nexu-io/open-design.md plus an implementation handoff.
When should I use Reference Design Contract?
Reference Design Contract fits situations like: needs a reusable visual direction rather than a one-off prompt; tasks that involve Design tokens.
How do I install Reference Design Contract in Claude Code?
Run `npx skills add nexu-io/open-design --skill reference-design-contract -a claude-code`. Or copy the skill folder (skills/reference-design-contract in nexu-io/open-design) into .claude/skills/reference-design-contract in your project. Claude Code loads it when a task matches its description.
How do I install Reference Design Contract in Codex?
Run `npx skills add nexu-io/open-design --skill reference-design-contract -a codex`. Or copy the skill folder (skills/reference-design-contract in nexu-io/open-design) into .agents/skills/reference-design-contract in your project. Codex loads it when a task matches its description.
Can I use Reference Design Contract in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nexu-io/open-design --skill reference-design-contract -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/reference-design-contract, .gemini/skills/reference-design-contract, .github/skills/reference-design-contract and .opencode/skills/reference-design-contract in your project.
What does Reference Design Contract need to run?
SKILL.md names no scripts, command-line tools or credentials: Reference Design Contract is instructions for the agent only.
Does Reference Design Contract access the network?
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.
Is Reference Design Contract safe to install?
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.
What licence does Reference Design Contract use?
Reference Design Contract is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Reference Design Contract use?
About 1.3k tokens (SKILL.md is roughly 5.2k 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 284 tokens, read only when the agent opens those files.
What are the alternatives to Reference Design Contract?
Skills that share tags, products or a category with Reference Design Contract: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), MCP Development (coollabsio/coolify, 63k stars) and Design System (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Reference Design Contract?
nexu-io (a GitHub organization) maintains it in nexu-io/open-design, which has 99,739 GitHub stars. The repository holds 244 skills in this directory. The repository was last updated on October 7, 2026.
Source: nexu-io/open-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.