UI设计系统Skill ui-design-system

---

name: ui-design-system description: Physical AI Hub的设计系统、主题与用户体验规则。

UI设计系统与主题

核心理念

• 美学：高端、现代、“物理AI”（暗色、流畅、未来感）。
• 感受：平滑、响应迅速、高端质感。

字体排版

• 字体：Poppins（几何无衬线字体）。
• 字重：400（常规）、500（中等）、600（半粗）、700（粗体）。
• 使用：清晰、易读、间距宽松。

配色方案（暗模式 - 主色调）

• 背景：linear-gradient(135deg, #1a1f28 0%, #161b23 50%, #0f1419 100%)
• 主色调：#2d7d6c（蓝绿色/绿调），用于按钮和高亮。
• 文本：#ededed（灰白色，确保可读性）。
• 边框：微妙，通常为rgba(255, 255, 255, 0.1)。

组件

• 按钮：圆角、平滑悬停过渡、微妙的阴影。
• 卡片：玻璃拟态效果（模糊+透明度）、圆角（12px或16px）。
• 输入框：圆角（24px）、无边框或微妙边框、聚焦环。
• 下拉菜单：浮动、动画滑入、阴影深度。

动画

• 过渡：all 0.2s ease或cubic-bezier以实现高端感。
• 关键帧：fadeIn、slideIn、dropdownSlideIn。

CSS结构

• 全局：app/globals.css（Tailwind + 变量）。
• Docusaurus：textbook/src/css/custom.css（覆盖样式）。
• 模块：styles.module.css用于复杂组件（如聊天机器人、下拉菜单）。