④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
This commit is contained in:
admin committed
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,200 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/default/tokens.css
|
||||
*
|
||||
* Structured token bindings for "Neutral Modern" — the canonical
|
||||
* starter design system. This file is the *machine-readable* form of
|
||||
* the values described in `DESIGN.md`. Agents are expected to paste
|
||||
* the `:root { … }` block verbatim into the first `<style>` of every
|
||||
* artifact they generate against this design system, then reference
|
||||
* tokens via `var(--name)` from then on.
|
||||
*
|
||||
* Why this file exists:
|
||||
* DESIGN.md gives humans context ("Accent #2F6FEB — primary CTAs"),
|
||||
* but agents have to translate prose names like "Accent" into the
|
||||
* standard token names the lint enforces (`--accent`). That
|
||||
* translation is where token misuse happens. This file pre-translates
|
||||
* the brand once, so agents copy structure instead of inventing it.
|
||||
*
|
||||
* Contract sources:
|
||||
* - Standard token names: craft/color.md
|
||||
* (--bg / --surface / --fg / --muted / --border / --accent
|
||||
* / --success / --warn / --danger)
|
||||
* - Display-face contract: craft/anti-ai-slop.md
|
||||
* (--font-display, must be referenced via var())
|
||||
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
|
||||
* (raw-hex >12 outside :root → P1; indigo laundering → P0)
|
||||
*
|
||||
* Schema notes (the shared schema grew from kami's stress test —
|
||||
* see design-systems/kami/tokens.css for the rich form, and the
|
||||
* #Gap N tags below for what each addition resolves):
|
||||
* #Gap 1 — 4-level foreground ramp (fg / fg-2 / muted / meta)
|
||||
* #Gap 2 — 3-level surface (bg / surface / surface-warm)
|
||||
* #Gap 3 — 2-level border (border / border-soft)
|
||||
* #Gap 4 — accent-hover binds to value, not formula
|
||||
* #Gap 5 — ring elevation as a first-class level (--elev-ring)
|
||||
*
|
||||
* Default doesn't differentiate every level kami needs, so the
|
||||
* shallow tokens (`--fg-2`, `--meta`, `--surface-warm`, `--border-soft`)
|
||||
* collapse to their richer siblings via `var()`. The names still
|
||||
* exist so components can reference them uniformly across brands.
|
||||
*
|
||||
* Keep this file additive: never invent token names not also documented
|
||||
* in DESIGN.md or the craft contracts. New brands cloning this template
|
||||
* should overwrite values, not rename keys.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface (3 levels — #Gap 2) ─────────────────────────────────
|
||||
* Per craft/color.md: never pure black, never pure white. Default
|
||||
* uses #FAFAFA for bg and #FFFFFF for surface — the cream-to-white
|
||||
* contrast gives cards lift without a shadow. `--surface-warm` is a
|
||||
* schema slot for brands that need a tertiary tier (kami's warm-sand
|
||||
* button bg); default has no third tier and aliases it to surface. */
|
||||
--bg: #fafafa;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: var(--surface); /* alias — default has no warm tier */
|
||||
|
||||
/* ─── Foreground ramp (4 levels — #Gap 1) ───────────────────────
|
||||
* Default differentiates only two text levels (primary + muted).
|
||||
* `--fg-2` and `--meta` are schema slots for brands with richer
|
||||
* ramps (kami uses near-black / dark-warm / olive / stone). They
|
||||
* alias here so components targeting the full ramp resolve. */
|
||||
--fg: #111111;
|
||||
--fg-2: var(--fg); /* alias — default has no secondary tier */
|
||||
--muted: #6b6b6b;
|
||||
--meta: var(--muted); /* alias — default has no metadata tier */
|
||||
|
||||
/* ─── Border (2 levels — #Gap 3) ────────────────────────────────
|
||||
* Default has one border weight; `--border-soft` is a schema slot
|
||||
* for brands with row-separator vs card-edge differentiation. */
|
||||
--border: #e5e5e5;
|
||||
--border-soft: var(--border); /* alias — default has no soft tier */
|
||||
|
||||
/* ─── Accent ──────────────────────────────────────────────────────
|
||||
* Cobalt — primary CTAs, links, ONE hero element per screen.
|
||||
* Hard cap of 2 visible uses per screen is enforced by lint
|
||||
* (`accent-overuse` P1 fires at >6 inline occurrences). */
|
||||
--accent: #2f6feb;
|
||||
--accent-on: #ffffff; /* fg when accent is the bg (e.g. button label) */
|
||||
|
||||
/* ─── Accent states (#Gap 4) ────────────────────────────────────
|
||||
* Hover and active variants for any element using --accent as bg.
|
||||
* Default's mid-luminance cobalt admits a black-mix formula
|
||||
* cleanly; that's a brand-specific binding, NOT a schema rule.
|
||||
* kami binds --accent-hover to var(--accent) (no color shift,
|
||||
* hover via elevation) because ink-blue is too dark for further
|
||||
* darkening to read; other brands with light accents must
|
||||
* hand-pick.
|
||||
*
|
||||
* Schema rule: every brand provides --accent-hover and
|
||||
* --accent-active. The binding strategy (formula / identity /
|
||||
* hand-picked) is brand-decided.
|
||||
*
|
||||
* Why these two are tokens (and other tints stay inline):
|
||||
* - cross-component (button, chip, tab, dropdown all need them)
|
||||
* - cross-mode reversal (dark-mode hover should mix white, not
|
||||
* black — token re-binding is one line per mode)
|
||||
* - cross-brand customization (formula breaks on light accents)
|
||||
* - lint-enforceable contract (every brand must provide these)
|
||||
* Other inline `color-mix(...)` calls in components don't yet hit
|
||||
* any of the above — promote them to tokens when a second use
|
||||
* appears. */
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
/* ─── Semantic ────────────────────────────────────────────────────
|
||||
* Reserved for state, not decoration. Keep total semantic-color
|
||||
* pixels under 5% of the surface. */
|
||||
--success: #17a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
/* ─── Typography ──────────────────────────────────────────────────
|
||||
* Inter for display is the documented "modern minimal" override
|
||||
* to anti-ai-slop's serif-display rule (see DESIGN.md
|
||||
* §Visual Theme & Atmosphere — "Calm, functional, quietly
|
||||
* confident"). Other brands should rebind --font-display to a
|
||||
* serif unless their direction is also tech/utility. */
|
||||
--font-display: "Inter", -apple-system, system-ui, sans-serif;
|
||||
--font-body: "Inter", -apple-system, system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "JetBrains Mono", monospace;
|
||||
|
||||
/* Type scale (px) — direct copy of DESIGN.md §Typography Rules */
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 64px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--tracking-display: -0.01em; /* applied to display sizes ≥32px */
|
||||
|
||||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||||
* 4px base unit. Section rhythm (80/48/32) lives below as named
|
||||
* tokens because DESIGN.md §Layout Principles treats them as
|
||||
* breakpoint-specific decisions, not generic spacing. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
--space-20: 80px;
|
||||
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ──────────────────────────────────────────────────────
|
||||
* Two intents: small (button/input) and medium (card/modal).
|
||||
* `--radius-pill` reserved for chips/avatars; do not use it on
|
||||
* cards or buttons. */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation (3 levels — #Gap 5) ─────────────────────────────
|
||||
* Default uses two levels (flat + raised blur shadow) per its own
|
||||
* DESIGN.md §Depth & Elevation. The schema gains `--elev-ring` as
|
||||
* a first-class level so brands using ring shadows as primary
|
||||
* elevation (kami, paper, editorial) don't need to rebind
|
||||
* --elev-raised away from blur. Default declares all three; ring
|
||||
* is available for hairline edges where a 1px border would shift
|
||||
* layout. No fourth level — that's neumorphism territory. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
|
||||
|
||||
/* ─── Focus ring ──────────────────────────────────────────────────
|
||||
* Single source of truth for keyboard-focus indicators. Every
|
||||
* `:focus-visible` rule on buttons, inputs, links, and tabs must
|
||||
* use this token — uniform behavior is itself a brand signal, and
|
||||
* craft/accessibility-baseline.md treats focus visibility as a
|
||||
* non-negotiable. Implemented as a `box-shadow` so it layers
|
||||
* outside the element without affecting layout. */
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
|
||||
/* ─── Motion ──────────────────────────────────────────────────────
|
||||
* Two durations + one easing curve, per anti-ai-slop's "short,
|
||||
* purposeful transitions (150–250ms) with stable easing". Add a
|
||||
* third duration only when a real interaction needs it; do not
|
||||
* invent `--motion-slow` speculatively. */
|
||||
--motion-fast: 150ms; /* hover, focus, micro-states */
|
||||
--motion-base: 200ms; /* general state changes */
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ──────────────────────────────────────────────────────
|
||||
* Container width and per-breakpoint gutter. Skill-side responsive
|
||||
* code reads these to decide grid columns. */
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
Reference in new issue
Block a user