Your Name dd06502004 Complete all UI designs (P0/P1/P2) and add UI design specification

- Add 23 complete UI screens for Creator, Agency, and Brand portals
- Include mobile (402x874) and desktop (1440x900) layouts
- Create UIDesignSpec.md with:
  - Design tokens (colors, typography, spacing)
  - Icon mapping using Lucide icons
  - Component specifications
  - Screen inventory with node IDs
  - Tailwind CSS configuration
  - Development checklist

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-02-03 17:35:50 +08:00

10 KiB

Raw Blame History

UIDesignSpec.md - UI设计规范

文档类型	UI Design Specification
项目名称	SmartAudit (AI 营销内容合规审核平台)
版本号	V1.0
发布日期	2026-02-03
设计稿文件	`pencil-new.pen`
设计风格	Apple-style 暗色主题，商业级/高端质感

1. 设计令牌 (Design Tokens)

1.1 颜色系统

/* 背景色 */
--bg-page: #0B0B0E;        /* 页面背景 */
--bg-card: #16161A;        /* 卡片背景 */
--bg-elevated: #1A1A1E;    /* 悬浮/高亮背景 */

/* 文字色 */
--text-primary: #FAFAF9;   /* 主要文字 */
--text-secondary: #A1A1AA; /* 次要文字 */
--text-tertiary: #71717A;  /* 辅助文字 */

/* 强调色 */
--accent-indigo: #6366F1;  /* 主强调色（品牌色） */
--accent-green: #32D583;   /* 成功/通过 */
--accent-coral: #E85A4F;   /* 警告/错误 */
--accent-amber: #F59E0B;   /* 中等风险/警告 */

/* 边框色 */
--border-subtle: #27272A;  /* 细微边框 */

1.2 字体系统

用途	字体	字重	字号
页面标题	DM Sans	700 (Bold)	24px
卡片标题	DM Sans	700 (Bold)	22px
区块标题	DM Sans	600 (SemiBold)	16px
正文内容	DM Sans	400 (Regular)	15px
辅助文字	DM Sans	400 (Regular)	13px
小标签	DM Sans	400/600	12px
底部导航	DM Sans	400 (Regular)	11px

1.3 间距系统

用途	数值
页面内边距 (移动端)	24px 左右，16px 上下
页面内边距 (桌面端)	32px
卡片内边距	14-16px 上下，16-20px 左右
卡片圆角	12px
按钮圆角	8px
标签圆角	4px
元素间距 (紧凑)	4-8px
元素间距 (标准)	12-16px
元素间距 (宽松)	20-24px

2. 图标规范 (Icon System)

2.1 图标库

使用 Lucide Icons 图标库，确保全局一致性。

2.2 标准图标映射

功能	图标名称	使用场景
工作台/首页	`house`	底部导航、侧边栏
任务	`clipboard-list`	底部导航、任务列表
审核/审批	`circle-check`	底部导航、审批中心
审核台	`clipboard-check`	侧边栏导航
消息/通知	`bell`	底部导航、消息中心
个人中心	`user`	底部导航、我的
达人管理	`users`	侧边栏导航
数据看板/报表	`chart-column`	底部导航、侧边栏
舆情预警	`triangle-alert`	侧边栏导航
代理商管理	`building-2`	侧边栏导航
审计日志	`scroll-text`	侧边栏导航
系统设置	`settings`	侧边栏导航
Brief管理	`file-text`	侧边栏导航
版本比对	`git-compare`	侧边栏导航
筛选	`sliders-horizontal`	筛选按钮
搜索	`search`	搜索框
添加	`plus`	添加按钮
编辑	`pencil`	编辑操作
查看	`eye`	查看详情
下载/导出	`download`	导出按钮
箭头右	`chevron-right`	列表项箭头
箭头下	`chevron-down`	下拉选择
信号	`signal`	状态栏
WiFi	`wifi`	状态栏
安全	`shield-check`	隐私与安全
信息	`info`	关于我们
消息气泡	`message-circle`	帮助与反馈

2.3 图标尺寸

场景	尺寸
底部导航	24x24px
侧边栏导航	20x20px
按钮内图标	16x16px
状态栏图标	16x16px

3. 组件规范 (Component Specs)

3.1 移动端布局 (402x874)

┌─────────────────────────────┐
│  状态栏 (44px)              │
│  9:41          📶 📡 🔋    │
├─────────────────────────────┤
│                             │
│  内容区                      │
│  padding: 16px 24px         │
│  gap: 16-20px               │
│  flex: 1                    │
│                             │
├─────────────────────────────┤
│  底部导航 (83px)            │
│  渐变背景 + space-around    │
└─────────────────────────────┘

3.2 桌面端布局 (1440x900)

┌────────────┬────────────────────────────────┐
│            │                                │
│  侧边栏     │  主内容区                       │
│  260px     │  padding: 32px                 │
│  bg-card   │  gap: 24px                     │
│            │                                │
│  Logo      │  标题栏                         │
│  导航菜单   │  内容区域                       │
│            │                                │
└────────────┴────────────────────────────────┘

3.3 卡片组件

.card {
  background: var(--bg-card);     /* #16161A */
  border-radius: 12px;
  padding: 14px 16px;             /* 移动端 */
  padding: 16px 20px;             /* 桌面端 */
}

3.4 按钮组件

主要按钮 (Primary)

.btn-primary {
  background: var(--accent-indigo);  /* #6366F1 */
  color: #FFFFFF;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
}

