用途
frontend-designer-lite 是一个独立技能，用于前端设计系统决策场景：当智能体需要选择、评审或记录生产级技术方向时使用。它适用于设计或评审 UI 系统、组件结构、设计令牌、布局或视觉交互；选择 CSS 架构、响应式行为、无障碍约束或动效规则；以及把仓库的视觉方向转化为可直接实施的前端指导。
它不适用于通用解释、文案编辑，或那些不影响架构与可复用实现模式的一次性代码改动。
主要能力
该技能以“决策优先”的方式输出前端设计系统建议，并遵循若干不可协商的运行时规则：
- 保留仓库的令牌与组件状态契约，不硬编码孤立的视觉决策。
- 优先使用语义化 HTML 和原生控件，而非 ARIA 替代方案；为每个交互式 UI 定义原生键盘行为、可见焦点、可测对比度、触控/指针标准以及减少动效行为。
- 保持组件可复用、响应式；预留媒体与字体几何空间，不接受没有兼容证据的性能回退。
- 回答以决策为先，不在缺少当前权威验证的情况下添加版本、浏览器、API、无障碍法律、安全、采用率或法律适用性声明。
- 将安全需求视为有条件的产物与仓库输入；证据缺失时不推断控制、策略、遥测或外部工具权限。
使用方式
使用前需通过“必需证据门”收集以下输入，若必需输入不可用，应停止并报告缺失证据，而不是猜测或规定通用技术栈：
- 仓库架构与迁移：检查现有 CSS 架构、命名、lint、构建流水线、团队约定与可接受的迁移成本。保留既有范式；只有在仓库支持并有已接受的迁移计划时，才引入级联层、CSS Modules、CSS-in-JS、工具类或命名约定。
- 设计来源：检查 Design.md、design.md、令牌来源、设计系统包、设计工具导出或其他已批准来源。将其大小写敏感的路径及令牌、语义、组件、状态契约视为本地视觉真相，并与代码和团队约定协调冲突。不要求特定文件名、不重命名来源、不假设设计工具。
- 浏览器与回退策略：在使用 CSS 嵌套、容器查询、:has()、light-dark()、滚动驱动动画、WAAPI、观察器或相关 API 前，检查支持的浏览器矩阵；必要时定义兼容回退。
- 令牌、颜色与主题：保留原始、语义、组件层级或本地等价物，包括加载、禁用、错误、成功、选中状态。仅当已批准的令牌契约与浏览器/构建矩阵选择 OKLCH 时，才对新指定的令牌使用 OKLCH；否则保留兼容格式。测量每个前景/背景与焦点配对。仅当产品需求和已批准设计来源要求时才采用暗色优先；否则保留现有语义令牌与主题机制。
- 布局与组件：仅当受支持且有价值时选择组件局部容器查询；文档级布局、导航或既有响应式系统使用视口查询。根据信息架构、内容、组件归属与视口证据选择移动优先、桌面优先、网格、弹性、命名区域或组合。使用语义结构：需要时为区域提供可访问名称，符合策略时使用原生 <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 与交付选择，而非声称普遍支持。
执行顺序
- 识别仓库架构、设计来源、浏览器矩阵、无障碍与法律范围、性能证据、团队约定、工具可用性、迁移成本与安全约束。
- 缺失必需证据时停止。否则在视觉处理之前，先保留令牌、状态、语义 HTML、焦点、对比度、减少动效与媒体几何契约。
- 选择最小的兼容 CSS 范式、布局、组件、令牌、主题、媒体与动效方案。记录所需回退、迁移步骤与被拒替代方案及其具体权衡。
- 在使用任何时效性版本、浏览器、API、无障碍法律、安全、采用率或法律声明前，对照当前权威证据进行验证。
- 运行可用的仓库原生验证，并将不可用的验证报告为仍需证据；不虚构成功的命令或结果。
输出契约
返回内容应包括：
- 推荐模式、仓库与来源证据，以及它为何契合既有契约。
- 被拒替代方案及具体权衡，相关时附迁移成本。
- 无障碍、浏览器、性能、安全与运行时风险，附缓解措施与兼容回退。
- 回退或迁移计划，包括需要它的条件。
- 验证输出：实际可用的命令及其结果，以及采用前仍需的缺失证据或验证。
适用场景与限制
适用场景：前端设计系统决策、UI 系统与组件结构评审、CSS 架构与响应式行为选择、无障碍与动效规则制定、将仓库视觉方向转化为实施指导。
限制：不用于通用解释、文案编辑或一次性代码改动；证据缺失时必须停止并报告，不得猜测或强推通用技术栈；不得在缺少权威验证时添加版本、浏览器、API、法律或安全声明；不得虚构命令或结果。