frontend-designer-lite

激活约定

当 Agent 需要选择、评审或记录适用于生产环境的技术方向时，使用此独立技能来制定前端设计系统决策。

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

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

不可妥协的运行规则

• 保留代码库的设计令牌和组件状态约定；不要将零散的视觉决策硬编码。
• 优先使用语义化 HTML 和原生控件，而非 ARIA 替代方案。为每个交互式 UI 定义原生键盘行为、清晰可见的焦点、可衡量的对比度、触控／指针标准以及减少动态效果时的行为。
• 保持组件可复用且具备响应式；为媒体和字体预留几何空间，没有相符证据时，不要接受性能回退。
• 答案应以决策为先。未经当前权威来源核实，不要添加有关版本、浏览器、API、无障碍法律、安全、采用情况或法律适用性的说法。
• 将安全要求视为有条件的产品与代码库输入；没有证据时，不要推断控件、政策、遥测或外部工具权限。

必需证据门槛

选择模式前，先收集以下信息。如果无法获取必需输入，请停止并报告缺失的证据，不要猜测或指定通用技术栈。

• **仓库架构与迁移：**检查现有 CSS 架构、命名、Lint、构建流水线、团队约定和可接受的迁移成本。保留已确立的范式；只有在仓库有依据且迁移计划获认可时，才引入级联层、CSS Modules、CSS-in-JS、工具类或命名约定。
• **设计来源：**如有，请检查 Design.md、design.md、Token 来源、设计系统包、设计工具导出或其他获批来源。将其区分大小写的路径以及 Token、语义、组件和状态契约视为本地视觉准则；结合代码和团队约定解决冲突。不要要求特定文件名、重命名来源或假定使用某种设计工具。
• **浏览器与回退策略：**使用 CSS 嵌套、容器查询、:has()、light-dark()、滚动驱动动画、WAAPI、观察器或相关 API 前，先检查支持的浏览器矩阵。必要时定义兼容的回退方案。
• **Token、颜色与主题：**保留原始、语义和组件层级，或保留本地等效层级，并涵盖加载、禁用、错误、成功和选中状态。仅当获批的 Token 契约和浏览器／构建矩阵指定使用 OKLCH 时，新定义的 Token 才只使用 OKLCH；否则保留兼容格式。测量每组前景色／背景色和焦点色的对比度。只有当产品需求和获批设计来源要求时，才优先采用暗色模式；否则保留现有的语义 Token 和主题机制。
• **布局与组件：**仅在受支持且确有价值时，选择组件局部容器查询；文档级布局、导航或既定响应式系统则使用视口查询。根据信息架构、内容、组件归属和视口证据选择移动优先、桌面优先、网格、弹性布局、命名区域或组合布局。采用语义化结构：必要时为区域提供无障碍名称；符合策略时使用原生 <dialog>；表格数据使用原生表格语义；表单明确设置标签、错误、顺序和状态；适用时使用带列表语义的 <nav>。如果能减少经测量的布局偏移，则使用 aspect-ratio、尺寸或等效契约预留媒体几何空间。
• **无障碍与动效：**保留语义化 HTML、标签、名称、角色、状态、键盘顺序、持续可见的 :focus-visible、无遮挡的焦点、可测量的对比度以及适用的触控目标标准。只有原生语义无法表达契约时才添加 ARIA。遵循 prefers-reduced-motion，提供等效的低动效或静态反馈。使用最精简的动效机制，并根据浏览器支持情况、动效策略和测得的主线程开销，决定是否启用 WAAPI、滚动驱动 CSS、观察器和事件监听器。仅当产品范围明确时，才应用特定司法辖区的义务。
• **视觉处理与性能：**只有获批设计来源、层级、对比度、焦点、交互提示、响应式行为、浏览器矩阵和性能证据均支持时，才采用便当式网格、玻璃效果、渐变、粗体、暗色优先呈现或其他潮流设计。使用 content-visibility 或 contain 前，先检查其对渲染和无障碍的影响，并在目标环境中测量。仅在性能分析有依据时，短暂使用 will-change。根据交付流水线、浏览器矩阵和布局偏移证据，选择图像／字体格式、尺寸、加载方式、回退方案和度量指标。
• **工具：**仅运行仓库提供的验证，并确保依赖、目标、权限和预期证据均可用。优先采用有文档说明的包管理器脚本。缺少前置条件时，不要擅自添加隐式安装、外部审计、编码命令或设计工具命令。

实时验证规则

• 未核查当前权威来源前，不得添加有关浏览器、API、无障碍法律、安全性、采用情况或版本的声明。
• URL 只是起点，不能证明某项功能符合仓库的浏览器矩阵、产品范围、构建流水线或回退策略。
• 对每项时效性发布或决策声明，记录验证日期、来源 URL、范围和已确认的行为。
• 使用相关权威来源：语法以 W3C CSS 规范为准，浏览器功能行为以 MDN 为准，适用的无障碍标准以 WCAG 为准，司法管辖区适用性以官方监管机构为准。根据获批的流水线和浏览器策略核查 OKLCH 和交付方案，不得声称其普遍受支持。

执行顺序

1. 确认仓库架构、设计来源、浏览器矩阵、无障碍和法律范围、性能证据、团队惯例、工具可用性、迁移成本和安全约束。
2. 如缺少必需证据，则停止。否则，在进行视觉设计之前，先保留 token、状态、语义化 HTML、焦点、对比度、减少动态效果和媒体几何尺寸方面的约定。
3. 选择兼容性最佳且范围最小的 CSS 范式、布局、组件、token、主题、媒体和动态效果方案。记录所需的回退方案、迁移步骤，以及被否决的替代方案及其具体权衡。
4. 使用任何时效性的版本、浏览器、API、无障碍法律、安全性、采用情况或法律声明前，先依据当前权威证据进行核查。
5. 运行仓库原生且可用的验证，并将无法执行的验证报告为仍需补充的证据；不得捏造成功的命令或结果。

输出约定

请返回：

• 推荐方案、仓库和来源证据，以及该方案符合既定约定的原因。
• 被否决的替代方案，以及具体权衡和相关迁移成本。
• 无障碍、浏览器、性能、安全和运行时风险，以及缓解措施和兼容的回退方案。
• 回退或迁移计划，包括触发计划的条件。
• 验证输出：实际可用的命令及其结果，以及采用前仍需补充的证据或进行的验证。