Design Arsenal — الأداة الموحدة لتصميم الواجهات
一个工具。一个入口。十一个模块。 这是一个单一技能——所有操作都通过这个文件进行。七个世界级的上游工具和四个原创模块不再是独立的技能，而是内部的模块，每个模块通过从磁盘读取的 MANUAL.md 进行文档化，当任务需要时调用。
提取 → 艺术指导 → 构建 → 动效 → 精修 → 验证
extract taste code gsap / impeccable playwright-cli
+ design-tokens react-bits transitions
rtl-arabic（上下文层——任何阿拉伯语内容）
a11y（在每个阶段把关） web-vitals（在每个阶段设定预算）
نظام أداة واحدة: تُنصَّب هذه المهارة مرة واحدة كأداة واحدة باسم
design-arsenal，وكل ما تفعله يمر عبر هذا الملف。الأدوات السبع السابقة أصبحت وحدات داخلية (مع 4 وحدات أصلية: rtl-arabic وa11y وdesign-tokens وweb-vitals) — لا تُنصَّب منفردة ولا تظهر كأدوات مستقلة، بل تُقرأ أدلة استخدامها (MANUAL.md) من القرص عند الحاجة فقط。
🧭 模块分发——先阅读此表
从任务中识别一个模块，从磁盘读取其 MANUAL.md（路径相对于此文件目录），然后遵循其指示。单个任务不要加载超过两个模块。
| # | 任务信号（用户要求） | 模块 | 从磁盘读取 |
|---|---|---|---|
| 1 | 复制网站设计：“从 stripe.com 提取设计”、“该网站使用哪些令牌/颜色/字体”、“将此 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”、“交错”、“固定” | motion/gsap (8 个模块) | skills/gsap/gsap-<module>/MANUAL.md |
| 5 | 现成的动画 React 组件：“动画英雄”、“文本效果”、“动画背景”、“强光悬停”、“分屏” | components (react-bits, 218 个) | skills/react-bits/CATALOG.md |
| 6 | CSS 微交互与 UI 动效：“模态过渡”、“提示框”、“通知徽章”、“骨架加载器”、“成功勾选”、“AI 思考状态” | motion/transitions (43+ 代码片段) | skills/transitions/transitions-dev/MANUAL.md |
| 7 | 验证或自动化：“在浏览器中测试”、“截图”、“检查流程是否正常”、“录制视频”、“点击流程” | verify (playwright-cli) | skills/playwright-cli/MANUAL.md |
| 8 | 阿拉伯语/RTL 界面：“Arabic UI”、“RTL”、“عربي”、“right-to-left”、“bidi”，包含阿拉伯语的任何内容 | rtl-arabic (原创) | skills/rtl-arabic/MANUAL.md |
| 9 | 无障碍：“a11y”、“accessible”、“WCAG”、“contrast”、“aria”、“screen reader”、“keyboard” | a11y (原创) | skills/a11y/MANUAL.md |
| 10 | 设计令牌：“design tokens”、“DTCG”、“theme tokens”、“CSS variables theme”、“将调色板转换为 Tailwind”、“令牌架构” | tokens (原创) | skills/design-tokens/MANUAL.md |
| 11 | 性能：“页面慢”、“Lighthouse”、“核心 Web 指标”、“LCP”、“INP”、“CLS”、“性能预算”、“渲染阻塞”、“أداء”、“بطيء”、“سرعة” | web-vitals (原创) | skills/web-vitals/MANUAL.md |
重叠 → 规则优先级：
- 构建新内容 → 先
taste（方向），然后在实现时使用react-bits或gsap。 - 重新设计现有内容 → 先
polish审核/批评，如果需要新方向则再使用taste。 - 纯微交互（单个元素，打开/关闭状态）→
transitions（CSS，廉价）。完整场景编排、滚动或物理效果 →gsap。 - 机器可读的令牌（JSON/DTCG 文件）→
tokens。来自活动网站的文本设计简报 →extract。截图 → 令牌 → 直接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静态检查 +verify截图。生成主题/令牌文件 →tokens导出 + 颜色对的无障碍审核。
每个任务最多读取两个 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/rightCSS 属性（rtl-arabic §1）——使用逻辑属性。 - 当存在令牌文件时，在组件中硬编码 hex/px 值（tokens §7）——只有令牌文件携带原始值。
- GSAP 用于单元素悬停（使用
transitions），或 CSS transitions 用于滚动编排场景（使用gsap）。 - react-bits 组件名称不在
catalog.json中——切勿发明一个。 - 卡片嵌套、UI 上的弹跳缓动以及其他 impeccable 反模式——
/impeccable audit能发现它们。 - 对首屏/LCP 图像使用
loading="lazy"（web-vitals §2）——浏览器仅在布局后才发现请求。 - 没有显式
width/height的<img>或<iframe>（web-vitals §3）——保证布局偏移。 - 在
<head>中使用经典<script src>而不带defer/async，或任何document.write（web-vitals §7）。 - 不带
font-display的@font-face，或没有预先连接到 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 模块：core/timeline/scrolltrigger/react/plugins/…
├── react-bits/ ← 218 个动画 React 组件（TS-CSS + TS-Tailwind）+ 目录
├── transitions/ ← transitions.dev：18 个过渡参考 + 令牌
├── playwright-cli/ ← 浏览器自动化模块 + 10 个参考
├── rtl-arabic/ ← 原创：阿拉伯语/RTL 界面（逻辑属性、排版、10 点审核）
├── a11y/ ← 原创：WCAG 2.2 AA 关卡 + 零依赖对比度脚本
├── design-tokens/ ← 原创：DTCG 架构 + 多目标转换器
└── web-vitals/ ← 原创：核心 Web 指标操作手册 + 静态 HTML 检查器
每个模块目录包含一个 MANUAL.md（以前是其自己的 SKILL.md）。由于仅存在此根 SKILL.md，您的 Agent 注册并加载恰好一个工具——没有技能膨胀，没有重复触发器，没有来自安装七个技能的上下文膨胀。
🚀 快速启动
从零到落地页（完整流水线）：
- （可选探查）对 1-2 个竞争对手 URL 运行
extract→ 令牌 + 模式。 taste→ 阅读简报，推断方向（类型/调色板/布局系列），执行禁令。- 构建。从
transitions获取动效，从react-bits获取现成组件，从gsap获取场景工作。 polish→ 在发布前运行/impeccable polish+/impeccable audit。verify→ 截图桌面和移动端宽度，确认没有破坏任何东西。
仅修复难看的 UI？ → 仅使用 polish（开始：/impeccable audit <target>）。
仅添加动画？ → 微交互使用 transitions，场景使用 gsap，切勿在同一个元素上同时使用两者。
页面慢 / 指标失败？ → web-vitals：检查标记，应用 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检查器是零依赖 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}。
🧠 Agent 规则
- 一个工具，一个入口。 所有请求都通过此文件路由。如果任务匹配流水线，则按流水线顺序逐个模块工作——不要将模块视为已安装的独立技能；它们属于此工具的内部。
- 从磁盘读取。 模块路径相对于此文件目录。在操作前完整阅读模块的
MANUAL.md。 - 匹配，不要混合。 一个任务 → 一个主要模块。仅按上述流水线顺序堆叠模块。
- 尊重每个模块的禁令。
taste禁止模板化外观；impeccable禁止颜色上的灰色文本、嵌套卡片、弹跳缓动；transitions和a11y要求prefers-reduced-motion保护；rtl-arabic禁止对阿拉伯语文本使用字母间距，以及 RTL 页面中的物理left/right属性；web-vitals禁止延迟加载首屏图像、无尺寸的媒体和渲染阻塞头部脚本。当规则冲突时，更严格的规则获胜——而a11y安全规则优先于所有审美偏好。 - 切勿发明组件名称。 对于 react-bits，仅使用
skills/react-bits/catalog.json中存在的名称；否则在taste规则下从头开始构建。 - 测量，不要靠目测。 对比度声明来自
node skills/a11y/scripts/contrast.mjs；令牌导出来自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）属于此捆绑包的一部分。