mirror of
https://github.com/nexu-io/open-design.git
synced 2026-05-31 19:04:39 +07:00
Merge add4e2c43f into 53fb175855
This commit is contained in:
xinsngx
GitHub
commit
84e7fa7227
3 changed files with 392 additions and 0 deletions
130
skills/reference-design-contract/SKILL.md
Normal file
130
skills/reference-design-contract/SKILL.md
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
name: reference-design-contract
|
||||
zh_name: "参考转设计合约"
|
||||
en_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.
|
||||
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
|
||||
platform: desktop
|
||||
scenario: planning
|
||||
category: design-systems
|
||||
preview:
|
||||
type: html
|
||||
entry: example.html
|
||||
design_system:
|
||||
requires: false
|
||||
generates: true
|
||||
sections: [visual-theme, color, typography, spacing, layout, components, motion, voice, anti-patterns]
|
||||
craft:
|
||||
requires:
|
||||
- typography
|
||||
- color
|
||||
- anti-ai-slop
|
||||
inputs:
|
||||
- name: brief
|
||||
type: string
|
||||
required: true
|
||||
description: "Goal, audience, references, or the style problem to resolve"
|
||||
outputs:
|
||||
primary: DESIGN.md
|
||||
secondary:
|
||||
- design-contract.md
|
||||
- implementation-handoff.md
|
||||
- example.html
|
||||
capabilities_required:
|
||||
- file_write
|
||||
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 product. Produce DESIGN.md and an implementation handoff."
|
||||
example_prompt_i18n:
|
||||
zh-CN: "为一个开发者笔记应用创建「参考转设计合约」。方向要有编辑感、安静、触感强、认真，但不要照抄任何具体产品。输出 DESIGN.md 和实现交接说明。"
|
||||
---
|
||||
|
||||
# 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 Open Design'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.
|
||||
236
skills/reference-design-contract/example.html
Normal file
236
skills/reference-design-contract/example.html
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Reference Design Contract Example</title>
|
||||
<style>
|
||||
:root {
|
||||
--paper: #f3eee4;
|
||||
--ink: #171614;
|
||||
--muted: #6f675d;
|
||||
--line: #d7cbbb;
|
||||
--accent: #9b4d2d;
|
||||
--accent-soft: #ead6c6;
|
||||
--charcoal: #202623;
|
||||
--green: #486254;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
background:
|
||||
radial-gradient(circle at 18% 8%, rgba(155, 77, 45, 0.18), transparent 28%),
|
||||
linear-gradient(135deg, #faf7ef 0%, var(--paper) 42%, #dfd5c8 100%);
|
||||
font-family: "Avenir Next", "Trebuchet MS", sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(1160px, calc(100vw - 40px));
|
||||
margin: 0 auto;
|
||||
padding: 52px 0;
|
||||
}
|
||||
|
||||
.sheet {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(23, 22, 20, 0.12);
|
||||
background: rgba(255, 252, 244, 0.82);
|
||||
box-shadow: 0 34px 90px rgba(63, 46, 30, 0.22);
|
||||
}
|
||||
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
|
||||
gap: 40px;
|
||||
padding: 56px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 18px;
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 720px;
|
||||
margin: 0;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(44px, 7vw, 96px);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.summary {
|
||||
align-self: end;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 18px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 0.78fr 1.22fr;
|
||||
min-height: 520px;
|
||||
}
|
||||
|
||||
aside {
|
||||
padding: 38px;
|
||||
color: #f8f1e7;
|
||||
background:
|
||||
linear-gradient(145deg, rgba(32, 38, 35, 0.96), rgba(39, 54, 47, 0.94)),
|
||||
var(--charcoal);
|
||||
}
|
||||
|
||||
.meter {
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid rgba(248, 241, 231, 0.18);
|
||||
}
|
||||
|
||||
.meter div {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 20px;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid rgba(248, 241, 231, 0.18);
|
||||
color: rgba(248, 241, 231, 0.78);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.meter strong {
|
||||
color: #fff9ef;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 38px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
article {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr;
|
||||
gap: 22px;
|
||||
padding: 24px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.34);
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 22px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--green);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
article p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
border: 1px solid rgba(155, 77, 45, 0.32);
|
||||
background: var(--accent-soft);
|
||||
color: #69351f;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
header,
|
||||
.grid,
|
||||
article {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
header,
|
||||
aside,
|
||||
section {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="sheet">
|
||||
<header>
|
||||
<div>
|
||||
<p class="eyebrow">Reference Design Contract</p>
|
||||
<h1>Turn a taste signal into a buildable direction.</h1>
|
||||
</div>
|
||||
<p class="summary">This sample shows the shape of the contract: evidence first, then boundaries, then a handoff a second agent can execute without cloning the reference.</p>
|
||||
</header>
|
||||
<div class="grid">
|
||||
<aside>
|
||||
<h2>Decision stance</h2>
|
||||
<p>The product should feel like a calm editorial desk: paper warmth, serious type rhythm, tactile panels, one copper accent, and no generic neon SaaS gloss.</p>
|
||||
<div class="meter">
|
||||
<div><span>Evidence confidence</span><strong>mixed</strong></div>
|
||||
<div><span>Reference policy</span><strong>borrow qualities</strong></div>
|
||||
<div><span>Next artifact</span><strong>prototype</strong></div>
|
||||
</div>
|
||||
</aside>
|
||||
<section>
|
||||
<h2>Contract slices</h2>
|
||||
<div class="cards">
|
||||
<article>
|
||||
<h3>Keep</h3>
|
||||
<p>Editorial hierarchy, warm off-white surface, restrained accent, quiet interaction states, and roomy note-taking density.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Change</h3>
|
||||
<p>Replace any reference brand marks, subject matter, pricing, copy, and exact layout with the user's own product context.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Do not copy</h3>
|
||||
<p>No literal screenshot recreation, no proprietary UI details, no borrowed claims, no prompt-template subject copied as the final subject.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="chip-row" aria-label="Design constraints">
|
||||
<span class="chip">one accent</span>
|
||||
<span class="chip">serif display</span>
|
||||
<span class="chip">no purple glow</span>
|
||||
<span class="chip">grounded assets</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
26
skills/reference-design-contract/references/checklist.md
Normal file
26
skills/reference-design-contract/references/checklist.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# Reference Design Contract checklist
|
||||
|
||||
Use this checklist before final handoff.
|
||||
|
||||
## P0 gates
|
||||
|
||||
- [ ] `DESIGN.md` exists and uses the nine standard Open Design headings.
|
||||
- [ ] `design-contract.md` names the target artifact, audience, and evidence used.
|
||||
- [ ] Every reference is split into `Keep`, `Change`, and `Do not copy`.
|
||||
- [ ] Inferences are labeled; unverified brand facts are not presented as truth.
|
||||
- [ ] The contract picks one coherent visual stance instead of a menu of moods.
|
||||
- [ ] `implementation-handoff.md` is short enough to paste into the next generation run.
|
||||
- [ ] Anti-patterns include exact things to avoid, not only vague phrases.
|
||||
- [ ] The final response tells the user which files were produced and what to run next.
|
||||
|
||||
## Quality bar
|
||||
|
||||
The contract should let a second agent build the first artifact without asking:
|
||||
|
||||
- What is the product or surface?
|
||||
- What should be preserved from the references?
|
||||
- What must not be copied?
|
||||
- What colors, type, spacing, and component rules are binding?
|
||||
- What would make the first artifact fail review?
|
||||
|
||||
If any of those answers are missing, revise the contract before handing off.
|
||||
Loading…
Reference in a new issue