Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →reference-design-contract
Use this skill when the user has taste signals, references, or a rough "like
Passed 16 of 23 test cases with the skill, and 3 of 23 without it.
and 29 more in the full report
14 fixed2 passed either way6 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 14 test cases the skill fixed. Same model, same prompt, with and without the skill.
I want to redesign our B2B analytics platform, and I've gathered some inspiration screenshots from Linear and Stripe. Before we dive into writing React components, I need a complete design specification package. Please create a standardized design system document defining our visual foundation, a decision record that breaks down what style elements to keep, change, or ignore from my inspiration files, and a short implementation handoff note for our frontend team.
| Checked | Without skill | With skill |
|---|---|---|
| Creates DESIGN.md, design-contract.md, and implementation-handoff.md. | Missed | Passed |
| Uses exact heading ## 1. Visual Theme & Atmosphere in DESIGN.md. | Missed | Passed |
| Labels evidence confidence in design-contract.md using observed, provided, or inferred categories. | Missed | Passed |
The instructions your model reads when the skill loads.
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.
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.
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.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.test cases passed, vs 3 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.