Design Arsenal — الأداة الموحدة لتصميم الواجهات

一個工具。一個入口點。11 個模組。 這是一個單一技能 — 所有操作都透過這個檔案執行。七個世界級的上游工具與四個原創模組不再是分離的技能，而是內部的模組，每個都有一個 MANUAL.md 文件，當任務需要時從硬碟讀取。

EXTRACT  →  TASTE  →  BUILD  →  MOTION  →  POLISH  →  VERIFY
 extract     taste     code      gsap /     impeccable   playwright-cli
 + design-tokens       react-bits  transitions
rtl-arabic (context layer — any Arabic content)
a11y (gates every stage)        web-vitals (budgets every stage)

نظام أداة واحدة: تُنصَّب هذه المهارة مرة واحدة كأداة واحدة باسم design-arsenal، وكل ما تفعله يمر عبر هذا الملف. الأدوات السبع السابقة أصبحت وحدات داخلية (مع 4 وحدات أصلية: rtl-arabic وa11y وdesign-tokens وweb-vitals) — لا تُنصَّب منفردة ولا تظهر كأدوات مستقلة، بل تُقرأ أدلة استخدامها (MANUAL.md) من القرص عند الحاجة فقط.

🧭 模組調度 — 請先閱讀此表

從任務中識別一個模組，從硬碟讀取其 MANUAL.md（路徑相對於此檔案目錄），然後遵循該文件。單一任務最多載入兩個模組。

#	任務訊號（使用者要求）	模組	從硬碟讀取
1	複製網站設計：「從 stripe.com 提取設計」、「此網站使用了哪些 tokens/顏色/字型」、「將此 URL 轉換為 Tailwind 主題」	extract (designlang)	`skills/extract-design/MANUAL.md`
2	建構前的藝術指導與反模板：「建立登陸頁面」、「不要像模板的設計」、「挑選調色盤/字型方向」	taste (taste-skill v2)	`skills/taste/MANUAL.md`
3	優化、審查或強化現有 UI：「打磨」、「稽核」、「評論」、「更大膽」、「更安靜」、「排版」、「上色」、「強化」、「精煉」	polish (impeccable, 24 個命令)	`skills/impeccable/MANUAL.md`
4	進階程式動畫：「GSAP」、「滾動動畫」、「時間軸」、「ScrollTrigger」、「stagger」、「pinning」	motion/gsap (8 個模組)	`skills/gsap/gsap-<module>/MANUAL.md`
5	現成的動畫 React 元件：「動畫英雄區」、「文字效果」、「動畫背景」、「眩光懸停」、「分割畫面」	components (react-bits, 218 個)	`skills/react-bits/CATALOG.md`
6	CSS 微互動與 UI 動畫：「模態框轉場」、「toast」、「通知徽章」、「骨架載入器」、「成功勾選」、「AI 思考狀態」	motion/transitions (43+ 片段)	`skills/transitions/transitions-dev/MANUAL.md`
7	驗證或自動化：「在瀏覽器中測試」、「截圖」、「檢查流程是否正常」、「錄製影片」、「點擊整個流程」	verify (playwright-cli)	`skills/playwright-cli/MANUAL.md`
8	阿拉伯文/RTL 介面：「阿拉伯文 UI」、「RTL」、「عربي」、「從右到左」、「bidi」、任何包含阿拉伯文的內容	rtl-arabic (原創)	`skills/rtl-arabic/MANUAL.md`
9	無障礙：「a11y」、「accessible」、「WCAG」、「對比度」、「aria」、「螢幕閱讀器」、「鍵盤」	a11y (原創)	`skills/a11y/MANUAL.md`
10	設計代碼：「design tokens」、「DTCG」、「主題 token」、「CSS 變數主題」、「將調色盤轉換為 Tailwind」、「token 架構」	tokens (原創)	`skills/design-tokens/MANUAL.md`
11	效能：「慢速頁面」、「lighthouse」、「core web vitals」、「LCP」、「INP」、「CLS」、「perf budget」、「render-blocking」、「أداء」、「بطيء」、「سرعة」	web-vitals (原創)	`skills/web-vitals/MANUAL.md`

重疊 → 決勝規則：

