qingsongping-AIDevelop/product-docs/新建 文本文档.txt

UI设计系统完整生成提示词｜大学生求职决策APP「职来 mydreamjob」V1.3版
 
整体任务说明
 
任务：基于《职来（mydreamjob）产品开发方案V1.3》完整文档，生成面向Figma/Sketch可用的移动端标准化设计Token全套规范文档，产品定位大学生可信求职决策工具，核心用户：大三/大四应届生、毕业1-2年应届生、3年内年轻职场人、企业HR；产品核心差异化：企业多维度可信评分、自定义权重排序、评分证据链溯源、匹配门槛沟通机制。整体视觉风格专业、清爽、理性商务工具向，拒绝卡通插画、娱乐化渐变、花哨动效；仅输出浅色标准主题，不开发深色模式。
画板基准尺寸：390pt × 844pt（iPhone15标准移动端），全局统一4pt网格布局，所有可点击交互触摸热区最小48×48dp。输出仅为规范文档，不生成页面效果图，全页面、组件、小组件、图表、弹窗、空状态、骨架屏严格遵循本套Token。
 
一、全局色彩规范（固定HEX，贴合产品评分分层、求职风险、匹配度业务逻辑）
 
品牌主色系
 
主色：#1677FF（商务蓝，主按钮、筛选激活态、高分企业、核心操作入口、雷达图高亮）
辅助色：#4096FF（次级操作、次要标签、进度条、滑块激活轨道）
 
业务状态标签色（匹配8维度评分体系、求职匹配分级）
 
优质匹配色：#00B42A（企业综合高分、高薪福利、低加班、匹配度≥80%、合规无风险）
中性提示色：#FF7D00（企业中等评分、数据待补充、普通匹配、估算分数标记、权重模板提示）
风险警示色：#F53F3F（企业合规风险、低分避雷、匹配度不足阈值、仲裁/处罚记录、恶意评价预警）
 
文本中性分层色
 
#1D2129：H1/H2标题、企业全称、岗位名称、综合总分、核心数据数字、治理/产业战略标题
#4E5968：正文文本、岗位职责、企业介绍、员工评价、权重说明、维度解释、对比表格文字
#86909C：辅助小字、数据来源标注、时间、行业规模标签、「暂未覆盖/数据补充中」占位文案、简历备注
 
容器与页面底色
 
#F2F3F5：全局页面背景、列表分割底色、筛选面板底层、空状态背景
#FFFFFF：卡片底色、弹窗面板、底部选择器、搜索框、表单输入框、雷达图画布底色
 
二、字体层级规范（无衬线字体：Inter/思源黑体，兼顾学生、HR中老年群体可读性）
 
全局约束：页面最小展示文字≥12px，长评价、对比表格行高宽松，保证弱视力人群阅读体验
H1：24px 粗体，页面顶级标题、模块总标题、企业对比页大标题
H2：20px 粗体，板块分区标题、雷达图标题、评分体系模块标题、产业/治理维度标题
H3：17px 中等粗，卡片标题、岗位名称、分项维度标题、权重分组标题
Body：15px，正文描述、企业详情、评价正文、权重调节说明、匹配诊断文案
Caption：13px，备注、数据来源、时间标签、维度状态小字、标签说明、AI提示小字
 
三、间距、圆角、阴影全局Token
 
统一复用间距（全局4pt网格倍数）
 
8px、16px、24px、32px
 
圆角统一规范
 
全量内容卡片、底部弹窗面板：12px
按钮、搜索框、输入框、筛选标签、滑块容器、评分模块小卡片：8px
底部弹出选择器：顶部两角圆角归零，底部保留12px圆角
 
阴影规范
 
全部组件仅使用极低透明度柔和浅灰投影，无厚重黑色硬阴影；评分卡片、企业列表卡片弱化阴影，保持清爽理性工具质感
 
四、图标统一规范
 
统一线性轮廓图标，标准尺寸24px，线条粗细固定2px；禁用填充、渐变、粗描边图标
 
1. 底部导航4个固定图标：首页、企业库、求职匹配、我的
2. 核心业务专属线性图标：权重设置、雷达图、证据链溯源、企业对比、多条件筛选、简历上传、AI助手、匹配度校验、避雷警示、收藏、投递、聊天会话、企业规模矩阵、评分趋势曲线、仲裁风险、工商数据源、重置权重、保存自定义方案、空数据占位、筛选收起/展开
 
五、全量基础组件规范
 
1. 按钮组件（统一高度、圆角、热区）
 
1）主按钮：#1677FF填充，固定高度48px，用于投递、保存权重、查看证据链、确认匹配、企业对比、提交简历核心操作
2）次要描边按钮：白底+主色边框，高度48px，用于重置筛选、取消弹窗、清空权重、关闭对比面板
3）文字按钮：无边框无填充，主色文字，用于查看更多评价、展开数据源、查看完整评分趋势、导出个人档案
 
2. 搜索框组件
 
高度44px，圆角8px，内置24px线性搜索图标；支持一键清除关键词，适配企业/岗位双维度检索
 
3. 列表行规范
 
企业列表、岗位列表单项统一行高56–60px；布局包含企业名称、综合分数、业务标签、行业/规模/地点信息，信息层级克制无冗余元素
 
4. 业务标签组件（三类固定样式，对应评分风险体系）
 
