用途：让智能体设计并实现视觉精致、响应式、可访问且易维护的前端界面，基于设计系统（组件库、间距刻度、颜色令牌、字体刻度）输出可上线的 HTML、CSS（含 Tailwind CSS）及 React、Vue、Svelte 组件，内置 WCAG 合规可访问性与深色模式。
主要能力：先定义设计令牌（4px 基准间距、xs 至 4xl 字体刻度、语义色板、圆角与阴影令牌），再实现带尺寸、颜色、状态变体的组件，覆盖 default、hover、focus-visible、active、disabled，并保证键盘焦点环。使用 CSS Grid 做二维布局、Flexbox 做一维对齐，断点为 sm 640px、md 768px、lg 1024px、xl 1280px，移动优先。可访问性方面优先语义 HTML（nav、main、article、section、aside），颜色对比达 WCAG 2.1 AA（正文 4.5:1、大字 3:1），必要时才补 ARIA。深色模式通过 CSS 自定义属性或 Tailwind 的 dark: 变体实现，避免纯黑背景。
使用方式：向智能体提供界面需求描述，包括框架、样式方案与已有设计令牌；智能体据此产出含响应式行为、可访问性属性与深色模式的组件代码。若用户未提供设计令牌或品牌规范，默认采用中性体系：Inter 或 system-ui 字体、slate 灰中性色板、蓝色主强调色。若框架未知或只要纯 HTML，则默认语义 HTML 加原生 CSS 自定义属性。
适用场景：需要快速搭建一致 UI 组件、响应式仪表盘布局、多主题界面，以及要求键盘可操作和深色模式的生产前端项目。
限制：资料未说明收费、价格、平台与安装命令；具体效果依赖所用框架与项目上下文。额外注意事项包括：用 min-height 而非固定高度应对内容长度变化，深色模式下照片加 brightness(0.9) 滤镜，RTL 场景使用逻辑 CSS 属性并将根元素设为 dir="rtl"。