MCPInstall

reference-design-contract

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.

Installs
1.8K
Last 24h
+25
Trending rank
#4960
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/nexu-io/open-design --skill reference-design-contract
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads reference-design-contract automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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:

  1. DESIGN.md — the reusable visual direction, following OpenDesign's standard nine-section design-system shape.
  2. design-contract.md — the decision record: evidence used, keep/change boundaries, rationale, risks, and quality gate.
  3. 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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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
  6. 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
  7. 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
  8. Validate. Read references/checklist.md and satisfy every P0 gate before final handoff.

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.

FAQ

What does the reference-design-contract skill do?

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.

How do I install reference-design-contract?

Run npx skills add https://github.com/nexu-io/open-design --skill reference-design-contract in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/reference-design-contract/ (personal) or .claude/skills/reference-design-contract/ (project).

Which AI agents can use reference-design-contract?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is reference-design-contract safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains reference-design-contract?

It is published by nexu-io in nexu-io/open-design. It has 1,776 recorded installs.

More from nexu-io/open-design

View all →

ui-ux-pro-max

nexu-io/open-design

Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in OpenDesign.

Frontend & Design5.4K installs

frontend-design

nexu-io/open-design

Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.

Frontend & Design4.8K installs

web-design-guidelines

nexu-io/open-design

Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

Frontend & Design3.9K installs

design-brief

nexu-io/open-design

Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".

Frontend & Design3.4K installs

creative-director

nexu-io/open-design

AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.

Media & Creative3.4K installs

threejs

nexu-io/open-design

Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.

Media & Creative3.4K installs

Popular business & finance skills

View category →

sales-enablement

coreyhaines31/marketingskills

When the user wants to create sales collateral, pitch decks, one-pagers, objection handling docs, or demo scripts. Also use when the user mentions 'sales deck,' 'pitch deck,' 'one-pager,' 'leave-behind,' 'objection handling,' 'deal-specific ROI analysis,' 'demo script,' 'talk track,' 'sales playbook,' 'proposal template,' 'buyer persona card,' 'battle card,' 'battlecard,' 'competitive one-pager,' 'win-loss analysis,' 'why are we losing deals,' 'loss reasons,' 'how do I respond to this objection,' 'prospect just said,' 'help my sales team,' 'sales materials,' or 'what should I give my sales reps,' 'cold call script,' or 'voicemail script.' Use this for any document or asset that helps a sales team close deals. For public competitor comparison pages, see competitors. For running buyer interviews or churn research, see customer-research. For marketing website copy, see copywriting. For cold outreach emails, see cold-email. For the offer being sold (bonuses, guarantees, pricing structure),

Business & Finance119.5K installs

revops

coreyhaines31/marketingskills

When the user wants help with revenue operations, lead lifecycle management, or marketing-to-sales handoff processes. Also use when the user mentions 'RevOps,' 'revenue operations,' 'lead scoring,' 'outbound pipeline stages,' 'lead routing,' 'MQL,' 'SQL,' 'pipeline stages,' 'deal desk,' 'CRM automation,' 'marketing-to-sales handoff,' 'data hygiene,' 'leads aren't getting to sales,' 'pipeline management,' 'lead qualification,' or 'when should marketing hand off to sales.' Use this for anything involving the systems and processes that connect marketing to revenue. For cold outreach emails, see cold-email. For email drip campaigns, see emails. For pricing decisions, see pricing.

Business & Finance114.1K installs

sales-funnel-blueprint

autonnel/autonnel-skills

Turn an offer into a concrete multi-step sales funnel spec - page-by-page structure, price ladder, copy outline and the metrics each step must hit. Use when asked to build a sales funnel, marketing funnel, landing page flow, lead magnet funnel, webinar funnel, tripwire or VSL funnel, when planning a product launch page flow, or when someone asks "what pages do I need" for selling something online.

Business & Finance104.5K installs

pricing

coreyhaines31/marketingskills

When the user wants help with pricing decisions, packaging, or monetization strategy. Also use when the user mentions 'pricing,' 'pricing tiers,' 'freemium,' 'free trial,' 'packaging,' 'price increase,' 'value metric,' 'Van Westendorp,' 'willingness to pay,' 'monetization,' 'how much should I charge,' 'my pricing is wrong,' 'pricing page,' 'annual vs monthly,' 'per seat pricing,' 'should I offer a free plan,' 'pricing page teardown,' 'pricing page audit,' 'is my pricing page AI-readable,' or 'can AI read my pricing.' Use this whenever someone is figuring out what to charge, how to structure their plans, or wants to audit a pricing page (for humans and for the AI agents that shortlist tools). For in-app upgrade screens, see paywalls. For offer construction (bonuses, guarantees, value framing, naming) on services/courses/coaching/high-ticket B2B, see offers.

Business & Finance80K installs

cross-border-ecommerce

nexscope-ai/ecommerce-skills

Cross-border e-commerce expansion advisor. Scores target markets on 8 weighted dimensions (market size, ecommerce penetration, competition, regulatory complexity, logistics infrastructure, payment ecosystem, cultural distance, IP protection), compares 5 fulfillment models with cost and transit data, provides country-by-country tax/duty compliance guides (EU VAT/IOSS, UK VAT, US sales tax, CA GST, AU GST, JP consumption tax), maps local payment preferences by market, and builds a phased expansion roadmap. No API key required.

Business & Finance62.9K installs

pricing-strategy

coreyhaines31/marketingskills

When the user wants help with pricing decisions, packaging, or monetization strategy. Also use when the user mentions 'pricing,' 'pricing tiers,' 'freemium,' 'free trial,' 'packaging,' 'price increase,' 'value metric,' 'Van Westendorp,' 'willingness to pay,' 'monetization,' 'how much should I charge,' 'my pricing is wrong,' 'pricing page,' 'annual vs monthly,' 'per seat pricing,' or 'should I offer a free plan.' Use this whenever someone is figuring out what to charge or how to structure their plans. For in-app upgrade screens, see paywall-upgrade-cro.

Business & Finance61.2K installs