admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

Browse Source 
一、④段整套同步（用户选候选 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 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-systems/vercel/tokens.css
+270
View File
@@ -0,0 +1,270 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/vercel/tokens.css
*
* Structured token bindings for "Vercel" — the engineering-as-design
* thesis of frontend deployment: a near-white canvas, near-black text,
* one saturated blue accent, and a shadow-as-border philosophy that
* replaces the box-model edge with a layered box-shadow stack.
*
* This file pre-compiles the values described in `DESIGN.md` into the
* shared schema. Agents generating an artifact for Vercel should paste
* the `:root` block verbatim into the first `<style>` of the artifact,
* then reference everything via `var(--*)`.
*
* Brand-specific schema decisions (each one bends a schema convention
* to match Vercel's voice rather than the cross-brand default):
*
* 1. `--accent` is the Vercel/Console blue (#0070f3), not Vercel Black.
* Black is already `--fg`; the brand expresses primary CTAs by
* using `--fg` as the button background, not `--accent`. The
* `--accent` slot is reserved for the chromatic moments — links,
* focus rings, badge tints — exactly where Vercel's blue appears
* in product. Treating black as both `--fg` and `--accent` would
* collapse two distinct intents into one name and break the
* lint's "≤2 accent uses per screen" semantic.
*
* 2. `--fg` is `#171717` (Vercel Black), not `#000000`. The micro-
* warmth at the top of the gray ramp is part of the brand — pure
* black against pure white reads as harsh, and the rest of the
* neutral scale (gray-600 / 500 / 400 / 100 / 50) is calibrated
* against `#171717` not `#000000`. Bind the full four-level
* foreground ramp (#171717 → #4d4d4d → #666666 → #808080) so
* cross-brand components targeting `--fg-2` and `--meta` resolve
* to Vercel's actual gray-600 / gray-400 instead of collapsing.
*
* 3. `--border` is `rgba(0, 0, 0, 0.08)` — the literal Vercel
* shadow-as-border alpha, NOT a solid hex. DESIGN.md §1 names
* this single value as "the signature" that "replaces traditional
* borders throughout". Binding `--border` to the alpha lets
* `--elev-ring` (`0 0 0 1px var(--border)`) reproduce the Vercel
* hairline by default, and lets components reach the same value
* via `border: 1px solid var(--border)` when a real border is
* structurally necessary (e.g. image cards). `--border-soft`
* drops to `0.04` for inner-row separators that must not compete.
*
* 4. `--elev-raised` is the full multi-layer Vercel card stack
* (`0 0 0 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.04),
* 0 8px 8px -8px rgba(0,0,0,0.04), 0 0 0 1px #fafafa`), not the
* schema's single soft blur. The inner `#fafafa` ring at the
* bottom of the stack is the "subtle inner glow" DESIGN.md §6
* calls out — without it, Vercel cards lose the built-not-
* floating quality. The fourth layer's `#fafafa` is the only
* raw hex inside the `:root` block, justified because the value
* is structural to the shadow layer, not a recolorable surface.
*
* 5. `--focus-ring` is a solid 2px ring at `var(--accent)`, not the
* schema's 3px alpha glow. Vercel's `--ds-focus-color` focus
* outline is `2px solid hsla(212, 100%, 48%, 1)` everywhere;
* reproducing it as a sharp 2px box-shadow keeps keyboard focus
* legible against the white canvas without the soft halo that
* would dilute the engineered feel.
*
* 6. The type scale tops out at 48px (`--text-4xl`), not 64px+.
* DESIGN.md §3 caps display at 48px Geist W600 with
* `letter-spacing: -2.4px` (which expresses as `-0.05em` in
* `--tracking-display`). Vercel reads HUGE because the tracking
* compresses, not because the px count climbs. `--leading-tight`
* drops to `1.1` to match — display lines run shorter than the
* schema default's 1.2.
*
* 7. Section rhythm is generous: `96px` desktop, `64px` tablet,
* `48px` phone (`--section-y-*`). DESIGN.md §5 describes the
* "gallery emptiness" of 80–120px+ vertical padding between
* sections — the whitespace is the design. Container caps at
* `1200px` (Vercel's documented max content width).
*
* Source contracts:
* - Standard token names: design-systems/_schema/tokens.schema.ts
* - A2 fallback parity: design-systems/_schema/defaults.css
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
*
* Keep this file additive: never invent token names not also
* documented in DESIGN.md or the schema. The Geist family does not
* need a CDN reference here — the font stack lists OS fallbacks so
* that artifacts render acceptably even when Geist is not loaded,
* and any host that wants the real Geist face links it externally.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (3 levels — schema slot) ─────────────────────────────
* Vercel's canvas is famously achromatic: pure white page, pure
* white cards, no warm tier. `--surface-warm` aliases to surface
* because the brand explicitly forbids background-color variation
* between sections — depth comes from shadow layering, not from
* tinting one surface warmer than another. (DESIGN.md §5: "White
* sections alternate with white sections — there's no color
* variation between sections.") */
--bg: #ffffff;
--surface: #ffffff;
--surface-warm: var(--surface); /* alias — Vercel has no warm tier */
/* ─── Foreground ramp (4 levels) ──────────────────────────────────
* Gray 900 → 600 → 500 → 400, the documented neutral scale from
* DESIGN.md §2. `#171717` instead of `#000000` matters — the
* yellow-undertone warmth is what keeps the page from reading as
* harsh. `--fg-2` and `--meta` are independently bound (not aliased)
* because Vercel genuinely uses four distinct text tiers: heading
* black, body description gray, tertiary caption gray, and
* placeholder/disabled gray. */
--fg: #171717; /* Gray 900 — headings, primary text */
--fg-2: #4d4d4d; /* Gray 600 — body description */
--muted: #666666; /* Gray 500 — captions, tertiary text */
--meta: #808080; /* Gray 400 — placeholder, disabled */
/* ─── Border (2 levels) ──────────────────────────────────────────
* Shadow-as-border is THE signature: `rgba(0, 0, 0, 0.08)` at 1px
* spread replaces traditional borders throughout. Binding `--border`
* to the alpha (not a solid hex) lets `--elev-ring` reproduce the
* Vercel hairline by default, and lets `border: 1px solid var(--border)`
* paint the same value when a real border is structurally required
* (e.g. image-card top edge per DESIGN.md §4). `--border-soft`
* drops to 0.04 alpha for inner row separators that should not
* visually compete with the card edge. */
--border: rgba(0, 0, 0, 0.08); /* signature shadow-as-border alpha */
--border-soft: rgba(0, 0, 0, 0.04); /* inner row separator */
/* ─── Accent ─────────────────────────────────────────────────────
* The single chromatic move: Vercel/Console Blue. Used in links,
* focus rings, pill-badge tints, and console syntax highlighting.
* Hard cap of ≤2 visible uses per screen — DESIGN.md §7 forbids
* decorative use ("Color is functional, never decorative — workflow
* colors (Red/Pink/Blue) mark pipeline stages only").
*
* Primary CTAs in Vercel are BLACK, not blue. components.html
* encodes that pattern via `background: var(--fg)` on the primary
* button, so `--accent` stays reserved for the chromatic moments
* where blue actually appears. */
--accent: #0070f3; /* Vercel Blue / Console Blue */
--accent-on: #ffffff; /* white label on saturated blue */
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-active: color-mix(in oklab, var(--accent), black 14%);
/* ─── Semantic ───────────────────────────────────────────────────
* Vercel's marketing surface rarely renders state. We inherit the
* schema defaults (no warm-shift) because the brand has no defined
* success/warn/danger palette of its own; the workflow accents
* (Ship Red, Preview Pink, Develop Blue from DESIGN.md §2) are
* pipeline labels, not status colors, and intentionally do NOT
* bind here. */
--success: #16a34a;
--warn: #eab308;
--danger: #dc2626;
/* ─── Typography ─────────────────────────────────────────────────
* Geist Sans is Vercel's open-source typeface — `--font-display`
* and `--font-body` share the stack; size, weight, and tracking
* carry hierarchy, not face. The Arial/system fallbacks come from
* DESIGN.md §3 and ensure artifacts render legibly even when Geist
* is not loaded. Geist Mono for code and technical labels
* preserves the "developer console voice" that connects the
* marketing site to the product. */
--font-display: "Geist", "Geist Sans", -apple-system, "Segoe UI", Arial, sans-serif;
--font-body: "Geist", "Geist Sans", -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
/* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
* The scale tops out at 48px (display hero); Vercel reads BIG
* because of -0.05em compression on display, not because of a
* larger px ceiling. */
--text-xs: 12px; /* caption, metadata, tags */
--text-sm: 14px; /* button, link, small UI */
--text-base: 16px; /* body small, navigation */
--text-lg: 20px; /* body large, introductions */
--text-xl: 24px; /* card title */
--text-2xl: 32px; /* sub-heading, large card */
--text-3xl: 40px; /* section heading */
--text-4xl: 48px; /* display hero */
/* `--leading-tight` is 1.1 (DESIGN.md says 1.00–1.17 at display),
* `--leading-body` is 1.5 (the documented 16px / 24px ratio).
* `--tracking-display` is `-0.05em`, the em-relative form of
* Vercel's `-2.4px at 48px` — letter-spacing in em scales
* proportionally with size, matching DESIGN.md §3's principle
* that "tracking scales with font size". */
--leading-body: 1.5;
--leading-tight: 1.1;
--tracking-display: -0.05em;
/* ─── Spacing ────────────────────────────────────────────────────
* 4px-grid base scale. Vercel's documented spacing (DESIGN.md §5)
* uses 1–6px sub-tier increments for micro-padding (button
* `0px 6px`, etc.); those are inlined per-component because they
* are too fine to belong in the shared schema. The 4/8/12/16/20/
* 24/32/48 tier covers the structural rhythm. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
/* Section rhythm — DESIGN.md §5: 80–120px+ vertical padding between
* sections desktop, collapsing to 48px on mobile. We sit in the
* middle at 96px desktop, drop to 64px on tablet (still generous),
* and 48px on phone (the documented mobile floor). */
--section-y-desktop: 96px;
--section-y-tablet: 64px;
--section-y-phone: 48px;
/* ─── Radius ─────────────────────────────────────────────────────
* DESIGN.md §5 radius scale: 2/4/6/8/12/64/100/9999. We bind the
* four schema tiers to: 6 (button/input/functional), 8 (card),
* 12 (image/featured card), 9999 (badge/pill). The 64px and
* 100px "navigation pill" radii from DESIGN.md are component-
* specific and not part of the shared schema. */
--radius-sm: 6px; /* buttons, inputs, functional */
--radius-md: 8px; /* cards, modals */
--radius-lg: 12px; /* image cards, featured */
--radius-pill: 9999px; /* badges, status pills */
/* ─── Elevation (3 levels) ───────────────────────────────────────
* Vercel's depth system is shadow-LED, not blur-led. Three levels:
*
* --elev-flat no shadow (page background, text blocks)
* --elev-ring the signature 1px shadow-as-border (most surfaces)
* --elev-raised the multi-layer Vercel card stack (featured cards)
*
* `--elev-raised` is reproduced VERBATIM from DESIGN.md §6 Level 3,
* including the inner `#fafafa` 1px ring that DESIGN.md calls out
* as "the glow that makes the system work" — never drop the last
* layer when overriding this token. The four layers compose:
* ring (1px shadow-as-border, sits on top)
* close (2px 2px soft elevation, just below the surface)
* far (8px blur -8px spread, ambient depth at distance)
* inner (1px #fafafa ring, the subtle highlight) */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised:
0 0 0 1px rgba(0, 0, 0, 0.08),
0 2px 2px rgba(0, 0, 0, 0.04),
0 8px 8px -8px rgba(0, 0, 0, 0.04),
0 0 0 1px #fafafa;
/* ─── Focus ring ─────────────────────────────────────────────────
* Vercel's `--ds-focus-color` is `hsla(212, 100%, 48%, 1)`; the
* outline is `2px solid` on every interactive element. We
* reproduce that as a sharp 2px box-shadow at `var(--accent)`,
* NOT the schema's 3px alpha glow — Vercel's focus is engineered,
* not atmospheric. */
--focus-ring: 0 0 0 2px var(--accent);
/* ─── Motion ─────────────────────────────────────────────────────
* Two durations + one easing curve, per anti-ai-slop's "short,
* purposeful transitions (150–250ms) with stable easing". Vercel
* transitions are quick and unobtrusive — never a long-form
* choreographed entrance. */
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ─────────────────────────────────────────────────────
* 1200px max content width per DESIGN.md §5. Gutters narrow on
* mobile to preserve the line-length-as-craft feel — Vercel does
* NOT edge-bleed body copy on phones, only screenshots. */
--container-max: 1200px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 12px;
}