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/airbnb/tokens.css
+261
View File
@@ -0,0 +1,261 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/airbnb/tokens.css
*
* Structured token bindings for the Airbnb design system — pristine
* Canvas White surfaces, a single Rausch coral-pink accent (#ff385c),
* generous soft-circle radii, and Airbnb Cereal VF as the lone type
* family. The system reads like a travel magazine that happens to be
* an app: the interface disappears so the listings can breathe.
*
* This file pre-compiles the values described in `DESIGN.md` into the
* schema shared with every OD design system. Agents should paste the
* `:root { … }` block verbatim into the first `<style>` of an artifact,
* then resolve every value via `var(--*)` from that point on.
*
* Schema notes (brand-specific bindings worth flagging — section
* references point into `DESIGN.md`):
*
* #Bind 1 — --bg and --surface both resolve to Canvas White
* (#ffffff). Airbnb cards sit directly on the page
* without a tonal step; separation comes from the
* Hairline Gray (--border) edge and from the
* photograph inside the card, never from a surface
* tint (§4 Listing Card).
*
* #Bind 2 — --surface-warm binds to Soft Cloud (#f7f7f7), the
* brand-named subsurface tier used for footers, map
* wrappers, and the calendar's middle-of-range dates.
* A real value rather than `var(--surface)` because
* Airbnb publishes a distinct tier here (§2 Surface).
*
* #Bind 3 — --accent-hover and --accent-active are hand-picked,
* NOT formula-derived. DESIGN.md §2 publishes Deep
* Rausch (#e00b41) as the pressed/active state.
* color-mix would overshoot that saturation and
* under-shoot the brand's gradient terminal stop,
* so we hand-bind both states.
*
* #Bind 4 — Radius scale concentrates on the brand's signature
* soft-circle geometry: 8px for buttons/inputs, 14px
* for listing cards (the workhorse), 20px for the
* booking panel and hero photo frames, 9999px for
* the circular icon buttons and avatars that
* punctuate every surface (§5 Border Radius Scale).
*
* #Bind 5 — --elev-raised encodes Airbnb's signature three-
* layer booking-panel shadow verbatim — a 2% hairline
* ring, a 4% short blur, and a 10% medium blur. The
* brand forbids single drop shadows; this stacked
* triple is what gives the booking panel its premium
* anti-aliased perimeter (§6 Depth & Elevation).
*
* #Bind 6 — --focus-ring is 2px solid Ink Black (#222222), NOT
* the schema's accent-tinted default. DESIGN.md §6
* mandates this specific ring so focus reads cleanly
* against full-bleed colorful photography — a Rausch
* ring would disappear against warm sunset shots or
* sea-blue overlays. Pair with the 4px white
* separator ring at circular buttons floating on
* images.
*
* #Bind 7 — --leading-body is 1.43 (generous). Airbnb pairs
* tight display leading (1.18–1.25) with notably
* open body leading; that two-mode rhythm is why
* the system reads as a travel magazine rather than
* a utility app (§3 Principles).
*
* Brand-specific extensions: none in this revision. The Plus
* Magenta (#92174d) and Luxe Purple (#460479) product-tier accents
* called out in DESIGN.md §2 stay inline at the tier-specific
* components that need them; promoting them to schema slots would
* encourage non-tier surfaces to reach for them.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (3 levels) ────────────────────────────────────────
* Canvas White is both the page and the card — Airbnb refuses a
* tonal shift between the two. Cards earn their edges from the
* Hairline Gray border and from full-bleed photography. The
* tertiary tier (--surface-warm) is Soft Cloud, used only for
* footer backgrounds, map-view wrappers, and middle-of-range
* date cells in the date picker. */
--bg: #ffffff;
--surface: #ffffff;
--surface-warm: #f7f7f7;
/* ─── Foreground ramp (4 levels) ────────────────────────────────
* Ink Black (#222222) carries roughly ninety percent of every
* page — every heading, every body paragraph, every nav label,
* every price. The brand's near-black is never true #000000.
* Charcoal (--fg-2) is a one-step-down emphasis tier reserved
* for focused-input text. Ash Gray (--muted) is the secondary
* label — "Cottage rentals" subtitles, muted footer links.
* Mute Gray (--meta) is reserved for disabled buttons and
* low-priority metadata. */
--fg: #222222;
--fg-2: #3f3f3f;
--muted: #6a6a6a;
--meta: #929292;
/* ─── Border (2 levels) ─────────────────────────────────────────
* Hairline Gray (#dddddd) is the workhorse — every card-to-card
* divider, every amenity-row separator, every footer-column
* rule. The soft tier is a lighter hairline used to break up
* dense list interiors without competing with the primary card
* edge. */
--border: #dddddd;
--border-soft: #ebebeb;
/* ─── Accent ────────────────────────────────────────────────────
* Rausch coral-pink — the single signature color. Reserve for
* primary CTAs (Reserve, Search, Add dates), the active-tab
* underline, the wishlist heart fill, and price emphasis. Hard
* cap of two visible uses per viewport; if a third Rausch
* element shows up, neutralize one. Plus Magenta (#92174d) and
* Luxe Purple (#460479) are kept inline at their product-tier
* surfaces, not promoted to shared accent slots. */
--accent: #ff385c;
--accent-on: #ffffff;
--accent-hover: #e31c5f; /* hand-picked, between Rausch and Deep Rausch */
--accent-active: #e00b41; /* Deep Rausch — DESIGN.md §2 pressed-state value */
/* ─── Semantic ──────────────────────────────────────────────────
* Error Red is explicit from DESIGN.md §2; success and warn are
* not specified by the brand and are bound to desaturated values
* that survive the white canvas without competing with Rausch.
* Keep total semantic-color pixels well under five percent of
* any page — the brand almost never renders status. */
--success: #008a05; /* hand-picked warm green — available/in-stock */
--warn: #c47700; /* burnt amber — never tailwind yellow */
--danger: #c13515; /* DESIGN.md §2 Error Red */
/* ─── Typography — fonts ────────────────────────────────────────
* Airbnb Cereal VF is the proprietary face that carries every
* label from 8px superscript to 28px section heading. The
* documented fallback chain renders acceptably on macOS/iOS
* where system-ui resolves to San Francisco. Display and body
* share the same stack — the visual identity comes from the
* family itself, never from typeface mixing. Mono is a generic
* stack for kbd, tabular metrics, and the rare code label. */
--font-display:
"Airbnb Cereal VF", "Airbnb Cereal App", Circular,
-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
--font-body:
"Airbnb Cereal VF", "Airbnb Cereal App", Circular,
-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
--font-mono:
ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco,
Consolas, monospace;
/* ─── Typography — type scale (px) ──────────────────────────────
* Derived from DESIGN.md §3 Hierarchy table. The system clusters
* tightly between 11 and 22px (the conversational range) and
* jumps to 28px for section headings; the higher tiers are used
* sparingly for the Guest Favorite rating lockup (44–56px) and
* the rare hero numeral. No 400-regular: Cereal's body weight
* is 500, which any consuming component should set explicitly. */
--text-xs: 12px; /* micro / footer disclaimer */
--text-sm: 14px; /* button default, link, caption */
--text-base: 16px; /* body medium, button large, subtitle bold */
--text-lg: 20px; /* listing title */
--text-xl: 22px; /* subsection heading */
--text-2xl: 28px; /* section heading */
--text-3xl: 44px; /* Guest Favorite rating, hero numeral */
--text-4xl: 56px; /* display ceiling — Guest Favorite max */
/* ─── Typography — leading & tracking ───────────────────────────
* Tight for display (1.20 — chiseled headlines), generous for
* body (1.43 — magazine reading comfort). Display tracking
* compresses negatively at sizes ≥20px; body and caption hold
* at zero. The two-mode rhythm is what gives Airbnb pages
* their travel-magazine feel rather than a utility-app feel. */
--leading-body: 1.43;
--leading-tight: 1.2;
--tracking-display: -0.02em; /* applied at sizes ≥20px only */
/* ─── Spacing — base scale ──────────────────────────────────────
* 8px base unit per DESIGN.md §5. The brand uses fine-grained
* off-grid values (5.5, 10, 11, 18.5, 22) for pixel-perfect
* icon alignment, but the shared scale stays on the standard
* 4px grid — off-grid spacing belongs inline at the component
* level, not in shared tokens. */
--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 ────────────────────────────────────────────
* Section padding ranges 48–64px on desktop, 24–32px on mobile
* per DESIGN.md §5. We bind the upper bound on desktop because
* Airbnb's content-dense pages benefit from generous breathing
* room between content blocks; the lower phone bound keeps the
* vertical rhythm tight on small screens. */
--section-y-desktop: 64px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
/* ─── Radius ────────────────────────────────────────────────────
* The brand's signature soft-circle geometry. 14px (--radius-md)
* is the workhorse — every listing card photograph, every
* amenity badge, every generic content container lands here.
* 20px (--radius-lg) is reserved for the booking panel and hero
* photo frames; 8px (--radius-sm) is the small radius for
* buttons, dropdowns, and inputs; --radius-pill (9999px) is the
* system's signature round geometry, applied to every circular
* icon button, every avatar, and the wishlist heart. */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-pill: 9999px;
/* ─── Elevation ─────────────────────────────────────────────────
* Airbnb forbids single drop shadows; the system uses stacked
* layered shadows or no shadow at all. Listing cards sit flat
* on the canvas. Booking panels, modals, and dropdowns use the
* signature three-layer stack — a 2% hairline ring, a 4% short
* blur, and a 10% medium blur — which reads as one cohesive
* lift while giving the perimeter a premium anti-aliased edge. */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised:
rgba(0, 0, 0, 0.02) 0 0 0 1px,
rgba(0, 0, 0, 0.04) 0 2px 6px 0,
rgba(0, 0, 0, 0.1) 0 4px 8px 0;
/* ─── Focus ring ────────────────────────────────────────────────
* 2px solid Ink Black, NOT the schema's accent-tinted default.
* DESIGN.md §6 mandates this exact treatment so focus indicators
* read cleanly against full-bleed colorful photography — a
* Rausch-tinted ring would disappear against warm sunset shots
* or sea-blue beach overlays. Pair with a 4px white separator
* ring at circular-icon buttons that float on images. */
--focus-ring: 0 0 0 2px var(--fg);
/* ─── Motion ────────────────────────────────────────────────────
* DESIGN.md did not capture transition timings (static
* extraction scope). We bind defaults consistent with the
* brand's tactile feel: 150ms for micro-states (the famous
* `transform: scale(0.92)` pressed-button rebound) and 200ms
* for general state changes. Standard easing is the schema
* default — short, purposeful, no overshoot. */
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ────────────────────────────────────────────────────
* Detail pages cap at 1280px per DESIGN.md §5; the homepage
* listing grid lets the canvas breathe to 1760–1920px on
* ultra-wide. We bind the detail-page width as the shared
* default because that is the geometry agents will most often
* generate (rooms, experiences, host profiles). Gutters
* tighten progressively: 40px desktop, 24px tablet, 16px
* phone per DESIGN.md §8 small-mobile clause. */
--container-max: 1280px;
--container-gutter-desktop: 40px;
--container-gutter-tablet: 24px;
--container-gutter-phone: 16px;
}