web-design

Web Design

当真正的问题是**“哪个上游 Web 设计方案应该负责这项视觉任务，以及如何安装它？”**时，请使用此技能。

这是一个路由包，而非重新实现。79 个实际子技能位于上游的 MengTo/Skills · agent-skills/web-design。 这里的工作是：

1. 将请求归入七个类别之一；
2. 在该类别中选择范围最窄的子技能；
3. 如果本地尚未安装，则获取该技能；
4. 按文档规定的顺序安排跨类别工作；并且
5. 如果本仓库的系统、架构或无障碍技能才是真正的负责方，则转交给它们。

七个类别

类别	数量	在以下请求中使用
风格／设计系统套件	23	整体品牌或网站美学——背景、主视觉、导航、卡片和字体的组合（“暗色玻璃仪表盘”“简洁的米色 SaaS”“明亮的绿色技术系统”）
全站质量与方向	10	页面／网站级需求或质量门槛（“Awwwards 级品质”、定价页面、企业 AI 产品页面、服务预约网站）
动效与滚动系统	10	滚动行为、显示时机、固定定位、编排、滚动进度
WebGL／3D 背景与着色器	8	与某个指定包无关的实时渲染背景或主视觉对象（网格、激光、粒子场、多面 3D 对象）
库嵌入与集成	10	指定的第三方库或包——GSAP、Three.js、Tailwind、Matter.js、globe.gl、cobe、Vanta.js、Unicorn Studio、Shaders
组件与状态效果	4	单个组件的交互状态——悬停、加载、焦点、选中、按下
CSS 技术基础元素	14	单一、小型、可复用的 CSS／SVG 技巧或装饰细节（渐变边框、Alpha 遮罩、渐进模糊、切角、阴影、图标）

完整的 79 行表格，以及每个子技能对应的“适用场景”，请参阅 references/skill-catalog.md。类别选择规则、 最窄匹配规则和组合规则请参阅 references/family-routing.md。

何时使用此技能

• 任务是设计或升级营销网站、落地页、作品集、编辑类页面或仪表盘框架的视觉层
• 需要在两个或更多上游 Web 设计子技能之间做出选择，但不确定哪个范围最窄
• 请求指定了某种效果（光标轨迹、激光背景、渐进模糊、滚动固定区段），需要找到已包含该效果方案的技能
• 请求指定了某个库（GSAP、Three.js、Vanta、globe.gl、Unicorn Studio），需要的是集成／清理模式，而非临时编写的设置代码
• 一个页面需要组合多个视觉层，并且需要安全的应用顺序
• 任务所需的上游子技能尚未安装

何时不要使用此技能

• 任务是采用现成的动画 React 组件库，而不是自行编写效果 → 使用 react-bits

• 任务是生成设计参考材料——真实应用截图、竞品参考、UI 评审输入 → 使用 lazyweb

• 任务是设计令牌治理、主题契约或系统范围的一致性规则 → 使用 design-system

• 任务是断点策略、页面框架适配或容器查询分类 → 使用 responsive-design

• 任务关注的是 React 渲染／打包／数据获取性能，而非视觉样式 → 使用 react-best-practices

• 任务是无障碍审查、WCAG 合规或辅助技术行为 → 使用 web-accessibility

• 任务是交互式 3D 游戏开发（摄像机、敌人、战斗、遭遇战） → 使用 web-game-development

• 任务是生成 2D 像素风精灵图集 → 使用 perfectpixel

完整的职责边界说明请参阅：references/route-outs.md。

说明

步骤 1：将请求归入一个类别

使用 references/family-routing.md §1。根据请求的形态匹配，而不是根据关键词。如果请求横跨两个类别，则根据主要意图进行路由——关于组件状态语义的问题属于「组件与状态效果」，即使它以命名软件包的形式提供；关于如何接入库的问题属于「库嵌入与集成」。

步骤 2：选择最精确的子技能

