域见SI设计系统
域见SI(Smart Intelligence)是域见AI的企业级设计系统,专为企业智能管理平台打造。
设计理念
- 智能科技感:深蓝背景配合金色点缀,展现AI驱动的企业智能
- 专业可信赖:严谨的布局和清晰的层级,建立企业级信任感
- 高效易用:简洁的交互设计,让复杂的企业管理变得简单
- 中西融合:支持中英文双语,字体系统兼顾可读性与美感
核心特性
- 双主色调:深空蓝 (#0a1628) + 香槟金 (#c9a962)
- 精致阴影:四层阴影系统创造层次感
- 适度圆角:8-12px圆角,专业而不失亲和力
- AI标识:专属的AI徽章组件,突出智能特性
- 企业级组件:专为合同、财务、知识库等企业场景设计
使用方法
1. 复制DESIGN.md到项目根目录
# 将本技能的DESIGN.md复制到你的项目根目录
cp DESIGN.md /path/to/your/project/
2. 告诉AI代理使用这个设计系统
向你的AI代理发送:
"使用项目根目录的DESIGN.md来构建界面,按照域见SI设计系统的规范来实现。"
3. 生成UI
AI代理会自动读取DESIGN.md中的设计规范,包括:
- 颜色系统
- 字体层级
- 组件样式
- 布局原则
- 阴影系统
设计系统文件
本技能包含完整的域见SI设计系统文档:
- DESIGN.md - 完整的设计系统规范
- preview.html - 设计系统预览页面
适用场景
- 企业合同管理系统
- 智能财务分析平台
- 企业知识库管理
- 客户关系管理系统
- 任何需要专业企业形象的应用
颜色系统
主色调
- 深空蓝 (#0a1628) - 品牌主色,用于导航、标题、主要按钮
- 香槟金 (#c9a962) - 点缀色,用于强调、AI标识、高光
- 成功绿 (#48bb78) - 成功状态
- 警告橙 (#ed8936) - 警告状态
- 危险红 (#f56565) - 危险/错误状态
- 信息蓝 (#4299e1) - 信息提示
背景色
- 画布白 (#ffffff) - 主背景
- 羊皮纸 (#f7fafc) - 辅助背景
- 珍珠表面 (#edf2f7) - 微妙表面
字体层级
- Hero Display - 48px / 700 - 页面大标题
- Display LG - 36px / 600 - 区块标题
- Display MD - 28px / 600 - 小节标题
- Lead - 22px / 400 - 引导文案
- Body - 16px / 400 - 正文
- Caption - 14px / 400 - 辅助说明
组件预览
按钮
- Primary - 深空蓝背景 + 白色文字 + 8px圆角 + 中等阴影
- Accent - 香槟金背景 + 深空蓝文字 + 8px圆角 + 中等阴影
- Secondary - 透明背景 + 深空蓝边框 + 深空蓝文字 + 8px圆角
卡片
- 合同卡片 - 白色背景,1px细微边框,12px圆角,24px内边距
- 统计卡片 - 标准/强调两种样式
技术栈兼容性
- React / Vue / Angular 兼容
- 支持 Tailwind CSS
- 响应式设计优先
- 中英文双语优化
示例提示词
使用项目根目录的DESIGN.md来构建一个合同管理系统的首页,
按照域见SI设计系统的规范来实现。包括:
1. 顶部导航栏
2. 统计数据卡片
3. 合同列表
4. 侧边栏菜单
确保使用正确的颜色、字体和组件样式。
按照域见SI设计系统的规范,创建一个智能财务分析仪表板。
使用深空蓝作为主背景,香槟金作为AI功能的点缀色。
关于域见AI
域见AI是企业级智能管理平台,提供合同管理、财务分析、知识库等智能化解决方案。
更多信息请访问:https://aimind.0731app.cn