Skip to content

Figma AI UI Kit - 赛博风格组件库

组件库介绍

专为现代 Web/App 设计的赛博朋克风格 UI 组件库,包含 200+ 精美组件。

核心特性

  • 🎨 完整的设计系统
  • 🔧 Auto Layout 自动布局
  • 🌈 深色/浅色双主题
  • ⚡ 组件变体功能
  • 📱 响应式网格系统

组件清单

基础组件 (40+)

  • Buttons - 按钮 (10种样式)
  • Inputs - 输入框 (表单控件)
  • Cards - 卡片 (数据展示)
  • Navigation - 导航栏
  • Typography - 排版系统

高级组件 (80+)

  • Dashboard - 仪表盘模块
  • Charts - 数据图表
  • Tables - 表格组件
  • Modals - 弹窗对话框
  • Forms - 表单页面

页面模板 (20+)

  • Landing Page - 落地页
  • Dashboard - 后台管理
  • Profile - 用户中心
  • Settings - 设置页面
  • Pricing - 价格页面

图标库 (60+)

  • 赛博朋克风格图标集
  • 支持多种尺寸
  • 可自定义颜色

下载说明

Figma 社区文件在线使用

本地副本下载 .fig

使用教程

第一步:复制到你的文件

  1. 打开 Figma 社区链接
  2. 点击"Duplicate"复制到你的账户
  3. 文件会出现在你的 Drafts 中

第二步:启用组件库

  1. 打开你的设计文件
  2. 点击 Assets 面板
  3. 点击书籍图标 → Enable library
  4. 选择 "AI UI Kit"

第三步:使用组件

  1. 在 Assets 面板搜索组件
  2. 拖拽到画布即可使用
  3. 在右侧面板修改组件属性

设计规范

颜色系统

颜色用途Light / Dark
Primary主要按钮、链接#FF8B2F / #56B7FF
Secondary次要元素#315DFF / #8B5CF6
Accent强调内容#7A3CFF / #FF8B2F
Background背景色#F7F3EA / #070A12
Surface卡片背景#FFFAF1 / #0B1020

字体系统

  • 标题:Inter (700-900)
  • 正文:Inter (400-600)
  • 等宽:JetBrains Mono

间距系统

基于 8px 网格:4, 8, 12, 16, 24, 32, 48, 64

自定义指南

修改主题色

  1. 进入 🎨 Styles 页面
  2. 选择 Color Styles
  3. 双击颜色并修改 Hex 值
  4. 所有组件自动更新

创建新组件

  1. 参考现有组件结构
  2. 使用 Auto Layout 布局
  3. 创建组件变体
  4. 添加到组件库

应用案例

  • ✅ SaaS 产品后台
  • ✅ 数据可视化平台
  • ✅ AI 工具界面
  • ✅ Web3 DApp

技术支持

遇到问题?

  • 📖 查看 使用文档
  • 💬 加入 Discord 社区
  • 📧 邮件联系:support@example.com

← 返回创作资源

AI 设计案例、工作流与资源沉淀