使用 references/skill-catalog.md，并指定一个子技能。优先选择具体方案，而不是更宽泛的相邻技能：「为这张图片的底边添加渐隐效果」属于 css-alpha-masking，而不是整个样式包。

步骤 3：检查是否已安装

ls "${SKILLS_ROOT:-$HOME/.agents/skills}" | grep -x "<matched-skill-name>" || echo "not installed"

步骤 4：如果缺少子技能，则获取它

scripts/fetch-upstream-skills.sh 仅对 https://github.com/MengTo/Skills.git 中的 agent-skills/web-design 执行稀疏检出，并将所需文件夹复制到 ${SKILLS_ROOT:-$HOME/.agents/skills}，不会删除其中已有内容。

scripts/fetch-upstream-skills.sh --list
scripts/fetch-upstream-skills.sh --skill gsap --skill animation-on-scroll
scripts/fetch-upstream-skills.sh --dry-run --all
scripts/fetch-upstream-skills.sh --all

步骤 5：安排跨类别工作的顺序

需要多个类别时，按以下顺序应用（详情见 references/family-routing.md §5）：

1. 方向／样式包——确定颜色、字体和结构规则
2. 布局——网格、容器、分栏布局
3. 背景／3D——根据最终布局调整 WebGL、着色器或粒子层的尺寸
4. 动效——DOM 结构稳定后，再添加滚动和显现系统
5. 组件状态——为实际组件添加悬停／加载／选中／焦点状态
6. 润色——最后添加 CSS 技术基元

步骤 6：说明路由结果

说明类别、选定的子技能、它是原本已安装还是刚获取的、合并了哪些其他类别及原因，以及是否改为转交其他技能处理。

示例

「让我们的落地页有 Awwwards 网站的感觉——深色、玻璃质感，带激光背景和滚动显现效果。」 → 先使用「全站质量与方向」（build-awwwards-quality-sites）确定方向，再使用「样式／设计系统包」（dark-glass-clean-layout）设计表面系统，然后使用「WebGL／3D 背景与着色器」（webgl-laser）制作背景，最后使用「动效与滚动系统」（animation-on-scroll）。按 §5 所述顺序应用。

「在这张主视觉图片的底部添加渐隐效果。」 → CSS 技术基元，仅使用子技能 css-alpha-masking。不要引入样式包。

「在我们的 Next.js 主视觉区域中接入 Vanta.js，并确保路由切换时能清理资源。」 → 「库嵌入与集成」，使用 vantajs。该请求涉及库的接入和生命周期清理，而非视觉方向选择。

「我们的设计令牌在三个应用中不一致。」 → 转交给 design-system。该样式包用于为页面设置样式，不负责管理令牌。

最佳实践

1. 编写代码前先指定一个子技能——当存在匹配方案时，却临时编写着色器或滚动系统，正是此包要避免的问题。
2. 只有请求确实横跨多个层面时，才跨类别组合——大多数请求只需一个子技能。
3. 遵循应用顺序——布局尚未确定就接入动效，会导致它根据过时的元素边界重新测量。
4. 不要叠加两个解决同一问题的子技能（例如两种文字显现方案或两个滚动监听器）；每个部分都选择最精确的匹配项。
5. 以上游的 SKILL.md 为准——获取整个文件夹，不要在此处转述其说明。
6. 尽早转交其他技能处理——令牌治理、组件 API、断点和无障碍由本仓库中的其他技能负责；在此处回答这些问题，只会给出看似自信却错误的建议。

参考资料

• 上游系列：MengTo/Skills · agent-skills/web-design
• references/skill-catalog.md — 按系列分组的全部 79 个子技能
• references/family-routing.md — 系列选择、最精确匹配、组合与排序
• references/route-outs.md — 与本仓库其他技能的边界
• scripts/fetch-upstream-skills.sh — 稀疏检出获取脚本
• 同系列包：web-game-development（Three.js／浏览器游戏）