用途：在编写界面代码前，先查阅该技能，挑选正确组件并遵循其最佳实践，用真实设计系统知识替代凭空猜测。适用于构建网页、落地页、营销站、SaaS 仪表盘、后台与设置页、表单、数据表格、导航结构、模态/抽屉/气泡等浮层，以及任何 React、HTML/CSS 或 Tailwind UI 组件。
主要能力：提供 60+ 组件模式的参考（完整清单见 components.md），并给出设计哲学与质量基线。核心原则包括：克制优先于装饰、以排版承载层级、中性色为主加一个强调色、用 8px 网格组织间距、可达性为硬性要求（WCAG AA 对比度、焦点指示、语义 HTML、键盘导航），并避免紫色渐变、Inter/Roboto 默认字体、均等卡片网格等通用 AI 审美。
使用方式：第一步识别需求涉及哪些组件（如“导航”映射到 Header、Navigation、Breadcrumbs、Tabs；“表单”映射到 Form、输入框、Select、Checkbox、Radio、Button 等），查 components.md 按名称或别名定位。第二步套用各组件最佳实践，涵盖布局、交互、排版与间距、状态（空状态、加载、校验）。第三步从 Modern SaaS（默认）、Apple 级极简、企业级、创意/作品集、数据仪表盘等风格预设中选择方向，不明确时可询问用户。第四步生成代码：除用户另行指定外，栈为 React + Tailwind CSS，使用 8px 网格间距、CSS 变量或 Tailwind 配置统一配色、Tailwind 文字工具与 Google Fonts 字体搭配，实现 hover/focus/active/disabled 各状态，移动优先并测试 375、768、1440 px，使用语义 HTML 与 ARIA、做好焦点管理。
限制：资料未提供安装命令、价格、平台支持或效果数据；输出质量以“顶级 SaaS 公司资深产品设计师”为标尺，但实际效果取决于模型与项目上下文。