建立新的東西 → 先 taste（方向），然後在實作時使用 react-bits 或 gsap。
重新設計現有的東西 → 先 polish 稽核/評論，如果新方向需要再 taste。
純微互動（單一元素，開/關狀態）→ transitions（CSS，低成本）。完整場景編排、滾動或物理 → gsap。
機器可讀的 tokens（JSON/DTCG 檔案）→ tokens。來自即時網站的文字設計簡報 → extract。截圖 → tokens → 直接 tokens。
任何阿拉伯文內容 → 在設定樣式前先讀取 rtl-arabic，無論哪個模組主導。
動畫 + 無障礙問題 → a11y 的減少動畫規則永遠優先於動畫豐富度。
動畫 + 效能問題 → web-vitals 的主執行緒預算優先；動畫只透過 transform/opacity 傳送。
「頁面很慢」→ 先 web-vitals 靜態 lint（結構性原因），然後測量（其手冊 §8）— 切勿猜測指標。
任何 UI 變更後 → 提供使用 verify（截圖結果）進行驗證。

🌳 決策樹 — 用四個問題路由

依序詢問，並在第一個符合時停止：

內容是否包含阿拉伯文（或其他 RTL 文字）？ → 新增 rtl-arabic 作為上下文層，然後繼續下方。
輸入是否為要消費的現有設計？ URL → extract；截圖/模型 → tokens；調色盤檔案 → tokens。
任務是建立新的，還是更改現有的？ 新的 → taste → 建立（按需從 react-bits/gsap/transitions 提取）。現有的 → 先 polish 稽核（/impeccable audit），然後只有需要新方向時才 taste。
任務以什麼結束？ 交付 UI → 執行 a11y 門控 + web-vitals lint + verify 截圖。產生主題/token 檔案 → tokens 匯出 + 配對的 a11y 稽核。

每個任務最多讀取兩個 MANUAL.md 檔案；四個原創模組可與一個上游模組堆疊（例如 rtl-arabic + taste）。

🚫 反模式註冊表 — 絕不交付這些

從手冊收集的跨模組禁令。如果您的輸出包含其中一個，任務尚未完成：

一個代替按鈕的 <div onClick>（a11y §3）— 鍵盤無法使用，螢幕閱讀器不可見。
灰色文字在彩色背景上，或任何低於 4.5:1 的前景/背景配對（a11y §2, impeccable 禁令）— 執行對比度腳本而不是猜測。
沒有替換焦點環的 outline: none（a11y §5）。
沒有 prefers-reduced-motion 保護的動畫（a11y §7, transitions 規則）— 較嚴格的規則勝出。
阿拉伯文文字上的 letter-spacing（rtl-arabic §3）— 它會破壞連接的文字。
RTL 頁面中使用實體 left/right CSS 屬性（rtl-arabic §1）— 使用邏輯屬性。
當 token 檔案存在時，元件中硬編碼的 hex/px（tokens §7）— 只有 token 檔案攜帶原始值。
對單一元素懸停使用 GSAP（使用 transitions）或對滾動編排場景使用 CSS 轉場（使用 gsap）。
不在 catalog.json 中的 react-bits 元件名稱 — 切勿發明。
卡片內嵌卡片、彈跳緩動在 UI 上，以及其他 impeccable 的模板問題 — /impeccable audit 會捕捉它們。
英雄區/LCP 圖片上的 loading="lazy"（web-vitals §2）— 瀏覽器只在佈局後發現請求。
沒有明確 width/height 的 <img> 或 <iframe>（web-vitals §3）— 保證佈局位移。
<head> 中沒有 defer/async 的標準 <script src>，或任何 document.write（web-vitals §7）。
沒有 font-display 的 @font-face，或沒有 preconnect 到 fonts.gstatic.com 的 Google-Fonts 樣式表（web-vitals §6）。

📦 內部結構

design-arsenal/                  ← 一個技能，安裝一次
├── SKILL.md                     ← 單一入口點（此檔案）
├── index.json                   ← 機器可讀的模組索引
├── install.sh                   ← 一鍵安裝程式（所有平台）
├── ATTRIBUTION.md               ← 來源與授權
├── README.md                    ← الدليل الكامل بالعربية
├── demo/index.html              ← 動態堆疊的運作示範
├── examples/gsap/               ← GSAP 入門範例（react/vue/nuxt/vanilla）
└── skills/                      ← 內部模組（僅參考手冊）
    ├── extract-design/          ← designlang: URL → 完整設計系統（17+ 檔案）
    ├── taste/                   ← taste-skill v2: 13 條反模板規則 + 函式庫 + 檢查器
    ├── impeccable/              ← impeccable: 24 個命令 + 60+ 偵測器規則 + 腳本
    ├── gsap/                    ← 8 個 GSAP 模組：核心/時間軸/scrolltrigger/react/插件/…
    ├── react-bits/              ← 218 個動畫 React 元件（TS-CSS + TS-Tailwind）+ 目錄
    ├── transitions/             ← transitions.dev: 18 個轉場參考 + tokens
    ├── playwright-cli/          ← 瀏覽器自動化模組 + 10 個參考
    ├── rtl-arabic/              ← 原創：阿拉伯文/RTL 介面（邏輯屬性、排版、10 點稽核）
    ├── a11y/                    ← 原創：WCAG 2.2 AA 門控 + 零依賴對比度腳本
    ├── design-tokens/           ← 原創：DTCG 架構 + 多目標轉換器
    └── web-vitals/              ← 原創：Core Web Vitals 手冊 + 靜態 HTML linter

