构建现代暗黑风 React UI 系统（TypeScript 版） #

提供一套完整的暗黑主题 UI 方案，通过集成 Tailwind CSS 的自定义色彩矩阵与 Framer Motion 的动画预设，快速实现具有“毛玻璃”质感和专业视觉效果的数据驱动应用界面。

为什么需要这个技能 #

在开发 B 端管理后台、AI 仪表盘或数据监控界面时，深色模式（Dark Mode）不仅能减轻用户视觉疲劳，还能通过高对比度的品牌色突出核心数据。

然而，高质量的暗黑界面并非简单的“背景变黑”，它需要精细的层级色阶（Neutral Palette）、半透明的毛玻璃效果（Glassmorphism）以及自然的交互过渡。本技能为你提供了一套经过验证的 TypeScript 类型安全配置，避免了从零开始调试颜色对比度和动画曲线的繁琐过程。

适用场景 #

• 需要快速搭建一个具有“极客感”或“现代感”的 AI 项目前端。
• 构建复杂的数据看板（Dashboard），需要清晰的视觉层级区分背景、面板与卡片。
• 开发需要细腻交互动画（如淡入、滑入、弹性缩放）的高级管理面板。
• 追求 PWA 极致体验，需要适配移动端安全区域和触控目标的 Web 应用。

核心工作流 #

1. 环境初始化：使用 Vite 创建 React-TS 模板，并安装 framer-motion、clsx 及 Tailwind CSS 核心依赖。
2. 定义设计令牌（Design Tokens）：在 tailwind.config.js 中配置一套完整的暗黑色阶（bg1-bg6）、品牌紫（Brand Purple）以及状态色，确保全站视觉统一。
3. 构建全局样式：在 globals.css 中定义 CSS 变量，并编写 .glass 等实用类，实现背景模糊与边框高光的毛玻璃效果。
4. 实现组件化架构：
   • UI 层：封装 Button、Card、Input 等原子组件。
   • 布局层：构建 AppShell 和 Sidebar，利用 framer-motion 实现页面间的平滑切换。
5. 注入交互动效：应用 fadeIn、slideUp 等预设动画变体，提升应用的响应质感。

下载和安装 #

下载 frontend-ui-dark-ts 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