frontend-designer

激活约定

当 Agent 需要选择、审查或记录可用于生产环境的技术方向时，请将此技能用于前端设计系统决策。

• 设计或审查 UI 系统、组件结构、设计令牌、布局或视觉交互。
• 选择 CSS 架构、响应式行为、无障碍约束或动效规则。
• 将代码库的视觉方向转化为可直接实施的前端指导。

不要将此技能用于一般性说明、文案编辑，或不会影响架构或可复用实现模式的一次性代码更改。

硬性规则

• 保留代码库的设计令牌和组件状态约定；不要硬编码孤立的视觉决策。
• 优先使用语义化 HTML 和原生控件，而非 ARIA 替代方案。为交互式 UI 明确键盘行为、可见焦点、可测量的对比度以及减少动态效果的行为。
• 保持响应式组件可复用，为媒体和字体预留布局空间；除非有证据证明权衡可以接受，否则避免造成性能回退。
• 主要答复先给出决策；将深入理由放在本地参考资料中，而非写成长篇行内说明。
• 将新版本、浏览器、API、法律或采用情况相关的主张写入更新日志或决策指南前，先行核实。

决策关卡

要检查的证据	决策
代码库原生的 CSS 架构、命名、lint、构建流程和团队约定	保留既有范式。只有在代码库支持且已接受迁移成本时，才引入层、CSS Modules、CSS-in-JS、工具类或命名约定。
现有的 Design.md、design.md、设计令牌来源或获批的设计工具	若存在，则将其视为视觉事实来源。不要强制要求特定文件名、生成交接文件或假定存在外部设计工具。
支持的浏览器矩阵和回退策略	根据该矩阵决定是否使用容器查询、嵌套、:has()、light-dark()、滚动驱动动画和其他平台特性；必要时定义回退方案。
已获批的设计令牌约定以及浏览器／构建支持	如果约定选用 OKLCH，则新指定的令牌仅使用 OKLCH。未经批准的成本和兼容性计划，不要强制进行旧版颜色格式迁移。
产品主题需求和设计来源	只有产品和设计来源要求时，才优先采用深色模式；否则保留现有主题策略和语义令牌行为。
组件复用、页面结构、内容和视口需求	在支持的情况下，可复用组件优先采用容器查询；当视口媒体查询、移动端优先、桌面端优先或组合方式更适合代码库和产品时，则采用相应方案。
无障碍范围和可衡量的验收标准	保留语义化 HTML、键盘访问、焦点可见性、对比度测量、触控目标要求以及减少动态效果的行为。只有在产品范围明确要求时，才应用特定司法管辖区的要求。
性能证据、预算和交付路径	只有在兼容浏览器矩阵且有实测或明确的性能目标支持时，才使用布局隔离、content-visibility、图像格式、字体加载和动画技术。
已安装的代码库工具和获批的执行环境	如果有可用的代码库原生验证命令，则运行该命令。若依赖项、目标、权限或证据不可用，不要指定 npx、浏览器审计、编码或设计工具命令。

执行步骤

1. 识别仓库架构、设计来源、浏览器矩阵、无障碍范围、性能证据、团队约定、工具可用性和迁移成本。
2. 在选择新颖的视觉设计之前，先定义或保留令牌、状态、语义化 HTML、焦点、对比度和减少动态效果方面的约定。
3. 选择兼容性最佳的最精简 CSS、布局、组件、主题和动态效果方案；记录所需的回退方案和未采用的替代方案。
4. 仅在需要详细的决策矩阵、示例、安全措施或命令前置条件时，才阅读 references/technical-reference.md。
5. 说明所选模式、证据、运行时风险、回退或迁移计划以及验证路径。只有在经过核实后，才添加变更日志声明。

输出约定

请返回：

• 建议的决策、仓库证据，以及该决策为何适用。
• 未采用的替代方案及其具体权衡；适用时包括迁移成本。
• 无障碍、浏览器、性能和运行时风险，以及相应的缓解措施或回退方案。
• 仓库中可用的验证步骤，或采用前仍需获取的证据。

参考资料

• references/technical-reference.md — 针对 v3.0.1 整理的技术依据和有条件的决策指南。
• references/source-index.md — 来源索引，以及对版本敏感声明的核实规则。