skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

reference-design-contract

Convert visual references and design briefs into structured design system specifications and implementation handoffs.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#specification#design-system#UI-design#visual-direction#HANDOFF#design-contract
One-click install
npx skills add https://github.com/nexu-io/open-design --skill reference-design-contract
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reference-design-contract
Source: https://github.com/nexu-io/open-design/tree/main/skills/reference-design-contract
Command: npx skills add https://github.com/nexu-io/open-design --skill reference-design-contract

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill resolves the ambiguity of "make it look like this" requests by forcing explicit design decisions, preventing the common issue of AI-generated "design slop" or ungrounded visual outputs.

Core Features & Use Cases

  • Structured Specification: Generates a standardized DESIGN.md covering nine essential design system categories.
  • Evidence-Based Handoff: Creates a design-contract.md that tracks evidence, rationale, and quality gates for downstream agents.
  • Use Case: Before building a new dashboard, use this skill to turn a collection of competitor screenshots and mood boards into a concrete, buildable design contract that guides the UI generation process.

Quick Start

Use the reference design contract skill to create a design specification for a calm, editorial-style developer notes app based on the provided reference images.

Frequently Asked Questions about reference-design-contract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn reference images into a design system?▼

Use the reference design contract skill to analyze your images and extract core visual qualities. The skill produces a DESIGN.md file that defines your color, typography, and layout rules for consistent generation.

What is the difference between a prompt and a design contract?▼

A prompt is a one-off instruction, while a design contract is a reusable specification. The contract makes design decisions explicit, allowing multiple agents to execute tasks without guessing the visual direction.

Can I use this skill for redesigning existing products?▼

Yes, this skill is ideal for redesigns. It helps you document what to keep from the current product and what to change, ensuring the new design maintains brand continuity while meeting new goals.

Why does the skill require a 'Do not copy' section?▼

The 'Do not copy' section prevents the AI from cloning proprietary UI, logos, or specific subject matter from your references. It ensures the output is an original design inspired by the reference's style, not a copy.

Related Skills

Explore More Design & Creative Skills→
m0atm0at
1

brand-guidelines

Standardize Anthropic brand identity across documents and visuals.

Community
Intermediate
vikingokftvikingokft

taste-design

Generate DESIGN.md prompts for Stitch-driven screen generation.

Official
Advanced
Montte-erpMontte-erp
6

ui-ux-expert

Provide UI/UX design guidance for accessibility, design systems, and responsive interfaces.

Official
Advanced
zoomzoom
7

zoom-mcp/whiteboard

Guide Zoom Whiteboard MCP authentication, endpoint usage, and whiteboard_id mapping.

Official
Advanced