@morya-ui/setup 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/template/.agents/skills/morya-ui-pages/SKILL.md +30 -22
- package/template/.agents/skills/morya-ui-pages/references/component-index.md +3 -1
- package/template/.agents/skills/morya-ui-pages/references/decision-recipes.md +6 -5
- package/template/.agents/skills/morya-ui-pages/references/design-system.md +1 -1
- package/template/.agents/skills/morya-ui-pages/references/page-layouts.md +1 -1
- package/template/.agents/skills/morya-ui-pages/references/reference-visual-map.md +50 -0
- package/template/.agents/skills/morya-ui-pages/references/review-checklist.md +21 -7
- package/template/.agents/skills/morya-ui-pages/references/style-presets.md +25 -4
- package/template/.agents/skills/morya-ui-pages/references/visual-craft.md +3 -2
- package/template/DESIGN.md +1 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@morya-ui/setup",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.2",
|
|
5
5
|
"description": "One-shot setup for morya-ui: install the library, multi-editor MCP, Agent skills, and design config.",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://github.com/morya-space/morya-ui/tree/main/packages/setup#readme",
|
|
@@ -19,12 +19,15 @@ description: >
|
|
|
19
19
|
|
|
20
20
|
Guide agents that **consume morya-ui** across the full product surface — not only admin CRUD.
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
## Must follow (restrained)
|
|
23
23
|
|
|
24
|
-
1. **Contract** — only `M*`
|
|
25
|
-
2. **
|
|
24
|
+
1. **Contract first** — only `M*` + `--m-*` + real MCP/docs APIs. No second UI kit, no invented props.
|
|
25
|
+
2. **Default quieter** — no reference / vague ask → quiet flat on-token face. Do not invent glass, neon, aurora, or marketing heroes.
|
|
26
|
+
3. **Reference wins atmosphere** — if the user gives a screenshot/mock/description, follow traits that appear there (map via [reference-visual-map.md](references/reference-visual-map.md)); do **not** strip them to “look safer,” and do **not** add decorations the reference lacks.
|
|
27
|
+
4. **Say the direction** — in the reply, one line `style:` + optional `signature:` (e.g. `style: quiet flat`, or `style: follow reference — soft frosted cards + round primary`).
|
|
28
|
+
5. **Gate** — `validate_usage` + `validate_page({ brief })`. With a visual reference, also run the fidelity check in [review-checklist.md](references/review-checklist.md).
|
|
26
29
|
|
|
27
|
-
**Default build path
|
|
30
|
+
**Default build path:** pin surface → **`map_reference` / `recommend_page({ brief, density })`** → decisions + snippets → shell only if needed → craft → **`validate_usage` + `validate_page`**. Golden pages are an **optional** block-order check.
|
|
28
31
|
|
|
29
32
|
When companions conflict with this skill or project `DESIGN.md`, **this skill wins**.
|
|
30
33
|
|
|
@@ -76,6 +79,7 @@ For Express / branded Account moments, also draft a tiny **design plan** (see [v
|
|
|
76
79
|
| Reference fidelity | **`map_reference`** (description / requiredBlocks / density) → follow `mapping` | Describe blocks in chat; compose matching snippets |
|
|
77
80
|
| Ops pattern + snippets | `recommend_page({ density, brief })` → **`suggestedSnippets`** / **`referenceMapping`** / **`get_page_snippet`** + **`recommend_component`** | [page-layouts.md](references/page-layouts.md) + [decision-recipes.md](references/decision-recipes.md) |
|
|
78
81
|
| Style direction | `recommend_page({ style })` / **`get_style_direction`** | [style-presets.md](references/style-presets.md) |
|
|
82
|
+
| Screenshot / mock → library moves | — | [reference-visual-map.md](references/reference-visual-map.md) |
|
|
79
83
|
| Signature shells (Account / Express / Flow) | **`get_style_shells`** (`account-split`, `express-hero`, …) | [visual-craft.md](references/visual-craft.md) |
|
|
80
84
|
| Account / Express / empty / result | snippets (`auth-split-shell`, `empty-block`, `result-block`, …) + `recommend_page` | [surfaces.md](references/surfaces.md) |
|
|
81
85
|
| Optional whole-page block order | `get_golden_page` only when unsure of section order or user asks to mirror a golden sample | [page-layouts.md](references/page-layouts.md) |
|
|
@@ -112,19 +116,20 @@ For Express / branded Account moments, also draft a tiny **design plan** (see [v
|
|
|
112
116
|
|
|
113
117
|
Run **before** delivery. Do not stop at a structurally correct shell.
|
|
114
118
|
|
|
115
|
-
1. Resolve **style direction** ([style-presets.md](references/style-presets.md)) — reference
|
|
116
|
-
2.
|
|
117
|
-
|
|
118
|
-
- **
|
|
119
|
-
- **
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
-
|
|
123
|
-
-
|
|
124
|
-
-
|
|
125
|
-
-
|
|
126
|
-
|
|
127
|
-
5.
|
|
119
|
+
1. Resolve **style direction** ([style-presets.md](references/style-presets.md)) — reference first; else cues; else **ask**; else quieter flat. **No preset catalog.**
|
|
120
|
+
2. If a screenshot/mock is present, translate visible traits with [reference-visual-map.md](references/reference-visual-map.md) — approximate with `M*` + tokens; state what cannot be 1:1.
|
|
121
|
+
3. Apply lane craft from [visual-craft.md](references/visual-craft.md):
|
|
122
|
+
- **Ops / Operate:** resolved direction + § Ops polish (one primary, menu icons, `MStatus`, designed empty, no decorative cards). Stay restrained unless the reference shows more.
|
|
123
|
+
- **Account / Flow:** calm shell; form errors via `errorMessage` / token `role="alert"`.
|
|
124
|
+
- **Express / Persuade:** short design plan + one signature **only when** the brief/reference calls for it; optional 1–2 token-only motions via `useMotion`.
|
|
125
|
+
4. **If companions are already installed** (see [optional-companions.md](references/optional-companions.md)):
|
|
126
|
+
- Express / brand → may load **`frontend-design`** after contract **and style direction** are fixed
|
|
127
|
+
- User asks 更大胆/更克制/polish/audit → may load **`impeccable`** **inside** the resolved direction
|
|
128
|
+
- Mood keywords only → optional **`ui-ux-pro-max`** search → map to `--m-*`
|
|
129
|
+
- a11y → optional **`fixing-accessibility`**
|
|
130
|
+
- Max **one** visual companion; remediate with `M*` + `--m-*`; strip companion atmosphere the user/reference did not ask for
|
|
131
|
+
5. Companions absent → do **not** block or ask to install mid-task.
|
|
132
|
+
6. **All lanes:** responsive, focus visible, domain-real copy. State `style:` (+ `signature:` when useful) before delivery.
|
|
128
133
|
|
|
129
134
|
Named polish modes (`quieter` | `bolder` | `clarify` | `audit` | …): extra pass when the user asks to improve an existing screen.
|
|
130
135
|
|
|
@@ -136,7 +141,7 @@ Use [review-checklist.md](references/review-checklist.md) (contract + craft sect
|
|
|
136
141
|
|
|
137
142
|
1. `validate_usage` on the page (or per component) — API accuracy gate
|
|
138
143
|
2. `validate_page` with the **same `brief`** used in `map_reference` / `recommend_page` — **`ok` must be true** (contract); craft suggestions addressed or consciously waived
|
|
139
|
-
3.
|
|
144
|
+
3. **Required** fidelity check when the user gave a visual reference (see [review-checklist.md](references/review-checklist.md) § Reference fidelity)
|
|
140
145
|
|
|
141
146
|
Do not deliver with unresolved `unknown-prop` / `unknown-event` or `validate_page` contract failures (`brief-missing-*`, wrong table props, …).
|
|
142
147
|
|
|
@@ -150,7 +155,8 @@ Do not deliver with unresolved `unknown-prop` / `unknown-event` or `validate_pag
|
|
|
150
155
|
- Ops surfaces follow page-layout **block order** — do not replace them with marketing heroes.
|
|
151
156
|
- Express surfaces still use `M*` for controls and `--m-*` for color/space; do not introduce shadcn/Element/etc. stacks suggested by generic design skills.
|
|
152
157
|
- Soft-load companions only; never require Impeccable / UI-UX-Pro-Max / Frontend Design to be installed.
|
|
153
|
-
-
|
|
158
|
+
- **Restrained by default:** do **not** invent decorative glass / neon / aurora / neumorph / full-page gradients when there is no reference/description asking for them.
|
|
159
|
+
- **With a reference:** follow atmosphere that is **visible in the reference**; do not “sanitize” it away; do not add extra decoration beyond it. Approximate with tokens — pixel-perfect art is out of scope.
|
|
154
160
|
- Do **not** add new golden-page craft variants (`list-page-*`); express density/sider via style direction + polish.
|
|
155
161
|
|
|
156
162
|
## Soft companions
|
|
@@ -171,7 +177,8 @@ Routing, conflict rules, and load budget: [optional-companions.md](references/op
|
|
|
171
177
|
- Vue 3 `<script setup lang="ts">`.
|
|
172
178
|
- PascalCase `M*` in templates.
|
|
173
179
|
- Domain-real copy and data shapes (not placeholder “示例 / Name / No data” when the brief names a product).
|
|
174
|
-
- Scoped CSS minimal; tokens only (`color-mix` OK). Prefer **flat** surfaces; gradients / glass / glow
|
|
180
|
+
- Scoped CSS minimal; tokens only (`color-mix` OK). Prefer **flat** surfaces by default; gradients / glass / glow only from user/reference (control widths may be inline).
|
|
181
|
+
- Reply includes `style:` (and `signature:` when following a richer reference).
|
|
175
182
|
- Craft pass completed for the lane (see step 5).
|
|
176
183
|
- For multi-file asks: sensible `views/` / `components/` split; otherwise one SFC is fine.
|
|
177
184
|
|
|
@@ -181,11 +188,12 @@ Routing, conflict rules, and load budget: [optional-companions.md](references/op
|
|
|
181
188
|
| --- | --- |
|
|
182
189
|
| [surfaces.md](references/surfaces.md) | Choosing / composing non-Ops (and hybrid) surfaces |
|
|
183
190
|
| [page-layouts.md](references/page-layouts.md) | Ops block-order checklists (fill with snippets) |
|
|
184
|
-
| [style-presets.md](references/style-presets.md) | Style resolution (no preset catalog) |
|
|
191
|
+
| [style-presets.md](references/style-presets.md) | Style resolution (no preset catalog); reference vs restrained default |
|
|
192
|
+
| [reference-visual-map.md](references/reference-visual-map.md) | Screenshot/mock traits → `M*` / token / shell moves |
|
|
185
193
|
| [visual-craft.md](references/visual-craft.md) | Ops polish, shell recipes, anti-defaults, polish modes |
|
|
186
194
|
| [design-system.md](references/design-system.md) | Principles, tokens, bans |
|
|
187
195
|
| [component-index.md](references/component-index.md) | Catalog + decision-id index |
|
|
188
196
|
| [decision-recipes.md](references/decision-recipes.md) | Scenario → component → key props (generated; offline MCP mirror) |
|
|
189
197
|
| [feedback.md](references/feedback.md) | message / toast / MMessage |
|
|
190
|
-
| [review-checklist.md](references/review-checklist.md) | Pre-delivery checks |
|
|
198
|
+
| [review-checklist.md](references/review-checklist.md) | Pre-delivery checks + reference fidelity |
|
|
191
199
|
| [optional-companions.md](references/optional-companions.md) | Combining with external design skills |
|
|
@@ -18,7 +18,7 @@ Full API: docs site `/components` or MCP (`get_component`, `search`, `validate_u
|
|
|
18
18
|
|
|
19
19
|
## Actions
|
|
20
20
|
|
|
21
|
-
`MButton` / `MButtonGroup` (primary `
|
|
21
|
+
`MButton` / `MButtonGroup` (primary `type="primary"`, danger `danger` / `color="danger"`; counts via wrapping `MBadge`, not Button props), `MSplitButton` (main action + menu), `MSpeedDial` (floating action cluster)
|
|
22
22
|
|
|
23
23
|
## Forms · inputs
|
|
24
24
|
|
|
@@ -93,6 +93,8 @@ Open MCP `recommend_component({ decision })` or the matching section in [decisio
|
|
|
93
93
|
| `MDropdown` as form enum | `MSelect` (`selection-choice`) |
|
|
94
94
|
| `MTable` `:data` | `:rows` (`data-display-choice`) |
|
|
95
95
|
| `<MMessage severity>` as an inline alert | Field `errorMessage`, or token `role="alert"` (`feedback-choice`) |
|
|
96
|
+
| `MButton severity="primary"` / `severity="danger"` | `type="primary"` / `danger` or `color="danger"` |
|
|
97
|
+
| `MButton badge` / `badgeColor` | Wrap with `MBadge` (`status-label-choice`) |
|
|
96
98
|
| Hand `<table>` | `MTable` |
|
|
97
99
|
| Hand modal div | `MDialog` / `MConfirmDialog` |
|
|
98
100
|
| Hand spinner or `MProgressSpinner` as a region / page mask | `MLoading` / `v-loading` (`loading-choice`) |
|
|
@@ -32,7 +32,7 @@ This file is the **offline** mirror for agents without MCP.
|
|
|
32
32
|
- v-model / modelValue 控制开关(不要用 visible)
|
|
33
33
|
- header 或 title 设弹窗标题
|
|
34
34
|
- width 约 32rem 适配短表单(见 form-in-dialog snippet)
|
|
35
|
-
- 表单字段用 fluid;主按钮
|
|
35
|
+
- 表单字段用 fluid;主按钮 type="primary"
|
|
36
36
|
|
|
37
37
|
**Recipe · slots**
|
|
38
38
|
|
|
@@ -117,7 +117,7 @@ This file is the **offline** mirror for agents without MCP.
|
|
|
117
117
|
**Recipe · events**
|
|
118
118
|
|
|
119
119
|
- MForm @submit(或 @submit.prevent)
|
|
120
|
-
- 提交按钮 type="submit" +
|
|
120
|
+
- 提交按钮 html-type="submit" + type="primary"
|
|
121
121
|
|
|
122
122
|
**Related snippets**
|
|
123
123
|
|
|
@@ -770,7 +770,7 @@ This file is the **offline** mirror for agents without MCP.
|
|
|
770
770
|
**Recipe · props**
|
|
771
771
|
|
|
772
772
|
- 左侧标题、右侧主按钮
|
|
773
|
-
- 主按钮
|
|
773
|
+
- 主按钮 type="primary";全页仅一个主按钮
|
|
774
774
|
- 批量操作条也可放工具栏区
|
|
775
775
|
|
|
776
776
|
**Recipe · slots**
|
|
@@ -1282,6 +1282,7 @@ This file is the **offline** mirror for agents without MCP.
|
|
|
1282
1282
|
**Anti-patterns**
|
|
1283
1283
|
|
|
1284
1284
|
- 独立状态文案用 Badge → Status / Tag
|
|
1285
|
+
- MButton badge / badgeColor → 用 MBadge 包裹按钮
|
|
1285
1286
|
|
|
1286
1287
|
|
|
1287
1288
|
---
|
|
@@ -1588,7 +1589,7 @@ This file is the **offline** mirror for agents without MCP.
|
|
|
1588
1589
|
- v-model / modelValue
|
|
1589
1590
|
- header + message
|
|
1590
1591
|
- acceptLabel / rejectLabel
|
|
1591
|
-
-
|
|
1592
|
+
- acceptColor="danger" 用于删除
|
|
1592
1593
|
|
|
1593
1594
|
**Recipe · events**
|
|
1594
1595
|
|
|
@@ -1620,7 +1621,7 @@ This file is the **offline** mirror for agents without MCP.
|
|
|
1620
1621
|
**Recipe · props**
|
|
1621
1622
|
|
|
1622
1623
|
- v-model / modelValue
|
|
1623
|
-
- message;
|
|
1624
|
+
- message;acceptColor="danger" 按需
|
|
1624
1625
|
- target 锚定触发元素(或 position)
|
|
1625
1626
|
- placement top|bottom|left|right
|
|
1626
1627
|
|
|
@@ -6,7 +6,7 @@ Canonical long form lives in project-root `DESIGN.md` when the AI config pack is
|
|
|
6
6
|
|
|
7
7
|
1. **Components first** — layout, forms, tables, overlays use `M*` from `morya-ui`, not equivalent hand-rolled DOM.
|
|
8
8
|
2. **Tokens first** — color, space, radius, shadow, motion via `--m-*`. No raw `#hex` / `rgb()` in page styles.
|
|
9
|
-
3. **Semantic actions** — primary work uses `MButton
|
|
9
|
+
3. **Semantic actions** — primary work uses `MButton type="primary"`; destructive uses `danger` / `color="danger"` or confirm dialogs. Badge / Tag / Alert still use `severity`.
|
|
10
10
|
4. **Accessibility** — fields have visible labels; icon buttons have `aria-label`; overlays dismiss with Esc (library default).
|
|
11
11
|
5. **ConfigProvider** — wrap the app (or isolated demo) in `MConfigProvider` for locale, theme, density, overlay mount.
|
|
12
12
|
|
|
@@ -118,7 +118,7 @@ Inline style is acceptable for control widths (e.g. filter `width: 14rem`).
|
|
|
118
118
|
2. `MPageHeader` (title + short description)
|
|
119
119
|
3. `MTabs` with **`v-model` + `:tabs`** (not `:items` / `:value`)
|
|
120
120
|
4. Per tab: `MPageSection variant="form"` + `MForm` + save in `variant="actions"`
|
|
121
|
-
5. Dangerous zone last: `
|
|
121
|
+
5. Dangerous zone last: `MButton danger` (or `color="danger"`) + confirm
|
|
122
122
|
|
|
123
123
|
## Wizard — block order
|
|
124
124
|
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# Reference visual map (emergency only)
|
|
2
|
+
|
|
3
|
+
Use this **only when the user provides a screenshot, mock, URL, or “像 XX”**.
|
|
4
|
+
It is **not** a default style catalog. Without a reference, stay quieter ([style-presets.md](style-presets.md)).
|
|
5
|
+
|
|
6
|
+
Goal: translate visible traits into **`M*` + `--m-*`** moves. Prefer approximation over a second UI kit. Pixel-perfect art / custom illustrations are out of scope unless assets already exist in the project.
|
|
7
|
+
|
|
8
|
+
## Conflict rule
|
|
9
|
+
|
|
10
|
+
| Situation | Do |
|
|
11
|
+
| --- | --- |
|
|
12
|
+
| No reference | Quiet flat / restrained Ops polish. Do not invent glass, neon, aurora, wash, or marketing heroes. |
|
|
13
|
+
| Reference shows a trait | Follow that trait with tokens/`M*`. Do not strip it to “look safer.” |
|
|
14
|
+
| Reference does **not** show a trait | Do not add it. |
|
|
15
|
+
| Trait cannot be 1:1 | Approximate; say so in `signature:` / delivery notes. |
|
|
16
|
+
|
|
17
|
+
## Structure first (always)
|
|
18
|
+
|
|
19
|
+
Call MCP **`map_reference`** / `recommend_page({ brief })` for blocks (`filters`, `table`, `kpi`, `auth`, …).
|
|
20
|
+
This file only covers **visual traits** after structure mapping exists.
|
|
21
|
+
|
|
22
|
+
## Trait → library move
|
|
23
|
+
|
|
24
|
+
| If you see… | Prefer… | Avoid… |
|
|
25
|
+
| --- | --- | --- |
|
|
26
|
+
| Soft tinted page background | Light `color-mix` wash on page shell from `--m-color-primary` / surface (small %) | Raw hex wash; stacked aurora meshes |
|
|
27
|
+
| Frosted / translucent cards | Semi-opaque `--m-color-surface` + border + soft `--m-shadow-*`; optional limited `backdrop-filter` only if clearly in the reference | Heavy multi-layer glass on every control |
|
|
28
|
+
| Soft elevated cards (no blur) | `MCard` / section surface + `--m-shadow-sm/md` + `--m-radius-md` | Extra nested cards for decoration only |
|
|
29
|
+
| Pill / capsule primary CTA | `MButton type="primary" shape="round"` — **one** in the main viewport | Multiple filled primaries |
|
|
30
|
+
| Quiet secondary actions | `MButton type="text"` / default outlined | Competing solid colors |
|
|
31
|
+
| Soft status / category chips | `MStatus` for state; `MTag` for labels; soft severity — not a row of solid blocks | Decorative `MTag` where `MStatus` belongs |
|
|
32
|
+
| Count on a control | Wrap host with `MBadge` | Invented `MButton badge` props |
|
|
33
|
+
| Left brand art + right form | `auth-split-shell` / Account split; art slot = project asset or simple token panel | Hand-rolled auth outside `MForm` |
|
|
34
|
+
| Empty state with illustration | `MEmpty` + `illustration` / `#illustration` when available; clear next action | Blank table with no empty |
|
|
35
|
+
| Dense admin table + filters | Ops block order + `list-filters-*` / `MTable`; keep chrome restrained even if reference is prettier | Marketing hero above CRUD |
|
|
36
|
+
| Dark chrome + bright chart accents | Dark theme tokens + restrained accent; charts are project/chart lib territory | Full-page neon glow stacks copied literally |
|
|
37
|
+
| Soft blue primary / lilac accents | Theme `--m-color-primary` (and related) overrides — not page-local hex soup | Second palette unrelated to tokens |
|
|
38
|
+
|
|
39
|
+
## Delivery lines (required with a reference)
|
|
40
|
+
|
|
41
|
+
```text
|
|
42
|
+
style: follow reference — <one short reading>
|
|
43
|
+
signature: <one visible cue you kept, e.g. round primary + light card elevation>
|
|
44
|
+
approx: <what you could not 1:1, if any>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Fidelity bar
|
|
48
|
+
|
|
49
|
+
Match: block order, primary CTA role, density, status treatment, and **atmosphere that is clearly in the reference**.
|
|
50
|
+
Do not require: identical illustration artwork, identical blur strength, or non-`M*` chrome.
|
|
@@ -17,24 +17,38 @@
|
|
|
17
17
|
## Craft (all lanes — default pass)
|
|
18
18
|
|
|
19
19
|
- [ ] Style direction resolved: followed user reference/description, or inferred from clear cues, or **asked** when uncertain — never silent invent; **no preset catalog**
|
|
20
|
-
- [ ]
|
|
21
|
-
- [ ]
|
|
20
|
+
- [ ] Reply states `style:` (and `signature:` when a richer reference exists)
|
|
21
|
+
- [ ] Default stays restrained when there is **no** reference (quiet flat / Ops polish)
|
|
22
22
|
- [ ] Lane craft from [visual-craft.md](visual-craft.md) applied
|
|
23
23
|
- [ ] If companions ran: still only `M*` + `--m-*`; no second kit ([optional-companions.md](optional-companions.md))
|
|
24
24
|
- [ ] At most one primary filled button in the main viewport
|
|
25
25
|
- [ ] Copy is domain-real; empty / error states say what to do next
|
|
26
26
|
- [ ] Numeric table columns use `align: 'end'` + tabular nums when amounts/counts are shown
|
|
27
|
-
- [ ] No AI-default look clusters
|
|
28
|
-
- [ ] No unearned atmosphere: stacked radial+linear washes, purple mesh, frosted glass, neon glow stacks
|
|
27
|
+
- [ ] No **unearned** AI-default look clusters (reference-visible atmosphere is allowed — see [style-presets.md](style-presets.md))
|
|
29
28
|
- [ ] Motion (if any) is 1–3 intentional moments and follows `useMotion` / `data-m-motion`
|
|
30
29
|
- [ ] Brand differences via theme `--m-*` overrides, not page hex
|
|
31
30
|
|
|
32
|
-
##
|
|
31
|
+
## Reference fidelity (required when user gave a visual reference)
|
|
32
|
+
|
|
33
|
+
Structure:
|
|
34
|
+
|
|
35
|
+
- [ ] `map_reference` / `recommend_page({ brief })` mapping blocks present (filters/table/status/… as required)
|
|
36
|
+
- [ ] Same `brief` passed to `validate_page`; contract `ok`
|
|
37
|
+
|
|
38
|
+
Visual (use [reference-visual-map.md](reference-visual-map.md)):
|
|
39
|
+
|
|
40
|
+
- [ ] Atmosphere present in the reference was approximated (not stripped “to be safe”)
|
|
41
|
+
- [ ] Decorations **absent** from the reference were not invented
|
|
42
|
+
- [ ] Primary CTA role/shape roughly matches (e.g. round primary when the reference shows a pill)
|
|
43
|
+
- [ ] Density and status treatment roughly match
|
|
44
|
+
- [ ] Delivery notes include `style:` / `signature:` / `approx:` when needed
|
|
45
|
+
|
|
46
|
+
Screenshot self-check:
|
|
33
47
|
|
|
34
48
|
1. Start the consumer app locally (Vite / Nuxt preview).
|
|
35
49
|
2. Open the generated route; capture the first viewport.
|
|
36
|
-
3. Compare to the reference
|
|
37
|
-
4. If blocks are missing, fix via snippets + re-run `validate_page({ brief })`.
|
|
50
|
+
3. Compare to the reference on the bullets above — not pixel-perfect chrome or custom illustration art.
|
|
51
|
+
4. If blocks or required atmosphere are missing, fix via snippets/tokens + re-run `validate_page({ brief })`.
|
|
38
52
|
|
|
39
53
|
If Playwright / `webapp-testing` is available in the project, prefer an automated screenshot; otherwise a manual capture is enough.
|
|
40
54
|
## Ops
|
|
@@ -2,11 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
Golden pages lock **block order and APIs**. They are **not** the only allowed look. There is **no** named style-preset table (`simple` / `glass` / …). Resolve the look from the **user**, then map onto `M*` + `--m-*`.
|
|
4
4
|
|
|
5
|
+
**Stance:** this skill stays **restrained by default**. Rich atmosphere is allowed when the user brings a reference or clear description — not as everyday invention.
|
|
6
|
+
|
|
7
|
+
## Conflict rule (required)
|
|
8
|
+
|
|
9
|
+
| Case | Rule |
|
|
10
|
+
| --- | --- |
|
|
11
|
+
| **No reference** | Quieter flat / restrained Ops. Do not invent glass, neon, aurora, purple mesh, or marketing heroes. |
|
|
12
|
+
| **Has reference** | Follow traits **visible in the reference** (see [reference-visual-map.md](reference-visual-map.md)). Do not sanitize them away to “look safer.” Do not add decorations the reference lacks. |
|
|
13
|
+
| **Anti-defaults** | Apply only to **unearned** decoration (not present in user reference/description). |
|
|
14
|
+
|
|
5
15
|
## Resolution order (required)
|
|
6
16
|
|
|
7
17
|
1. **User reference or explicit description (highest)**
|
|
8
18
|
Screenshot / mock / existing page / URL / “像 XX”, or clear words (“毛玻璃一点”、“深蓝科技风”).
|
|
9
|
-
**Must follow.** Remap to `--m-*` + `M
|
|
19
|
+
**Must follow.** Remap to `--m-*` + `M*` via [reference-visual-map.md](reference-visual-map.md). Do not switch kits, do not “improve” into another face.
|
|
10
20
|
|
|
11
21
|
2. **Clear prompt cues (when not explicit)**
|
|
12
22
|
Industry / mood words in the brief → infer and **state your reading in one sentence**.
|
|
@@ -44,14 +54,23 @@ Pass `density` to `recommend_page` / `map_reference` — do not rely only on reg
|
|
|
44
54
|
|
|
45
55
|
When the user provides a screenshot / mock / “像 XX”, call **`map_reference`** (or pass `brief` into `recommend_page`) with:
|
|
46
56
|
|
|
47
|
-
- `description` — what you see (layout, density, primary CTA)
|
|
57
|
+
- `description` — what you see (layout, density, primary CTA, **atmosphere cues**)
|
|
48
58
|
- `requiredBlocks` — e.g. `filters`, `table`, `status`, `kpi`, `auth`
|
|
49
59
|
- `requiredComponents` — e.g. `Table`, `Status`
|
|
50
60
|
- `density` / `primaryAction` when visible
|
|
51
61
|
|
|
52
|
-
Then compose
|
|
62
|
+
Then compose structure via returned `mapping[].snippetId`, and map visual traits with [reference-visual-map.md](reference-visual-map.md). Pass the **same brief** to `validate_page` so missing blocks fail as contract issues. Run the **reference fidelity** checklist before delivery.
|
|
53
63
|
|
|
54
|
-
|
|
64
|
+
In the reply, state:
|
|
65
|
+
|
|
66
|
+
```text
|
|
67
|
+
style: follow reference — …
|
|
68
|
+
signature: …
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Anti-defaults (unearned only)
|
|
72
|
+
|
|
73
|
+
Block these when the **user/reference did not ask**:
|
|
55
74
|
|
|
56
75
|
- Purple→indigo / aurora / mesh washes
|
|
57
76
|
- Warm cream + serif + terracotta kit
|
|
@@ -59,6 +78,8 @@ Then compose **only** via returned `mapping[].snippetId`. Pass the **same brief*
|
|
|
59
78
|
- Unsolicited glassmorphism, neon glow stacks, neumorph on dense tables
|
|
60
79
|
- Companion “atmosphere” that overrides the user’s words
|
|
61
80
|
|
|
81
|
+
If the reference **shows** soft frosted cards or a tinted wash, reproducing a **tokenized approximation** is following the reference — not an anti-default violation.
|
|
82
|
+
|
|
62
83
|
## How to apply
|
|
63
84
|
|
|
64
85
|
1. Map reference → snippets (`map_reference` / `recommend_page.referenceMapping`).
|
|
@@ -77,7 +77,7 @@ Ops beauty = alignment + semantics + restraint + the right `M*` for the job, **n
|
|
|
77
77
|
|
|
78
78
|
## Anti-default looks
|
|
79
79
|
|
|
80
|
-
Unless the user **asks** or a reference **shows** them, do not use:
|
|
80
|
+
**Default is restrained.** Unless the user **asks** or a reference **shows** them, do not use:
|
|
81
81
|
|
|
82
82
|
1. Cream + serif + terracotta
|
|
83
83
|
2. Acid-green / dual neon on black
|
|
@@ -87,7 +87,8 @@ Unless the user **asks** or a reference **shows** them, do not use:
|
|
|
87
87
|
6. Unsolicited glass, neumorph on dense tables, full-page gradients
|
|
88
88
|
7. Stacked radial + linear “atmosphere” brand panels
|
|
89
89
|
|
|
90
|
-
**Token gradients are not a free pass**
|
|
90
|
+
**Token gradients are not a free pass** without user/reference ask.
|
|
91
|
+
If a **reference shows** frosted cards or a light tinted wash, a tokenized approximation is following the reference — see [reference-visual-map.md](reference-visual-map.md). Do not invent richer atmosphere beyond the reference.
|
|
91
92
|
|
|
92
93
|
## Shell recipes (token-only — defaults are flat)
|
|
93
94
|
|
package/template/DESIGN.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
1. **组件优先**:交互与布局使用库内 `M*`,不手写等价 DOM。
|
|
9
9
|
2. **令牌优先**:颜色、间距、圆角、阴影、动效使用 `--m-*`;禁止裸 `#hex` / `rgb()`(`scripts/check-raw-colors.mjs` 可扫描)。
|
|
10
|
-
3. **语义一致**:主操作 `
|
|
10
|
+
3. **语义一致**:主操作 `type="primary"`;破坏性操作用 `danger` / `color="danger"` 或确认。Badge / Tag / Alert 仍用 `severity`。
|
|
11
11
|
4. **可访问性**:控件有可访问名称;仅图标的按钮带 `aria-label`;浮层可键盘关闭。
|
|
12
12
|
5. **单一事实源**:组件 API 以 MCP / 文档为准,禁止臆造 prop、event、slot。
|
|
13
13
|
|