admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
156 lines
6.8 KiB
Markdown
156 lines
6.8 KiB
Markdown
# Design System Inspired by Hugging Face
|
||
|
||
> Category: AI & LLM
|
||
> ML community hub. Sunny yellow accent, monospace identity, cheerful and dense.
|
||
|
||
## 1. Visual Theme & Atmosphere
|
||
|
||
Hugging Face is the rare ML brand that refuses to look serious. The hub leans into a sunshine-yellow accent (`#ffd21e`), a cartoon hugging-face emoji as the logo, and a confident **IBM Plex Mono** voice that reads more like a community zine than a research lab. The page background is a clean off-white (`#fafafa`) with text in a deep slate (`#0d1117`), and the yellow appears in pull quotes, tags, "new" badges, and the model-card header strip — never as an entire surface, always as punctuation.
|
||
|
||
The typographic system is monospace-forward in a way few product brands attempt: **IBM Plex Mono** for headings and tags, **Source Sans Pro** (or Inter) for body. The mix gives every page a "config file is the README" vibe — fitting for a platform built around `.gitattributes` and `model-card.md`.
|
||
|
||
Shapes are crisp, not soft: 4–6px radii, 1px solid borders that announce themselves rather than hide. Tables are dense, with row hover in a faint gray (`#f3f4f6`). The brand emoji punctuates everything — chips, headings, even error states wear a 🤗 — so the system feels human even when displaying technical data.
|
||
|
||
**Key Characteristics:**
|
||
- Sunshine yellow `#ffd21e` as the lone saturated accent
|
||
- IBM Plex Mono for headings and tags; Source Sans Pro for body
|
||
- Off-white canvas (`#fafafa`) with crisp 1px borders (`#e5e7eb`)
|
||
- 4–6px radii — closer to brutalist than rounded
|
||
- Hugging-face emoji 🤗 used unironically as a system glyph
|
||
- Dense tables, minimal padding — a community hub for power users
|
||
- Color-coded model categories (NLP blue, vision green, audio purple)
|
||
|
||
## 2. Color Palette & Roles
|
||
|
||
### Primary
|
||
- **HF Yellow** (`#ffd21e`): Brand primary, badges, "new" pill, model-card header bar.
|
||
- **HF Yellow Deep** (`#f59e0b`): Hover/active for yellow.
|
||
- **HF Yellow Soft** (`#fff4cc`): Surface tint, callout background.
|
||
|
||
### Surface & Background
|
||
- **Canvas** (`#ffffff`): Primary page background.
|
||
- **Canvas Subtle** (`#fafafa`): Alternate section background, footer.
|
||
- **Canvas Inset** (`#f3f4f6`): Code block background, hover row.
|
||
- **Canvas Dark** (`#0d1117`): Dark theme background.
|
||
|
||
### Ink & Text
|
||
- **Ink Primary** (`#0d1117`): Primary text, headings.
|
||
- **Ink Secondary** (`#374151`): Body prose.
|
||
- **Ink Muted** (`#6b7280`): Captions, file paths, model authors.
|
||
- **Ink Inverse** (`#f9fafb`): Text on dark surface.
|
||
|
||
### Category Accents (Model Tasks)
|
||
- **NLP Blue** (`#2563eb`): Text/NLP task badges.
|
||
- **Vision Green** (`#16a34a`): Computer-vision task badges.
|
||
- **Audio Purple** (`#9333ea`): Audio/speech task badges.
|
||
- **Multimodal Pink** (`#db2777`): Multimodal/diffusion task badges.
|
||
- **Tabular Orange** (`#ea580c`): Tabular/structured task badges.
|
||
|
||
### Semantic
|
||
- **Success** (`#16a34a`): Build succeeded, deploy live.
|
||
- **Warning** (`#f59e0b`): Slow inference, rate limit.
|
||
- **Error** (`#dc2626`): Failed build, broken model.
|
||
- **Info** (`#2563eb`): Notice banner.
|
||
|
||
### Border
|
||
- **Border Default** (`#e5e7eb`): Standard 1px hairline.
|
||
- **Border Strong** (`#d1d5db`): Emphasized border on hover.
|
||
- **Border Subtle** (`#f3f4f6`): Inner divider.
|
||
|
||
## 3. Typography Rules
|
||
|
||
### Font Family
|
||
- **Display / UI / Headings / Tags**: `IBM Plex Mono`, with fallback: `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
|
||
- **Body / Prose**: `Source Sans Pro`, with fallback: `Inter, system-ui, -apple-system, sans-serif`
|
||
- **Editorial (rare, blog only)**: `Source Serif Pro`, with fallback: `Georgia, serif`
|
||
|
||
### Hierarchy
|
||
|
||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Display | IBM Plex Mono | 48px (3rem) | 600 | 1.1 | -0.01em | Marketing hero |
|
||
| H1 | IBM Plex Mono | 32px (2rem) | 600 | 1.2 | normal | Page heading, model name |
|
||
| H2 | IBM Plex Mono | 24px (1.5rem) | 600 | 1.25 | normal | Section heading |
|
||
| H3 | IBM Plex Mono | 18px (1.125rem) | 600 | 1.3 | normal | Sub-section |
|
||
| Body Large | Source Sans Pro | 18px (1.125rem) | 400 | 1.6 | normal | Lede, blog intro |
|
||
| Body | Source Sans Pro | 15px (0.9375rem) | 400 | 1.55 | normal | Standard prose, model card |
|
||
| Caption | Source Sans Pro | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Author byline, timestamp |
|
||
| Tag / Badge | IBM Plex Mono | 12px (0.75rem) | 500 | 1.2 | 0.02em | Task tags, framework chips |
|
||
| Code | IBM Plex Mono | 14px (0.875rem) | 400 | 1.55 | normal | Code blocks, inline `model_id` |
|
||
|
||
### Principles
|
||
- **Mono everywhere it matters**: nav links, headings, tags, and metadata are all monospaced. Sans is reserved for paragraphs of prose.
|
||
- **Weight under 600**: 600 is the cap; 700 is too loud against yellow. Hierarchy is size and color.
|
||
- **Tags read as code**: model tags use mono so they look like the strings developers will paste into Python.
|
||
|
||
## 4. Component Stylings
|
||
|
||
### Buttons
|
||
|
||
**Primary**
|
||
- Background: `#0d1117`
|
||
- Text: `#ffffff`
|
||
- Padding: 8px 16px
|
||
- Radius: 6px
|
||
- Hover: `#374151`
|
||
- Use: "Use this model", primary forms.
|
||
|
||
**Yellow CTA**
|
||
- Background: `#ffd21e`
|
||
- Text: `#0d1117`
|
||
- Padding: 8px 16px
|
||
- Radius: 6px
|
||
- Hover: `#f59e0b`
|
||
- Use: "Pro upgrade", "Sponsor".
|
||
|
||
**Outline**
|
||
- Background: `#ffffff`
|
||
- Text: `#0d1117`
|
||
- Border: 1px solid `#e5e7eb`
|
||
- Hover: background `#f3f4f6`
|
||
|
||
### Cards / Model Cards
|
||
- Background: `#ffffff`
|
||
- Border: 1px solid `#e5e7eb`
|
||
- Radius: 6px
|
||
- Padding: 16px 20px
|
||
- Header strip: `#ffd21e` background, 4px tall, only on featured model cards.
|
||
|
||
### Inputs
|
||
- Background: `#ffffff`
|
||
- Border: 1px solid `#e5e7eb`
|
||
- Radius: 6px
|
||
- Padding: 8px 12px
|
||
- Focus: border `#0d1117`, ring `0 0 0 3px rgba(13,17,23,0.1)`
|
||
|
||
### Tags / Chips (Task / Framework)
|
||
- Background: category-tinted soft (`#dbeafe` for NLP, `#dcfce7` for vision, etc.)
|
||
- Text: matching strong category color.
|
||
- Padding: 2px 8px
|
||
- Radius: 4px
|
||
- Font: IBM Plex Mono 12px / 500
|
||
|
||
### Tables
|
||
- Header: background `#fafafa`, border-bottom 1px `#e5e7eb`.
|
||
- Row: border-bottom 1px `#f3f4f6`, hover `#f3f4f6`.
|
||
- Padding: 8px 16px per cell — dense by design.
|
||
|
||
## 5. Spacing & Layout
|
||
|
||
- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
|
||
- **Container**: max 1280px, 24px gutter.
|
||
- **Sidebar (model browser)**: 280px wide.
|
||
- **Section rhythm**: 64–96px vertical between major sections.
|
||
|
||
## 6. Motion
|
||
|
||
- **Duration**: 120ms for hover; 200ms for menu open.
|
||
- **Easing**: `ease-out`.
|
||
- **Tag pop**: a 1.05× scale on hover at 120ms — the only exception to flat-on-hover.
|
||
|
||
## 7. Usage Guardrails
|
||
|
||
- Preserve the yellow accent, mono metadata, and dense model-card layout together; yellow alone does not create a Hugging Face-like surface.
|
||
- Use tags, tables, and repository-style metadata for model browsing or evaluation contexts rather than decorative marketing cards.
|
||
- Keep motion minimal and functional, reserving the small tag pop for interactive taxonomy chips.
|