Agent skill · design visual · nexu-io
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.
Why this skill is useful
Generates a structured DESIGN.md and implementation handoff that codifies design decisions and visual direction, which the AI wouldn't reliably produce on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/reference-design-contract