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。
19 KiB
19 KiB
受 Shopify 啟發的設計系統
Category: 電子商務與零售 電商平台。深色優先的電影感，霓虹綠強調色，超細字重。
1. 視覺主題與氛圍
Shopify.com 是一座深色優先的數位劇場——一個將其商業平台以電影首映式方式呈現的網站。整個體驗在近黑色的表面上展開，這些表面帶著深邃森林綠的最微弱低語（#02090A、#061A1C、#102620），營造出一種夜間氛圍，感覺與其說是一個 SaaS 行銷頁面，不如說是科技發表會上的一場獨家產品揭幕。這種黑暗並不冷酷或企業化——它是奢華體驗中溫暖包覆的黑暗，就像坐在黑暗禮堂的前排。
排版是當之無愧的主角。NeueHaasGrotesk——一種精緻的 Helvetica 後裔——以紀念碑式的尺寸（96px）和難以置信的細字重（330-400）出現，創造出感覺是用光刻就而非用墨水印刷的標題。ss03 OpenType 特性賦予字形獨特個性，使 Shopify 的字體與普通 Helvetica 用法區分開來。在展示層之下，Inter Variable 以外科手術般的精準處理內文，使用同樣不尋常的可變字重（420、450、550），這些字重存在於傳統字重檔位之間的空間裡。這種精準度傳遞出一家對每個細節都精益求精的公司的訊號。
顏色使用極為克制。主要強調色是 Shopify 霓虹綠（#36F4A4）——一種電子薄荷色，只出現在焦點環和強調高亮上，在深色畫布上像生物發光訊號一樣脈動。更柔和的綠色調（蘆薈綠 #C1FBD4、開心果綠 #D4F9E0）提供氛圍渲染。白色是深色表面上唯一重要的文字顏色，而基於鋅色的中性色階（#A1A1AA 到 #3F3F46）處理安靜資訊的層次結構。結果是一種讓商業技術感覺屬於科幻未來的設計。
Key Characteristics：
- 深色優先設計，帶有深邃森林青綠色底調（非純黑色）
- 超細展示排版（字重 330）以紀念碑式尺寸（96px）創造飄逸存在感
- 霓虹綠（
#36F4A4）作為黑暗中單一的高能強調色 - 完整圓角按鈕（9999px 圓角半徑）作為主要互動形狀
- 分層多級盒陰影創造攝影般的深度感
- 產品截圖嵌入深色 UI 環境中，與周圍的黑暗融為一體
- 基於鋅色的中性色階處理文字層次——在冷暖之間取得平衡
2. 色彩面板與用途
主色
- Shopify 白（
#FFFFFF）：深色表面上的主要文字，按鈕填充，高對比度元素 - Shopify 黑（
#000000）：頁面主背景，白色按鈕上的文字，最大對比度基礎（--color-shade-100）
輔助色與強調色
- 霓虹綠（
#36F4A4）：標誌性強調色——焦點環、互動高亮、啟用狀態指示器。電子感與生物發光感 - 蘆薈綠（
#C1FBD4）：裝飾性背景、氛圍卡片的柔和綠色渲染（--color-aloe-10） - 開心果綠（
#D4F9E0）：細微表面差異化的最淺綠色調（--color-pistachio-10）
表面與背景色
- 虛空黑（
#000000）：根頁面背景——真正的黑色以獲得最大深度 - 深青綠（
#02090A）：卡片表面、內容容器——帶有綠色底調的近黑色 - 深森林綠（
#061A1C）：具有明顯綠色特徵的區塊背景 - 森林綠（
#102620）：提升的深色表面、頁首背景——最溫暖的深色調 - 深色卡片邊框（
#1E2C31）：深色表面上的卡片邊框，細微的邊界定義
中性色與文字色（鋅色階）
- Shade-30（
#D4D4D8）：最淺中性色，深色上幾乎不可見的邊框（--color-shade-30） - 靜默文字（
#A1A1AA）：次級文字、中繼資料、描述——安靜的聲音 - Shade-50（
#71717A）：三級文字、時間戳記、最不重要的資訊（--color-shade-50） - Shade-60（
#52525B）：停用文字、裝飾性中性色（--color-shade-60） - Shade-70（
#3F3F46）：細微分隔線，幾乎不可見的 UI 邊界（--color-shade-70） - 淺色邊框（
#E4E4E7）：淺色表面上的邊框（罕用——僅在淺色強制回應視窗中）
語意色與強調色
- Link Muted（
#9797A2）：帶有底線裝飾的靜默連結文字 - Link Sage（
#9DABAD）：青綠色調的靜默連結 - Link Lavender（
#BDBDCA）：較淺的連結變體 - Link Mint（
#99B3AD）：主題區塊的綠色調連結變體
漸層系統
- 深青綠渲染：從
#102620中心到#02090A邊緣的徑向漸層——用於產品展示區後方 - 綠色氛圍：英雄區塊後方細微的綠色調環境漸層，在不使用純色的情況下創造深度
- 聚光燈：亮度集中區域逐漸消退至黑色——創造發表會風格的演示照明效果
3. 排版規則
字體族
展示字體： NeueHaasGrotesk（精緻的 Helvetica 後裔，可變字體）
- 備用字體：Helvetica、Arial、sans-serif
- OpenType 特性：
ss03（風格集 3——獨特的字形替代方案） - 可用字重：330、360、400、500、750（可變）
- 用於所有標題、英雄文字和大型展示元素
內文字體： Inter-Variable
- 備用字體：Helvetica、Arial、sans-serif
- OpenType 特性：
ss03 - 可用字重：400、420、450、500、550（可變）
- 用於內文文字、連結、按鈕、UI 元素
等寬字體： ui-monospace
- 備用字體：SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New
- 用於程式碼片段、資料標籤、技術內容
層次結構
| 角色 | 大小 | 字重 | 行高 | 字距 | 備註 |
|---|---|---|---|---|---|
| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk，英雄標題，"ss03" |
| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk，強調展示 |
| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk，間距展示 |
| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk，飄逸展示 |
| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk，區塊標題 |
| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk，子區塊 |
| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk，功能標題 |
| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk，卡片標題 |
| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk，小標題 |
| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk，次要標題 |
| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter，引言段落 |
| Body | 18px | 400 | 1.56 | — | Inter-Variable，標準內文 |
| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable，強調內文 |
| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk，緊湊內文 |
| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable，輕微強調 |
| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk，CTA 文字 |
| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk，導覽項目 |
| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter，中繼資料 |
| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable，強調說明文字 |
| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk，寬字距標籤 |
| Micro | 13px | 500 | 1.50 | -0.13px | Inter，緊字距小文字 |
| Label | 12px | 400 | 1.20 | 0.72px | Inter，大寫標籤 |
| Code | 16px | 400 | 1.50 | — | ui-monospace，大寫，程式碼區塊 |
| Code Small | 12px | 400 | 1.33 | — | ui-monospace，大寫，行內程式碼 |
原則
Shopify 的排版是可變字體精準度的大師級示範。展示層幾乎完全使用 330-400 的字重——羽毛般輕盈的文字，看起來像投影光一樣懸浮於深色背景之上。這與大多數 SaaS 網站採用的粗重方式截然相反：別人大聲呼喊，Shopify 卻在巨大尺度上低語。96px 標題配以 330 字重創造出巨大尺寸與纖細筆畫的悖論，既有紀念碑感，又有脆弱感。ss03 OpenType 特性啟用了一個風格集，賦予特定字元（可能是 'a'、'g' 和某些數字）更精緻的外觀，使 Shopify 的排版有別於標準 Helvetica Neue 的用法。Inter Variable 以外科手術般的精準處理內文層，使用 420 和 550 等存在於傳統檔位之間的字重——每段文字都擁有其所需的準確視覺重量。
4. 元件樣式
按鈕
主要按鈕（白色填充）
- 背景：白色（
#FFFFFF） - 文字：黑色（
#000000） - 邊框：2px 透明實線
- 圓角半徑：完整圓角（9999px）
- 內邊距：12px 26px 12px 16px（不對稱——右側更多內邊距以獲得視覺平衡）
- 懸停：輕微透明度降低或背景偏移
- 焦點：2px
#36F4A4（霓虹綠）外框 - 過渡：all 200ms ease
次要按鈕（幽靈/輪廓）
- 背景：透明
- 文字：白色（
#FFFFFF） - 邊框：2px 白色實線（
#FFFFFF） - 圓角半徑：完整圓角（9999px）
- 內邊距：12px 26px 12px 16px
- 懸停：填充為白色背景配黑色文字
- 焦點：2px
#36F4A4外框
徽章/標籤（中性填充）
- 背景：
rgba(255, 255, 255, 0.2)（霧面玻璃） - 文字：白色（
#FFFFFF） - 邊框：無
- 圓角半徑：輕微圓角（4px）
- 內邊距：12px 16px
- 字體：16px 常規
卡片與容器
- 背景：深色頁面上的深青綠（
#02090A） - 邊框：1px 實線
#1E2C31（深色卡片邊框）——幾乎不可見的邊界 - 圓角半徑：標準卡片 8px，特色卡片 12px，頂部圓角卡片 20px 20px 0 0
- 陰影：多層系統：
- 靜止狀態：
rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px+rgba(255,255,255,0.03) 0px 1px 0px inset - 內嵌白色高亮創造細微的頂部邊緣發光效果
- 靜止狀態：
- 懸停：陰影擴展，卡片可能略微變亮
- 過渡：box-shadow 300ms ease，transform 200ms ease
輸入框與表單
- 背景：透明或深森林綠（
#061A1C） - 文字：白色（
#FFFFFF） - 邊框：1px 實線
#3F3F46（Shade-70） - 圓角半徑：8px
- 內邊距：12px 16px
- 焦點：2px 實線
#36F4A4（霓虹綠焦點環） - 佔位符：Shade-50（
#71717A） - 過渡：border-color 200ms ease
導覽列
- 背景：透明（疊加在深色英雄區上），捲動時變為森林綠（
#102620） - 高度：約 64px
- 左側：Shopify 文字標誌（SVG，深色背景上的白色）
- 中/右：18px/500 NeueHaasGrotesk 導覽連結，白色，字距 0.72px
- CTA：白色圓角按鈕「Start for free」（右側）
- 次要 CTA：帶白色邊框的幽靈按鈕
- 懸停：連結變為靜默文字（
#A1A1AA）或出現底線 - 行動裝置：漢堡選單，全螢幕深色遮罩層
- 過渡：捲動時背景 300ms ease
圖片處理
- 產品截圖：嵌入深色 UI 環境中，與周圍的黑暗融為一體
- 管理介面預覽：展示在帶細微卡片邊框的深色背景上
- 長寬比：多樣——英雄圖片較寬（約 16:9），功能截圖較靈活
- 所有圖片在深色容器內平鋪——無亮色邊框或外框
- 延遲載入配以深色佔位表面
信任指標
- 突出展示統計數據：「15+」（年）、「150M+」（買家）
- 數字以 NeueHaasGrotesk 展示級別顯示
- 合作夥伴/開發者生態系統專區
- 深色主題的評價評論融入頁面流程中
5. 版面配置原則
間距系統
基礎單位：8px
| 標記 | 值 | 用途 |
|---|---|---|
| space-1 | 4px | 緊湊行內間距 |
| space-2 | 8px | 基礎單位，圖示間距 |
| space-3 | 12px | 卡片內邊距，緊湊外邊距 |
| space-4 | 16px | 標準元素內邊距 |
| space-5 | 24px | 卡片間距，區塊內邊距 |
| space-6 | 28px | 中等區塊間距 |
| space-7 | 32px | 區塊分隔 |
| space-8 | 36px | 大內邊距 |
| space-9 | 40px | 主要區塊內邊距 |
| space-10 | 64px | 英雄區塊內邊距，大間距 |
網格與容器
- 最大容器寬度：約 1280px（置中）
- 英雄區：全寬，邊到邊的深色背景配置中文字
- 功能區塊：帶文字和產品截圖的兩欄版面
- 統計區塊：配大數字的水平版面
- 水平內邊距：桌面 64px，平板 32px，行動裝置 16px
- 網格間距：主要內容塊之間 24-32px
留白哲學
Shopify 的留白策略是戲劇性的。區塊之間以大片深色空間分隔——80px 到 120px 的純黑色呼吸空間——創造出簡報的節奏，而不是網頁的節奏。每個內容塊都是主題演講式捲動中獨立的「投影片」。在區塊內部，間距更緊湊也更有意圖，在廣闊的虛空中創造焦點密度。宏觀層面的空曠與微觀層面的精準之間的對比，賦予了網站其電影般的韻律。
圓角半徑尺度
| 值 | 應用場景 |
|---|---|
| 4px | 標籤、徽章、微型元素 |
| 8px | 標準卡片、輸入框、影片容器 |
| 12px | 特色卡片、圖片容器、按鈕（非圓角膠囊） |
| 20px | 頂部圓角卡片（20px 20px 0 0），強制回應視窗頁首 |
| 340px | 大型圓角裝飾元素 |
| 9999px | 圓角膠囊按鈕、圓角膠囊徽章、導覽元素 |
6. 深度與層級
| 層級 | 處理方式 | 用途 |
|---|---|---|
| 基礎 | 無陰影，深色表面 | 預設頁面背景 |
| 細微 | rgba(0,0,0,0.1) 0px 0px 0px 1px + 內嵌白色發光 |
靜止卡片 |
| 中等 | 多層：1px 環 + 2px + 4px + 8px 陰影疊加 | 提升卡片，特色區塊 |
| 高 | rgba(0,0,0,0.25) 0px 25px 50px -12px |
強制回應視窗、下拉選單、遮罩層 |
| 焦點 | 0px 0px 0px 2px #36F4A4 |
鍵盤焦點環（霓虹綠） |
Shopify 的陰影系統異常精密。卡片不使用單一值陰影，而是使用疊加的多層方式：用於邊界定義的 1px 環、用於自然光衰減的 2px/4px/8px 漸進模糊，以及模擬頂部照明玻璃表面的精緻內嵌白色發光（rgba(255,255,255,0.03)）。在深色背景上，陰影從已經很深的表面繼續加深，因此陰影更像「環境遮蔽」而不是傳統的高度——卡片看起來略微下沉入表面，而不是漂浮在其上。
裝飾性深度
- 深青綠漸層：英雄區塊和產品展示區後方的環境徑向渲染
- 聚光燈效果：從中心亮區消退至黑色的區域，營造發表會式戲劇照明
- 邊緣發光：透過內嵌盒陰影在深色卡片上形成細微的亮色邊緣
- 綠色氛圍光暈：背景漸層中的微弱綠色調，呼應品牌強調色
7. 該做與不該做
該做
- 使用深青綠-黑色表面層次（虛空黑 → 深青綠 → 深森林綠 → 森林綠）來營造深度
- 保持展示排版在 330-400 字重——飄逸的輕盈感是設計的標誌
- 將霓虹綠（
#36F4A4）專門用於焦點狀態和關鍵強調高亮 - 為所有主要 CTA 按鈕套用 9999px 圓角半徑——完整圓角膠囊不可妥協
- 為卡片高度使用多層陰影系統——單一陰影看起來平淡
- 在所有文字中保持
ss03OpenType 特性——這是排版身份的一部分 - 內文使用 Inter Variable，標題使用 NeueHaasGrotesk——不要混淆它們的角色
- 在區塊之間創造戲劇性間距（80px+）以獲得電影般的節奏
不該做
- 不要在深色背景上將純黑色（#000000）用於文字——只用白色（#FFFFFF）
- 不要引入暖色（橙色、紅色、黃色）——色盤嚴格限於冷色（綠色、青綠色、中性色）
- 不要為 NeueHaasGrotesk 內文使用高於 500 的字重——重字重會破壞飄逸感
- 不要將綠色強調色套用於大面積區域——霓虹綠只用於小而精準的高亮
- 不要在互動元素上使用尖銳角（0px 圓角）——所有元素都應有圓角
- 不要添加亮色背景——深色主題是根本，不是可選的
- 不要使用單層盒陰影——疊加方式是整個系統
- 不要將內文的行高設定在 1.56 以上——Shopify 的文字相對緊湊
- 不要在同等大小/角色下混用 NeueHaasGrotesk 和 Inter——它們的字重尺度不同
- 不要為標題設定低於 0 的字距——Shopify 標題的字距為中性或正值
8. 響應式行為
中斷點
| 名稱 | 寬度 | 主要變化 |
|---|---|---|
| 行動裝置 | <640px | 單欄，漢堡導覽，展示文字縮至 48px，16px 內邊距 |
| 平板 | 640-1024px | 兩欄網格開始，展示文字 70px，32px 內邊距 |
| 桌面 | 1024-1440px | 完整版面，展開導覽，96px 展示文字，64px 內邊距 |
| 大桌面 | >1440px | 最大寬度容器置中，增加區塊間距 |
觸控目標
- 最小觸控目標：44x44px（WCAG AAA）
- 圓角膠囊按鈕：最低 48px 高度配慷慨的水平內邊距
- 導覽連結：44px 觸控區域
- 卡片表面：連結時整張卡片可點擊
折疊策略
- 導覽列：水平全連結 → 1024px 以下變漢堡選單；Logo 和 CTA 按鈕保持可見
- 英雄區塊：96px 展示文字 → 平板 70px → 行動裝置 48px；保持單欄置中對齊
- 功能區塊：文字+圖片兩欄 → 768px 以下疊加為單欄
- 統計：水平列 → 行動裝置疊加為垂直
- 區塊內邊距：隨視埠縮小從 64px → 40px → 24px → 16px
- 卡片：網格 → 疊加，行動裝置保持全寬
圖片行為
- 產品截圖：在深色容器內響應式顯示，保持長寬比
- 英雄圖片：所有中斷點全寬，延遲載入配深色佔位符
- 管理 UI 預覽：按比例縮放，行動裝置可能裁切
- 所有圖片使用 CDN（
cdn.shopify.com）配響應式 srcset
9. 智能代理提示指南
快速顏色參考
- 主要 CTA：Shopify 白（
#FFFFFF） - 頁面背景：虛空黑（
#000000） - 卡片表面：深青綠（
#02090A） - 區塊背景：深森林綠（
#061A1C） - 提升背景：森林綠（
#102620） - 強調色：霓虹綠（
#36F4A4） - 內文文字：白色（
#FFFFFF） - 靜默文字：靜默灰（
#A1A1AA） - 深色邊框：深色卡片邊框（
#1E2C31）
範例元件提示
- 「在真實黑色（#000000）背景上建立一個英雄區塊，使用 96px/330 的 NeueHaasGrotesk 白色標題、20px/500 的 #A1A1AA 副標題，以及兩個圓角膠囊按鈕：白色填充（9999px 圓角）和帶 2px 白色邊框的幽靈按鈕」
- 「在深青綠（#02090A）上設計一張帶 1px #1E2C31 邊框、12px 圓角、多層陰影（1px 環 + 2px/4px/8px 模糊，10% 黑色）的功能卡片，內含 32px/360 白色標題和 18px/400 #A1A1AA 內文」
- 「在深森林綠（#061A1C）上建構一個統計區塊，使用 96px/750 白色數字（NeueHaasGrotesk）、16px/400 #A1A1AA 描述標籤，以及統計塊之間 64px 的慷慨間距」
- 「建立一個黏性導覽列，背景透明（捲動時變為 #102620），左側白色 Shopify Logo，18px/500 白色導覽連結配 0.72px 字距，右側白色圓角膠囊按鈕「Start for free」」
- 「設計一個帶 rgba(255,255,255,0.2) 霧面玻璃背景、4px 圓角、12px 16px 內邊距、16px 白色文字的標籤/徽章——漂浮在深色卡片表面上」
迭代指南
使用此設計系統完善已產生的介面時：
- 每次專注於一個元件
- 引用本文件中的具體顏色名稱和十六進位代碼
- 記住：這是深色優先設計——淺色表面是例外，不是規則
- 展示文字應始終感覺羽毛輕盈（字重 330-400）——如果看起來很重，降低字重
- 霓虹綠（#36F4A4）是珍貴的——只為焦點和強調色節儉使用
- 深色表面層次（黑色 → 深青綠 → 深森林綠 → 森林綠）創造細微深度
- 陰影是多層的——單個
box-shadow值無法捕捉 Shopify 卡片的感覺 ss03OpenType 特性必須在所有文字上啟用以保持排版一致性