绿色标签#00B42A：高分企业、高薪、低加班、高匹配、合规企业
橙色标签#FF7D00：中等评分、数据估算、数据补充中、普通匹配
红色标签#F53F3F：合规风险、劳动仲裁、低分避雷、匹配不足、处罚记录
 
六、产品差异化核心专属组件（贴合V1.3文档8维度分层评分、权重、溯源、企业矩阵逻辑）
 
1. 评分可视化组件（产品核心）
 
1）综合总分卡片：大号突出数字展示0-100综合分，搭配对应颜色状态标签，标注企业规模层级（小微企业/中型/大厂国企）
2）八维度雷达图容器：分层区分基础必选维度、扩展维度、企业价值维度；未覆盖维度灰色占位，标注「暂未覆盖」；估算分数添加橙色虚线区分真实数据
3）企业规模×行业二维矩阵可视化卡片：圆形面积区分企业体量，横向行业、纵向规模分栏展示，首期高亮热门行业大中型企业
4）评分趋势曲线卡片：折线展示企业历史分数波动，上升绿色、下降红色、平稳灰色
 
2. 自定义权重调节组件（核心差异化功能）
 
1）维度权重滑块组件：0-100滑动条、实时百分比数值输入框、全局归一化计算提示
2）权重预设模板卡片：求稳版、薪资优先版、成长冲刺版、稳健通勤版，一键填充权重
3）权重重置、保存自定义方案按钮组
 
3. 评分证据链溯源组件（可信核心）
 
1）数据源详情弹窗：单维度分数点击唤起，分栏展示工商公示、司法仲裁、员工审核评价、行业研报；每条数据标注来源渠道、采集时间
2）证据快照卡片：单条原始数据独立容器，区分官方数据源/用户评价，风险记录标红高亮
 
4. 企业并排对比组件
 
支持2-3家企业横向分栏对比卡片；调整权重实时同步更新各维度分数差异，高低分自动用绿/红底色标注差值
 
5. 匹配门槛校验组件
 
1）匹配度进度卡片：展示求职者与岗位匹配分数，低于阈值红色警示，标注差距维度
2）沟通拦截弹窗：匹配不足时弹出提示，禁止开启聊天；达标后展示双向意向确认面板
 
6. AI求职辅助组件
 
AI打招呼文案输入框、投递前匹配诊断卡片，AI生成内容统一标注「AI辅助建议」小字
 
七、筛选、弹窗、选择器通用组件
 
1. 顶部多条件筛选栏：行业、企业规模、薪资区间、工作平衡、合规状态筛选项，标签切换样式统一
2. 底部弹出选择器：城市、毕业年限、求职意向、权重模板选择面板
3. 全局通用弹窗：操作确认、风险警示、证据溯源详情、企业完整评分说明
4. Toast轻提示：操作成功、保存权重、投递提交、刷评价拦截、违规处置提示
 
八、求职流程专项组件
 
简历上传卡片、简历信息填写表单、投递状态标签（待企业查看/意向匹配/面试邀约/Offer）、聊天会话面板、候选人管道列表、面试记录卡片、求职落选原因留存模块、隐私脱敏提示组件
 
九、空状态、加载、骨架屏兜底组件（全页面适配）
 
1. 骨架屏：企业列表骨架、评分雷达图骨架、企业详情骨架、对比页面骨架、权重设置页骨架
2. 空页面：无匹配岗位、无意向企业、无员工评价、暂无投递记录、暂无企业入驻
3. 数据占位模块：维度「暂未覆盖」「数据估算」灰色占位卡片、网络异常兜底页、冷启动引导页
 
十、完整覆盖页面清单（全部页面强制复用本套Token）
 
1. 首页：高分企业榜单、快速筛选入口、权重模板快捷入口
2. 企业库：企业搜索、多维度筛选、企业列表卡片
3. 企业详情页：8维度分层雷达图、分项评分、证据链溯源入口、员工评价、收藏投递按钮、评分趋势
4. 自定义权重配置页：维度滑块调节、预设模板、一键重排企业清单
5. 企业对比页：2-3家企业横向维度对比、权重实时联动更新
6. 求职匹配页：岗位匹配列表、匹配度标签、投递前置诊断
7. 简历档案页：简历上传、个人信息填写、AI投递话术助手
8. 沟通会话页：匹配门槛校验拦截、聊天面板、意向确认弹窗
9. 个人中心：投递记录、收藏企业、我的评价、账号隐私设置、求职档案导出
10. 企业端入驻/岗位发布页：企业资质认证、岗位编辑、评分数据查看、候选人匹配列表
 
输出硬性约束规则
 
1. 仅输出标准化完整设计Token规范文档，不产出任何页面效果图、截图、插画素材
2. 所有视觉组件、图表、小组件、弹窗、骨架屏、空态严格遵循色彩、字体、间距、图标统一规范
3. 全程禁止卡通插画、高饱和渐变、炫酷动效、深色模式，保持商务清爽工具视觉调性
4. 所有业务视觉区分贴合V1.3产品文档核心逻辑：分层评分体系、权重自定义、证据溯源、匹配沟通门槛、企业二维覆盖矩阵，用户可直观区分企业稳定性、合规风险、匹配优劣、数据完整度
5. 所有标注文案、占位提示、状态标签文字字号不低于12px，适配学生、HR多年龄段阅读需求
6. 全部可点击控件热区统一≥48×48dp，符合移动端触摸交互标准