Skill浅色企业管理风格Light Enterprise适用场景企业管理系统、业务后台、表单流程、工作台、数据列表适用页面管理后台、表单页、列表页、详情页、工作台仪表板引用方式AI 生成浅色风格业务页面或组件时引用本 Skill所有视觉规范以下方为准使用说明本规范定义了浅色企业管理的视觉体系适用于信息密度较高、以表单和列表为主的业务系统。AI 在生成任何符合该风格的组件时必须严格遵循以下六个层面不得自行挑选颜色、字重、间距或圆角。规范的核心目标是保证多个独立生成的页面与组件拼装到同一系统后视觉风格高度一致。一、颜色体系1.1 语义色板角色色值用途主色#1890FF主操作、选中态、链接、强调成功#52C41A成功、完成、正向警告#FAAD14警告、待处理危险#FF4D4F删除、错误、负向信息#1890FF提示同主色紫色#722ED1特殊标记、第四类1.2 文字色阶层级色值用途主文字#262626标题、核心内容次文字#595959正文辅助文字#8C8C8C说明、时间、单位禁用#BFBFBF不可用1.3 背景体系页面背景#F0F2F5卡片背景#FFFFFF悬浮卡片rgba(0,0,0,0.02)分割线#F0F0F0表头背景#FAFAFA1.4 使用优先级主操作 → #1890FF成功 / 完成 → #52C41A警告 / 待处理 → #FAAD14删除 / 错误 → #FF4D4F。不得自创新色。二、字体规范2.1 字重档位档位字重用途常规400正文中等500表格内容、按钮半粗600小标题、表头粗体700页面标题、大数值仅使用以上四档不得使用 300 / 800 / 900。2.2 字号阶梯字号用途12辅助说明、标签内文字13表格内容14正文、按钮、输入框16小标题、卡片标题20区域标题24页面标题2.3 等宽字使用场景数字、ID、金额使用等宽数字font-variant-numeric: tabular-nums2.4 字体族-apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif三、间距系统以8 为倍数仅使用以下值4 / 8 / 12 / 16 / 24 / 32场景间距卡片内边距24页面边距24模块间距16表单字段间距16按钮内边距12水平/ 8垂直标签内边距8水平/ 2垂直不得使用5 / 6 / 7 / 9 / 10 / 14 / 18 / 20 等非倍数值。四、圆角规范组件圆角卡片8px按钮6px输入框4px标签4px弹窗8px头像50%圆形圆角值固定不得随意调整。五、动效规范5.1 缓动函数统一使用cubic-bezier(.4, 0, .2, 1)5.2 时长档位档位时长场景快速0.2shover、选中态切换标准0.3s弹窗、抽屉、展开图表1s图表进场5.3 原则动效克制不做常驻动画仅 hover、状态切换、进场使用动效不使用shimmer、霓虹、扫光等装饰性动效业务系统以稳为主避免视觉干扰六、组件样式规范6.1 通用卡片.card{background:#FFFFFF;border-radius:8px;border:1px solid #F0F0F0;box-shadow:0 1px 2pxrgba(0,0,0,0.03);}6.2 统计卡片标题14px / 400 / #8C8C8C数值24px / 700 / #262626趋势12px正向 #52C41A负向 #FF4D4F6.3 按钮类型背景文字边框主按钮#1890FF#FFFFFF无次按钮#FFFFFF#595959#D9D9D9危险按钮#FF4D4F#FFFFFF无禁用#F5F5F5#BFBFBF无圆角 6px内边距水平 12 / 垂直 86.4 表格表头#FAFAFA 背景#8C8C8C 文字600 字重行#FFFFFF悬浮 #FAFAFA行高54px行边框#F0F0F0斑马纹可选奇数行 #FAFAFA单元格内边距16px6.5 表单标签14px / 400 / #595959右对齐输入框高 32px圆角 4px边框 #D9D9D9聚焦边框 #1890FF必填标记#FF4D4F 星号字段间距16px6.6 标签Tag状态背景文字边框成功#F6FFED#52C41A#B7EB8F警告#FFFBE6#FAAD14#FFE58F危险#FFF1F0#FF4D4F#FFA39E默认#F5F5F5#595959#D9D9D9圆角 4px内边距水平 8 / 垂直 26.7 图表ECharts背景#FFFFFFtooltip#FFFFFF 背景#262626 文字box-shadow: 0 2px 8px rgba(0,0,0,0.15)图例顶部#8C8C8C 文字柱条纯色或浅渐变上沿圆角 4px折线smoothareaStyle 浅色填充不使用深色 tooltip、不使用霓虹发光七、响应式断点断点行为≤ 1200px侧边栏收起为图标态≤ 992px两列布局降为单列≤ 768px表单单列表格横向滚动页面边距 16px附引用示例当 AI 生成一个浅色业务系统的统计卡片时应输出div classNamestat-card div classNamestat-title本月订单/div div classNamestat-value1,284/div div classNamestat-trend style{{ color: #52C41A }}↑ 12.5%/div /div.stat-card{background:#FFFFFF;border-radius:8px;border:1px solid #F0F0F0;padding:24px;}.stat-title{font-size:14px;color:#8C8C8C;}.stat-value{font-size:24px;font-weight:700;color:#262626;margin-top:8px;}.stat-trend{font-size:12px;margin-top:8px;}所有数值、间距、圆角、色值均取自本规范不自由发挥。
Skill浅色企业管理风格Light Enterprise适用场景企业管理系统、业务后台、表单流程、工作台、数据列表适用页面管理后台、表单页、列表页、详情页、工作台仪表板引用方式AI 生成浅色风格业务页面或组件时引用本 Skill所有视觉规范以下方为准使用说明本规范定义了浅色企业管理的视觉体系适用于信息密度较高、以表单和列表为主的业务系统。AI 在生成任何符合该风格的组件时必须严格遵循以下六个层面不得自行挑选颜色、字重、间距或圆角。规范的核心目标是保证多个独立生成的页面与组件拼装到同一系统后视觉风格高度一致。一、颜色体系1.1 语义色板角色色值用途主色#1890FF主操作、选中态、链接、强调成功#52C41A成功、完成、正向警告#FAAD14警告、待处理危险#FF4D4F删除、错误、负向信息#1890FF提示同主色紫色#722ED1特殊标记、第四类1.2 文字色阶层级色值用途主文字#262626标题、核心内容次文字#595959正文辅助文字#8C8C8C说明、时间、单位禁用#BFBFBF不可用1.3 背景体系页面背景#F0F2F5卡片背景#FFFFFF悬浮卡片rgba(0,0,0,0.02)分割线#F0F0F0表头背景#FAFAFA1.4 使用优先级主操作 → #1890FF成功 / 完成 → #52C41A警告 / 待处理 → #FAAD14删除 / 错误 → #FF4D4F。不得自创新色。二、字体规范2.1 字重档位档位字重用途常规400正文中等500表格内容、按钮半粗600小标题、表头粗体700页面标题、大数值仅使用以上四档不得使用 300 / 800 / 900。2.2 字号阶梯字号用途12辅助说明、标签内文字13表格内容14正文、按钮、输入框16小标题、卡片标题20区域标题24页面标题2.3 等宽字使用场景数字、ID、金额使用等宽数字font-variant-numeric: tabular-nums2.4 字体族-apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif三、间距系统以8 为倍数仅使用以下值4 / 8 / 12 / 16 / 24 / 32场景间距卡片内边距24页面边距24模块间距16表单字段间距16按钮内边距12水平/ 8垂直标签内边距8水平/ 2垂直不得使用5 / 6 / 7 / 9 / 10 / 14 / 18 / 20 等非倍数值。四、圆角规范组件圆角卡片8px按钮6px输入框4px标签4px弹窗8px头像50%圆形圆角值固定不得随意调整。五、动效规范5.1 缓动函数统一使用cubic-bezier(.4, 0, .2, 1)5.2 时长档位档位时长场景快速0.2shover、选中态切换标准0.3s弹窗、抽屉、展开图表1s图表进场5.3 原则动效克制不做常驻动画仅 hover、状态切换、进场使用动效不使用shimmer、霓虹、扫光等装饰性动效业务系统以稳为主避免视觉干扰六、组件样式规范6.1 通用卡片.card{background:#FFFFFF;border-radius:8px;border:1px solid #F0F0F0;box-shadow:0 1px 2pxrgba(0,0,0,0.03);}6.2 统计卡片标题14px / 400 / #8C8C8C数值24px / 700 / #262626趋势12px正向 #52C41A负向 #FF4D4F6.3 按钮类型背景文字边框主按钮#1890FF#FFFFFF无次按钮#FFFFFF#595959#D9D9D9危险按钮#FF4D4F#FFFFFF无禁用#F5F5F5#BFBFBF无圆角 6px内边距水平 12 / 垂直 86.4 表格表头#FAFAFA 背景#8C8C8C 文字600 字重行#FFFFFF悬浮 #FAFAFA行高54px行边框#F0F0F0斑马纹可选奇数行 #FAFAFA单元格内边距16px6.5 表单标签14px / 400 / #595959右对齐输入框高 32px圆角 4px边框 #D9D9D9聚焦边框 #1890FF必填标记#FF4D4F 星号字段间距16px6.6 标签Tag状态背景文字边框成功#F6FFED#52C41A#B7EB8F警告#FFFBE6#FAAD14#FFE58F危险#FFF1F0#FF4D4F#FFA39E默认#F5F5F5#595959#D9D9D9圆角 4px内边距水平 8 / 垂直 26.7 图表ECharts背景#FFFFFFtooltip#FFFFFF 背景#262626 文字box-shadow: 0 2px 8px rgba(0,0,0,0.15)图例顶部#8C8C8C 文字柱条纯色或浅渐变上沿圆角 4px折线smoothareaStyle 浅色填充不使用深色 tooltip、不使用霓虹发光七、响应式断点断点行为≤ 1200px侧边栏收起为图标态≤ 992px两列布局降为单列≤ 768px表单单列表格横向滚动页面边距 16px附引用示例当 AI 生成一个浅色业务系统的统计卡片时应输出div classNamestat-card div classNamestat-title本月订单/div div classNamestat-value1,284/div div classNamestat-trend style{{ color: #52C41A }}↑ 12.5%/div /div.stat-card{background:#FFFFFF;border-radius:8px;border:1px solid #F0F0F0;padding:24px;}.stat-title{font-size:14px;color:#8C8C8C;}.stat-value{font-size:24px;font-weight:700;color:#262626;margin-top:8px;}.stat-trend{font-size:12px;margin-top:8px;}所有数值、间距、圆角、色值均取自本规范不自由发挥。
