0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ 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。

2026-10-15 21:17:28 +08:00

8.2 KiB

Raw Blame History

Design System Inspired by OpenAI

Category: AI & LLM Hệ thống gần như đơn sắc, bình tĩnh, lấy màu teal-đen đậm làm nền tảng, kết hợp khoảng trắng rộng rãi và kiểu chữ mang phong cách báo chí.

1. Chủ Đề Hình Ảnh & Không Khí

Bề mặt sản phẩm của OpenAI gợi lên hình ảnh một phòng thí nghiệm nghiên cứu được chỉnh trang để ra mắt công chúng — lâm sàng, kiềm chế, chủ ý giữ yên lặng. Nền trang là trắng tinh (#ffffff) xếp lớp trên mực gần đen (#0d0d0d) với ánh teal tinh tế, khiến ngay cả văn bản cũng mang cảm giác hơi lạnh thay vì tối một cách quyết liệt. Kết quả là một sự trung tính màu sắc đặt đầu ra mô hình, mã lệnh và văn xuôi lên hàng đầu, không phải lớp giao diện bao quanh chúng.

Dấu hiệu nhận diện là việc dùng Söhne (hoặc font hệ thống thay thế inter) ở độ đậm vừa phải — 400 cho phần thân, 500 cho điều hướng và nhãn, 600 cho nhấn mạnh — kết hợp với Signifier, một font chữ serif hiện đại dùng cho tiêu đề hiển thị mang tính biên tập. Trong khi phần lớn thương hiệu AI nghiêng về tương lai, những tiêu đề serif của OpenAI mang lại cho sản phẩm một giọng điệu văn học kín đáo, như thể mỗi thông báo đều là một bài luận.

Hệ thống hình dạng đồng nhất và mềm mại: bán kính 8px–12px, pill 9999px cho thẻ và chip, không có góc cạnh thô ráp ở bất kỳ đâu. Ranh giới giữa các section được đánh dấu bằng khoảng trắng thay vì đường kẻ phân cách; khi đường viền xuất hiện, chúng là những đường chân tóc #e5e5e5 mang cảm giác như sự vắng mặt của màu sắc hơn là sự hiện diện của nó.

Key Characteristics:

Nền trắng tinh (#ffffff) với mực teal-đen đậm (#0d0d0d)
Söhne / Inter ở độ đậm khiêm tốn (400, 500, 600) — kiềm chế hơn là khẳng định
Serif Signifier cho tiêu đề hiển thị mang phong cách biên tập
Bán kính mềm 8–12px ở mọi nơi; pill 9999px cho chip
Đường viền chân tóc (#e5e5e5) dùng tiết kiệm; khoảng trắng là yếu tố phân cách chính
Minh họa đơn màu teal đậm — không có gradient trong các dấu hiệu
Line-height rộng rãi (1.55–1.65) và tracking gần bằng không

2. Bảng Màu & Vai Trò

Primary

Pure White (#ffffff): Nền chính, bề mặt card, nền nút.
Ink Black (#0d0d0d): Văn bản chính, dấu thương hiệu, CTA chính.
Soft Black (#1a1a1a): Tiêu đề phụ, mực thay thế cho văn bản không quan trọng.

Surface & Background

Mist (#fafafa): Nền ngắt section, bề mặt footer.
Pearl (#f5f5f5): Bề mặt card, panel nổi.
Cloud (#ececec): Nền bị tắt, tô màu đường phân cách.

Brand Accent

OpenAI Teal (#10a37f): Màu chính của thương hiệu, link, huy hiệu nổi bật — màu duy nhất trong một hệ thống vốn trung tính.
Teal Deep (#0a7a5e): Trạng thái hover và nhấn cho màu thương hiệu.
Teal Soft (#e8f5f0): Tô màu bề mặt cho huy hiệu thành công, chú thích nổi bật.

Neutrals & Text

Graphite (#3c3c3c): Văn bản nội dung, màu đọc mặc định.
Slate (#6e6e6e): Văn bản phụ, chú thích, metadata.
Ash (#9b9b9b): Văn bản bậc ba, placeholder, nhãn bị tắt.
Stone (#c4c4c4): Đường phân cách trang trí, biểu tượng mờ.

Semantic & Border

Border Hairline (#e5e5e5): Đường phân cách chân tóc tiêu chuẩn.
Border Soft (#ededed): Đường viền card trên nền trắng.
Error (#ef4146): Xác nhận, hành động hủy.
Warning (#f5a623): Màu hổ phách nhẹ cho trạng thái cảnh báo.
Info (#2563eb): Sắc độ link thông tin (dùng tiết kiệm; teal vẫn chiếm ưu thế).

3. Quy Tắc Typography

Font Family

Display / Editorial: Signifier, với fallback: 'Source Serif Pro', Georgia, serif
Body / UI: Söhne, với fallback: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif
Code / Mono: Söhne Mono, với fallback: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Signifier	56px (3.5rem)	400	1.08	-0.02em	Hero biên tập, tiêu đề thông báo
H1	Söhne	40px (2.5rem)	600	1.15	-0.01em	Tiêu đề trang
H2	Söhne	28px (1.75rem)	600	1.2	-0.005em	Tiêu đề section
H3	Söhne	20px (1.25rem)	600	1.3	normal	Tiêu đề phụ section
Body Large	Söhne	18px (1.125rem)	400	1.6	normal	Đoạn văn mở đầu
Body	Söhne	16px (1rem)	400	1.65	normal	Văn bản đọc tiêu chuẩn
Body Small	Söhne	14px (0.875rem)	400	1.55	normal	Nội dung card, giao diện dày đặc
Caption	Söhne	13px (0.8125rem)	500	1.4	0.01em	Metadata, huy hiệu
Label	Söhne	12px (0.75rem)	500	1.3	0.04em	Eyebrow, liên kết điều hướng viết hoa
Code	Söhne Mono	14px (0.875rem)	400	1.55	normal	Khối mã, đầu ra terminal

Nguyên Tắc

Kiềm chế là bản sắc: độ đậm tối đa 600; 700+ trông không phù hợp với thương hiệu. Phân cấp đến từ kích thước và màu sắc, không phải độ đậm.
Serif cho hồn, sans cho hệ thống: Signifier chỉ xuất hiện trong những khoảnh khắc hiển thị biên tập. Giao diện sản phẩm chỉ dùng sans.
Tracking âm trên display: -0.02em ở kích thước display; tracking trở về không ở 16px.

4. Phong Cách Component

Buttons

Primary

Background: #0d0d0d
Text: #ffffff
Padding: 10px 18px
Radius: 9999px (full pill) trên chip, 12px trên CTA dạng chữ nhật
Hover: nền #1a1a1a
Dùng cho: CTA chính, "Try ChatGPT", "Sign in"

Secondary

Background: #ffffff
Text: #0d0d0d
Border: 1px solid #e5e5e5
Padding: 10px 18px
Radius: 12px
Hover: nền #fafafa, border #d4d4d4

Brand Accent

Background: #10a37f
Text: #ffffff
Padding: 10px 18px
Radius: 12px
Hover: #0a7a5e
Dùng cho: CTA nâng cấp nổi bật, luồng thành công

Cards

Background: #ffffff
Border: 1px solid #ededed
Radius: 16px
Padding: 24px–32px
Shadow: không có mặc định; khi hover 0 4px 16px rgba(13,13,13,0.06)

Inputs

Background: #ffffff
Border: 1px solid #e5e5e5
Radius: 12px
Padding: 12px 14px
Focus: border #10a37f, ring 0 0 0 3px rgba(16,163,127,0.12)

Pills & Tags

Background: #f5f5f5
Text: #3c3c3c
Padding: 4px 10px
Radius: 9999px
Font: 12px / 500

5. Spacing & Layout

Đơn vị cơ bản: 4px. Thang: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Container: max-width 1200px, gutter 24px trên mobile, 48px trên desktop.
Nhịp section: 96–128px dọc giữa các section chính; 64px trên mobile.
Grid: 12 cột desktop, 4 cột mobile, khoảng cách 24px.

6. Motion

Duration: 150–220ms cho hover; 280–360ms cho chuyển đổi layout.
Easing: cubic-bezier(0.16, 1, 0.3, 1) (smooth out) cho entrance.
Kiềm chế: không parallax, không scroll-jacking. Chỉ dùng fade và translate tinh tế.

7. Hướng Dẫn Sử Dụng

Duy trì sự kiềm chế biên tập trung tính, bán kính mềm và việc dùng accent tiết kiệm cùng nhau; accent xanh lá đơn độc không tạo ra bề mặt mang phong cách OpenAI.
Chỉ dùng những khoảnh khắc hiển thị kiểu Signifier cho phân cấp biên tập hoặc thông báo, giữ các control sản phẩm trong hệ thống sans.
Tránh motion trang trí, shadow nặng và card trang trí quá khổ; hệ thống phải mang cảm giác bình tĩnh, dễ đọc và có chủ đích.

8.2 KiB Raw Blame History Unescape Escape