次要按钮 (Secondary)

.btn-secondary {
  background: var(--bg-elevated);    /* #1A1A1E */
  color: var(--text-secondary);      /* #A1A1AA */
  padding: 8px 16px;
  border-radius: 8px;
}

3.5 状态标签

状态	背景色	文字色
已通过/活跃	#32D58320	#32D583
待处理/进行中	#6366F120	#6366F1
风险/错误	#E85A4F20	#E85A4F
警告/中风险	#F59E0B20	#F59E0B

3.6 底部导航

.bottom-nav {
  height: 83px;
  padding: 12px 21px;
  background: linear-gradient(180deg, transparent 0%, #0B0B0E 50%);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nav-item.active {
  color: var(--accent-indigo);  /* #6366F1 */
}

.nav-item.inactive {
  color: var(--text-secondary); /* #A1A1AA */
}

3.7 侧边栏导航项

.sidebar-nav-item {
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

.sidebar-nav-item.active {
  background: var(--bg-elevated);  /* #1A1A1E */
  color: var(--accent-indigo);     /* #6366F1 */
  font-weight: 600;
}

4. 页面清单 (Screen Inventory)

4.1 达人端 (Creator)

页面名称	设备	优先级	设计稿节点ID
任务列表	Mobile	P0	PjBJD
智能上传	Mobile	P0	ZelCS
审核结果	Mobile	P0	Vn3VU
AI审核中	Mobile	P0	lzdm4
消息中心	Mobile	P1	pF15t
历史记录	Mobile	P2	ZKEFl
个人中心	Mobile	P2	zCdM1
任务列表	Desktop	P0	HD3eK
智能上传	Desktop	P0	N79bL
审核结果	Desktop	P0	3niUa
AI审核中	Desktop	P0	bxAKT
消息中心	Desktop	P1	8XKLP

4.2 代理商端 (Agency)

页面名称	设备	优先级	设计稿节点ID
工作台	Desktop	P0	RX8V9
审核决策台	Desktop	P0	2u8Bq
Brief配置中心	Desktop	P0	djd2K
达人管理	Desktop	P1	5cFMX
数据报表	Desktop	P1	An8gw
版本比对	Desktop	P2	NDmYh
工作台	Mobile	P0	VuH3F
快捷审核	Mobile	P0	lrHaj
任务列表	Mobile	P1	c6SPa
消息中心	Mobile	P1	9Us9g
个人中心	Mobile	P2	8OCZ3

4.3 品牌方端 (Brand)

页面名称	设备	优先级	设计稿节点ID
数据看板	Desktop	P0	xUM9m
AI服务配置	Desktop	P0	4ppiJ
规则配置	Desktop	P0	nhHSF
审计日志	Desktop	P1	jELTK
代理商管理	Desktop	P1	2jnnO
舆情预警	Desktop	P2	NjCe7
系统设置	Desktop	P2	4nVj4
数据看板	Mobile	P0	lpVdV
舆情预警	Mobile	P1	wWAel
审批中心	Mobile	P1	OueOe
消息中心	Mobile	P2	1w9xC
我的	Mobile	P2	OJBbT

5. 开发实施指南

5.1 技术栈建议

前端框架: React / Vue 3
样式方案: Tailwind CSS (推荐) 或 CSS Variables
图标库: lucide-react / lucide-vue-next
字体: Google Fonts - DM Sans

5.2 Tailwind CSS 配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'bg-page': '#0B0B0E',
        'bg-card': '#16161A',
        'bg-elevated': '#1A1A1E',
        'text-primary': '#FAFAF9',
        'text-secondary': '#A1A1AA',
        'text-tertiary': '#71717A',
        'accent-indigo': '#6366F1',
        'accent-green': '#32D583',
        'accent-coral': '#E85A4F',
        'accent-amber': '#F59E0B',
        'border-subtle': '#27272A',
      },
      fontFamily: {
        sans: ['DM Sans', 'sans-serif'],
      },
      borderRadius: {
        'card': '12px',
        'btn': '8px',
        'tag': '4px',
      },
    },
  },
}

5.3 CSS Variables 配置

:root {
  /* 背景 */
  --bg-page: #0B0B0E;
  --bg-card: #16161A;
  --bg-elevated: #1A1A1E;

  /* 文字 */
  --text-primary: #FAFAF9;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;

  /* 强调色 */
  --accent-indigo: #6366F1;
  --accent-green: #32D583;
  --accent-coral: #E85A4F;
  --accent-amber: #F59E0B;

  /* 边框 */
  --border-subtle: #27272A;

  /* 字体 */
  --font-family: 'DM Sans', sans-serif;
}

5.4 开发检查清单

开发每个页面时，请对照以下检查项：

背景色使用 --bg-page (#0B0B0E)
卡片使用 --bg-card (#16161A) + 12px圆角
字体统一使用 DM Sans
图标使用 Lucide，按照图标映射表选择正确图标
底部导航高度 83px，渐变背景
侧边栏宽度 260px
状态标签使用对应颜色（通过=绿色，处理中=紫色，错误=红色）
按钮样式符合规范（主要=紫色，次要=深灰色）

6. 设计稿访问

设计稿文件：pencil-new.pen

使用 Pencil 编辑器打开查看完整设计，可通过节点ID定位到具体页面。

文档维护者: Claude 最后更新: 2026-02-03

10 KiB Raw Blame History Unescape Escape