手机端AI写作工作台选题库与文章成品区UI界面原型图，竖版9:16比例，背景纯白，主色调深蓝与暗金，极简商务高效清晰风格。顶部标签栏三个横向标签页："待写选题"当前选中深蓝色下划线、"已写选题"、"成
678typ3ch-H...
2026.08.01手机端AI写作工作台选题库与文章成品区UI界面原型图，竖版9:16比例，背景纯白，主色调深蓝与暗金，极简商务高效清晰风格。顶部标签栏三个横向标签页："待写选题"当前选中深蓝色下划线、"已写选题"、"成
678typ3ch-H...
2026.08.01![手机端AI写作工作台选题库与文章成品区V2 UI界面原型图，竖版9:16比例，背景纯白，主色调深蓝与暗金，极简商务高效清晰风格。顶部标签栏三个横向标签页："待写选题"当前选中深蓝色下划线、"已写选题"、"成品文章"，左侧返回按钮，右侧新建选题按钮。内容列表区以待写选题为例：简洁选题列表，每个条目显示选题标题（加粗）如"关于C端和B端本质区别的深度思考"，指定框架浅蓝色小标签如"深度文章"，创建时间灰色小字如"2026-07-28"，条目右侧展开小箭头，条目之间用极细灰色分割线隔开。选题详情与操作面板（模拟点击某个选题条目后向下展开）：选题标题可编辑输入框已填"关于C端和B端本质区别的深度思考"；选题背景/逻辑可编辑多行文本区域，内部模拟背景文字"[AI自动提炼] 来源于2026-07-28与AI的对话。核心痛点：很多从业者分不清C端和B端交付的本质区别，导致用C端思维做B端生意，越做越累..."，区域右下角【AI重炼】小按钮；指定框架下拉菜单当前选中"深度文章"；底部操作区两个并排醒目按钮："开始创作 (对话模式)"（暗金色）和"后台生成"（灰色），后台生成按钮旁极小文字提示"生成后文章存入待审区。"。所有文字清晰可读，极致简洁高效便捷，无卡通花哨元素。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/382f8127-00db-4c19-aa7a-3336dc6efdef21079.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第8屏] 完整公开课APP列表页面总览，展示完整长列表滚动效果，整体视觉风格统一收尾。
[氛围/风格] 整体展示，统一视觉风格，现代简约设计。
[元素布局] 展示从顶部导航、搜索框、到3条完整公开课列表的完整页面，滚动布局自然，所有信息模块都展示到位，风格统一。
[光影质感] 统一光影，所有卡片和元素风格保持一致。
[配色色系] 整体白色背景，蓝色主色调，灰色文字层级，保持前面所有页面配色一致。
[视角构图] 正视图，完整移动端竖屏页面，从上到下完整展示。
[文字版式] 所有文字排版和前面页面保持一致，层级清晰，统一风格。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 风格不统一，布局错乱，文字模糊，变形，水印。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/1ed88d4f-6983-4f8d-a0a2-af15a47ea8c66854.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第8屏] 完整公开课APP列表页面总览，展示完整长列表滚动效果，整体视觉风格统一收尾。
[氛围/风格] 整体展示，统一视觉风格，现代简约设计。
[元素布局] 展示从顶部导航、搜索框、到3条完整公开课列表的完整页面，滚动布局自然，所有信息模块都展示到位，风格统一。
[光影质感] 统一光影，所有卡片和元素风格保持一致。
[配色色系] 整体白色背景，蓝色主色调，灰色文字层级，保持前面所有页面配色一致。
[视角构图] 正视图，完整移动端竖屏页面，从上到下完整展示。
[文字版式] 所有文字排版和前面页面保持一致，层级清晰，统一风格。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 风格不统一，布局错乱，文字模糊，变形，水印。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/5dce97c6-5b9e-40be-acd0-e93e74db55487004.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第1屏] 公开课APP首页头屏，展示移动端APP顶部导航区域，包含可切换的"公开课"和"我发布"两个标题标签，当前选中"公开课"标签，下方展示公开课列表页面框架。
[氛围/风格] 现代简约UI设计，专业干净的移动端界面风格，清晰信息层级，扁平化设计，商业UI界面质感，舒适干净色调。
[元素布局] 状态栏在最顶部，下方是导航标签栏，"公开课"标签默认蓝色选中状态，"我发布"标签灰色未选中状态，标签栏下方预留搜索框位置，再往下是公开课列表区域顶部，整体占比合理，界面元素间距舒适。
[光影质感] 扁平简约光影，清晰锐利，界面元素区分明显，无过多渐变阴影，保持清爽干净。
[配色色系] 全局底色 #FFFFFF，主选中色 #165DFF，未选中文字 #666666，分割线 #F5F5F5。
[视角构图] 正视图，移动端竖屏构图，阅读动线从上到下清晰自然。
[文字版式] 顶部导航主标题文字清晰，"公开课"字号18px加粗蓝色，"我发布"字号18px常规灰色，文字不挤压，留白舒适，信息层级区分明确。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 文字错乱，界面变形，布局拥挤，颜色怪异，水印，缺件错件，结构错误。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/ca78e1c2-c98a-403f-baa4-43884ef8cdc07006.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第4屏] 公开课搜索功能页面展示，包含顶部搜索框、输入关键字后展示搜索结果列表。
[氛围/风格] 现代简约搜索界面设计，清晰交互反馈，干净清爽。
[元素布局] 顶部导航下方是搜索框，带放大镜搜索图标，搜索框内显示占位文字"搜索公开课关键字"，输入"数据分析"关键字后，下方展示匹配的搜索结果列表，展示2条匹配结果，每条结果和主列表样式一致。
[光影质感] 搜索框边框浅灰色，输入后高亮边框，结果列表和主列表风格一致，光影清晰，交互反馈明确。
[配色色系] 全局底色 #FFFFFF，搜索框 #F5F5F5，占位文字 #999999，输入文字 #111111，匹配结果配色和主列表一致。
[视角构图] 正视图，移动端竖屏，搜索框在顶部，结果列表向下延展，符合搜索界面交互逻辑。
[文字版式] 占位文字字号15px，搜索关键字清晰，结果列表文字排版统一规范，清晰可读。
[比例分辨率] 9:16 竖版比例，移动端适配，4K分辨率，文字清晰可辨。
[负向提示词] 布局错乱，文字模糊，搜索框变形，交互逻辑错误，水印。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/04c717bd-2ae2-4ad8-b8c8-e648b6a853356783.png?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第7屏] 学习收获展示页。
[氛围/风格] 成果导向，积极专业，简约设计，清晰展示学习后能获得的能力提升。
[元素布局] 顶部主标题，中部使用图标+文字形式展示六项核心收获，分两列排列，每个收获占一个卡片，底部总结学习价值，整体布局均衡美观。
[光影质感] 均匀布光，卡片立体，图标清晰，文字信息明确，阴影自然。
[配色色系] 全局底色 #f5f7fa，卡片白色底，图标用浅蓝色，标题深蓝色，文字深灰色，整洁干净。
[视角构图] 竖版9:16，上下结构，中部两列网格布局，阅读动线从上到下，从左到右。
[文字版式] 主标题："学完你将收获"，内容分为六个能力：1. 熟练使用豆包AI全部功能，2. 掌握精准提示词编写技巧，3. 自主创建专属AI智能体，4. 各行业场景AI实战应用，5. 批量生成爆款内容方法，6. 掌握AI商业变现思路。每个能力用卡片展示，标题加粗，简介清晰，排列整齐。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 布局错乱，文字重叠，文字过小，图标变形，配色杂乱，水印，结构错误](https://gd-cms.dancf.com/gd-cms/xi19e5/0/751fe963-f96e-41fb-8e18-ae99a42d080963377.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第7屏] 学习收获展示页。
[氛围/风格] 成果导向，积极专业，简约设计，清晰展示学习后能获得的能力提升。
[元素布局] 顶部主标题，中部使用图标+文字形式展示六项核心收获，分两列排列，每个收获占一个卡片，底部总结学习价值，整体布局均衡美观。
[光影质感] 均匀布光，卡片立体，图标清晰，文字信息明确，阴影自然。
[配色色系] 全局底色 #f5f7fa，卡片白色底，图标用浅蓝色，标题深蓝色，文字深灰色，整洁干净。
[视角构图] 竖版9:16，上下结构，中部两列网格布局，阅读动线从上到下，从左到右。
[文字版式] 主标题："学完你将收获"，内容分为六个能力：1. 熟练使用豆包AI全部功能，2. 掌握精准提示词编写技巧，3. 自主创建专属AI智能体，4. 各行业场景AI实战应用，5. 批量生成爆款内容方法，6. 掌握AI商业变现思路。每个能力用卡片展示，标题加粗，简介清晰，排列整齐。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 布局错乱，文字重叠，文字过小，图标变形，配色杂乱，水印，结构错误](https://gd-cms.dancf.com/gd-cms/xi19e5/0/c3d1dedd-e820-49f5-b623-c723389d4dcc63836.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第7屏] 学习收获展示页。
[氛围/风格] 成果导向，积极专业，简约设计，清晰展示学习后能获得的能力提升。
[元素布局] 顶部主标题，中部使用图标+文字形式展示六项核心收获，分两列排列，每个收获占一个卡片，底部总结学习价值，整体布局均衡美观。
[光影质感] 均匀布光，卡片立体，图标清晰，文字信息明确，阴影自然。
[配色色系] 全局底色 #f5f7fa，卡片白色底，图标用浅蓝色，标题深蓝色，文字深灰色，整洁干净。
[视角构图] 竖版9:16，上下结构，中部两列网格布局，阅读动线从上到下，从左到右。
[文字版式] 主标题："学完你将收获"，内容分为六个能力：1. 熟练使用豆包AI全部功能，2. 掌握精准提示词编写技巧，3. 自主创建专属AI智能体，4. 各行业场景AI实战应用，5. 批量生成爆款内容方法，6. 掌握AI商业变现思路。每个能力用卡片展示，标题加粗，简介清晰，排列整齐。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 布局错乱，文字重叠，文字过小，图标变形，配色杂乱，水印，结构错误](https://gd-cms.dancf.com/gd-cms/xi19e5/0/a7ae7b30-66c8-4018-b94d-0603c3da64df63879.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![AI写作工作台选题库管理页UI界面原型图，横版16:9比例，背景纯白，主色调深蓝与暗金，极简商务风格，严谨专业，高信任感。左侧深蓝色侧边栏约占1/6宽度，顶部暗金色品牌标志文字"智宅焕·AI写作工作台"，下方竖向导航菜单深灰色文字，当前选中项"选题管理"为深蓝色背景白色文字，其他菜单项依次为"工作台首页""文章生成""文章成品区""框架管理""知识库管理""平台适配配置""文章上传与拆解""待处理仓库""用户权限"。右侧白色内容区：顶部大号深蓝色粗体标题"选题管理"。状态标签栏：两个横向标签页，"待写"当前选中深蓝色背景旁小数字8，"已写"旁小数字15。操作栏：左侧"全选"复选框，右侧两个按钮"批量自动生成"（暗金色）和"新建选题"。内容列表区（待写区）：极简表格，列名为选题标题、指定框架、创建时间、操作，每行左侧有复选框。四行数据：第一行"关于C端和B端本质区别的深度思考 | 深度文章 | 2026-07-28 | [编辑] [删除]"，第二行"为什么我们坚持按时间收费？ | 日常干货 | 2026-07-25 | [编辑] [删除]"，第三行"智能家居从业者的三条活路 | 深度文章 | 2026-07-20 | [编辑] [删除]"，第四行"工厂老板转型交付服务商的三个门槛 | 日常干货 | 2026-07-18 | [编辑] [删除]"。底部操作栏：醒目暗金色按钮"批量自动生成"，旁边小字说明"勾选选题后，点击此按钮，系统将自动调用各选题指定的框架和知识库，在后台依次生成文章初稿。生成后文章将存入'生成待审区'，选题将自动移入'已写区'。"。已写区用虚线框标注"切换后展示"，表格列名相同无复选框，两行数据：第一行"为什么我们坚持按时间收费？ | 日常干货 | 2026-07-25 | [查看关联文章] [重新生成]"，第二行"工厂老板转型交付服务商的三个门槛 | 日常干货 | 2026-07-18 | [查看关联文章] [重新生成]"。所有文字清晰可读，模拟真实软件后台界面，严谨高效可配置，无卡通花哨元素。](https://gd-cms.dancf.com/gd-cms/xi19e5/0/7533450e-d81a-4615-9363-6ca1a6db81e021517.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第6屏] 适用人群介绍页。
[氛围/风格] 亲和清晰，卡片式设计，专业简约，让用户快速判断是否适合自己。
[元素布局] 顶部主标题，中部五个适合人群卡片从上到下排列，每个卡片标注一个人群和对应学习收益，留白适中，排版不拥挤。
[光影质感] 均匀柔和布光，每个卡片增加轻微阴影提升立体感，文字清晰可读。
[配色色系] 全局底色 #f5f7fa，卡片用白色底色，标题深蓝色，文字深灰色，视觉清爽。
[视角构图] 纵向9:16排版，从上到下信息层级清晰，符合手机阅读顺序。
[文字版式] 主标题："适合这样的你学习"，依次列出：1. 零基础想要入门AI的新手，2. 想利用AI提升工作效率的职场人，3. 内容创作者想要提升产能，4. 想要通过AI技能拓展副业的朋友，5. 想学习最新AI工具使用的爱好者。每个人群用卡片呈现，标题加粗说明人群，小字补充说明学习收获，排版清晰。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 卡片重叠，文字错乱，文字过小，配色杂乱，变形，水印](https://gd-cms.dancf.com/gd-cms/xi19e5/0/a951f92d-41ed-47ff-909e-0a4f1960d4be63547.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第6屏] 适用人群介绍页。
[氛围/风格] 亲和清晰，卡片式设计，专业简约，让用户快速判断是否适合自己。
[元素布局] 顶部主标题，中部五个适合人群卡片从上到下排列，每个卡片标注一个人群和对应学习收益，留白适中，排版不拥挤。
[光影质感] 均匀柔和布光，每个卡片增加轻微阴影提升立体感，文字清晰可读。
[配色色系] 全局底色 #f5f7fa，卡片用白色底色，标题深蓝色，文字深灰色，视觉清爽。
[视角构图] 纵向9:16排版，从上到下信息层级清晰，符合手机阅读顺序。
[文字版式] 主标题："适合这样的你学习"，依次列出：1. 零基础想要入门AI的新手，2. 想利用AI提升工作效率的职场人，3. 内容创作者想要提升产能，4. 想要通过AI技能拓展副业的朋友，5. 想学习最新AI工具使用的爱好者。每个人群用卡片呈现，标题加粗说明人群，小字补充说明学习收获，排版清晰。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 卡片重叠，文字错乱，文字过小，配色杂乱，变形，水印](https://gd-cms.dancf.com/gd-cms/xi19e5/0/ccc1eb01-e5b8-4b08-9844-7296218f01da63458.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第6屏] 适用人群介绍页。
[氛围/风格] 亲和清晰，卡片式设计，专业简约，让用户快速判断是否适合自己。
[元素布局] 顶部主标题，中部五个适合人群卡片从上到下排列，每个卡片标注一个人群和对应学习收益，留白适中，排版不拥挤。
[光影质感] 均匀柔和布光，每个卡片增加轻微阴影提升立体感，文字清晰可读。
[配色色系] 全局底色 #f5f7fa，卡片用白色底色，标题深蓝色，文字深灰色，视觉清爽。
[视角构图] 纵向9:16排版，从上到下信息层级清晰，符合手机阅读顺序。
[文字版式] 主标题："适合这样的你学习"，依次列出：1. 零基础想要入门AI的新手，2. 想利用AI提升工作效率的职场人，3. 内容创作者想要提升产能，4. 想要通过AI技能拓展副业的朋友，5. 想学习最新AI工具使用的爱好者。每个人群用卡片呈现，标题加粗说明人群，小字补充说明学习收获，排版清晰。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 卡片重叠，文字错乱，文字过小，配色杂乱，变形，水印](https://gd-cms.dancf.com/gd-cms/xi19e5/0/e9e5491a-2f71-4c9b-9079-80487418651363542.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第3屏] 课程体系拆解页，展示三大核心模块。本屏使用【图3】作为内容参考。
[氛围/风格] 专业清晰，模块化设计，科技简约风，视觉层次分明。
[元素布局] 顶部主标题，中部三个卡片式模块从上到下依次排列，每个模块内标注模块名称和核心内容，底部总结课程价值，排版规整，模块间距合适。
[光影质感] 均匀布光，每个卡片模块有轻微阴影增强立体感，文字清晰不模糊。
[配色色系] 全局底色 #f5f7fa，三个模块分别使用浅蓝、浅紫、浅青三种不同浅底色区分，标题用深蓝色加粗，内容用深灰色文字。
[视角构图] 正面纵向排版，从上到下依次阅读，符合手机端浏览习惯。
[文字版式] 主标题："三大核心模块 系统化学习"，模块1标题："基础认知"，内容："豆包功能、智能体创建、提示词技巧"；模块2标题："创作应用"，内容："写作辅助、内容生成、专业领域应用"；模块3标题："商业变现"，内容："爆款内容量产、销售话术、商业文案"；底部总结："一站搞定AI全场景应用"。每个模块标题加粗，内容清晰，阅读舒适。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 文字错乱，模块重叠，颜色混淆，文字过小，结构错误，水印，变形](https://gd-cms.dancf.com/gd-cms/xi19e5/0/f82e31fc-243b-4ddf-afd0-a38e7aa4b5f963880.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)
![[第3屏] 课程体系拆解页，展示三大核心模块。本屏使用【图3】作为内容参考。
[氛围/风格] 专业清晰，模块化设计，科技简约风，视觉层次分明。
[元素布局] 顶部主标题，中部三个卡片式模块从上到下依次排列，每个模块内标注模块名称和核心内容，底部总结课程价值，排版规整，模块间距合适。
[光影质感] 均匀布光，每个卡片模块有轻微阴影增强立体感，文字清晰不模糊。
[配色色系] 全局底色 #f5f7fa，三个模块分别使用浅蓝、浅紫、浅青三种不同浅底色区分，标题用深蓝色加粗，内容用深灰色文字。
[视角构图] 正面纵向排版，从上到下依次阅读，符合手机端浏览习惯。
[文字版式] 主标题："三大核心模块 系统化学习"，模块1标题："基础认知"，内容："豆包功能、智能体创建、提示词技巧"；模块2标题："创作应用"，内容："写作辅助、内容生成、专业领域应用"；模块3标题："商业变现"，内容："爆款内容量产、销售话术、商业文案"；底部总结："一站搞定AI全场景应用"。每个模块标题加粗，内容清晰，阅读舒适。
[比例分辨率] 9:16 竖版比例，分辨率 4K，高清画质，文字清晰可辨。
[负向提示词] 文字错乱，模块重叠，颜色混淆，文字过小，结构错误，水印，变形](https://gd-cms.dancf.com/gd-cms/xi19e5/0/9603ebdd-dfa9-4e06-b803-ffc5f5f6a65863172.jpeg?x-oss-process=image/resize,w_640,type_6/sharpen,120/interlace,1)