每個模組目錄都包含一個 MANUAL.md（以前是它自己的 SKILL.md）。由於只有這個根 SKILL.md 存在，您的代理會註冊並載入恰好一個工具 — 沒有技能蔓延、沒有重複觸發器、沒有來自七個已安裝技能的上下文膨脹。

🚀 快速開始

從零到登陸頁面（完整管道）：

（可選偵查）對 1–2 個競爭對手 URL 進行 extract → tokens + 模式。
taste → 閱讀簡報，推斷方向（類型/調色盤/佈局系列），執行禁令。
建立。從 transitions 提取動畫，從 react-bits 提取現成元件，從 gsap 提取場景工作。
polish → 在交付前執行 /impeccable polish + /impeccable audit。
verify → 在桌面和行動裝置寬度上截圖，確認沒有東西損壞。

只是想修復難看的 UI？ → 僅 .polish（開始：/impeccable audit <target>）。 只是想製作動畫？ → 微互動用 transitions，場景用 gsap，永遠不要在相同元素上同時使用。 頁面慢 / vitals 失敗？ → web-vitals：對標記進行 lint，套用 LCP/CLS/INP 手冊，然後測量（§8）。

⚙️ 一次性環境注意事項

extract 需要 Node 20+ 和 Playwright（npx designlang <url> 在首次執行時處理安裝）。
polish 腳本在 skills/impeccable/scripts/ 中是自包含的二進位檔案；在沒有 sh 的 Windows 上使用 impeccable.cmd。
taste 腳本為零依賴 Node（node skills/taste/scripts/lint.mjs src/）。
web-vitals linter 為零依賴 Node 18+（node skills/web-vitals/scripts/webvitals.mjs page.html）。
verify 需要 npm install -g @playwright/cli + playwright-cli install-browser chromium。
components 本地來源是純文字檔案 — 從 ts-tailwind/（Tailwind 專案）或 ts-default/（CSS 專案）複製，或使用即時註冊表：在 components.json 中使用 {"registries":{"@react-bits":"https://reactbits.dev/r/{name}.json"}}。
GSAP 範例位於 examples/gsap/{vanilla,react,vue,nuxt}。

🧠 代理規則

一個工具，一個入口。 所有請求都透過此檔案路由。如果任務與管道匹配，按管道順序逐模組工作 — 不要將模組視為單獨安裝的技能；它們是此技能內部的。
從硬碟讀取。 模組路徑相對於此檔案的目錄。在行動之前完全讀取模組的 MANUAL.md。
匹配，不要混合。 一個任務 → 一個主要模組。僅按上述管道順序堆疊模組。
尊重每個模組的禁令。 taste 禁止模板外觀；impeccable 禁止灰色文字在彩色背景上、卡片內嵌卡片、彈跳緩動；transitions 和 a11y 要求 prefers-reduced-motion 保護；rtl-arabic 禁止阿拉伯文上的 letter-spacing 以及在 RTL 頁面中使用實體 left/right；web-vitals 禁止惰性英雄區、無尺寸媒體和阻塞渲染的 head 腳本。當規則衝突時，較嚴格的規則勝出 — 而 a11y 安全規則凌駕於所有美學偏好之上。
切勿發明元件名稱。 對於 react-bits，僅使用 skills/react-bits/catalog.json 中存在的名稱；否則根據 taste 規則從頭建立。
測量，不要用眼睛看。 對比度主張來自 node skills/a11y/scripts/contrast.mjs；token 匯出來自 node skills/design-tokens/scripts/convert.mjs；結構性效能主張來自 node skills/web-vitals/scripts/webvitals.mjs。如果腳本與您的眼睛不一致，腳本勝出。
阿拉伯文內容透過 rtl-arabic 路由。 一旦任務包含阿拉伯文或 RTL 內容，在撰寫任何 CSS 之前先讀 skills/rtl-arabic/MANUAL.md — 即使另一個模組主導。
歸屬。 七個上游模組來自獨立的開源專案 — 保持其授權完整（請參閱 ATTRIBUTION.md）。四個原創模組（rtl-arabic、a11y、design-tokens、web-vitals）是此套件的一部分。

Design Arsenal — 統一的設計工具