Stitch 前端设计提示词

下面这段提示词可直接用于 Stitch 生成当前项目的前端设计稿。

建议用法：

1. 直接整段复制到 Stitch
2. 如果 Stitch 支持附加参考资料，可同时附上：
   • docs/venue-operations-research-frontend-page-component-checklist.md
   • README.md
3. 如果 Stitch 一次只能生成一个页面，可先生成 Dashboard，再按文末页面顺序继续拆页

---

Prompt

你是一名资深产品设计师与高级 Web UI 设计师，请为一个“场馆运营反馈调研平台”设计一套完整的 Web 工作台界面。

这不是营销官网，也不是通用 SaaS 后台，而是一个围绕“研究任务 -> 数据采集 -> 多引擎分析 -> 报告交付”组织起来的专业工作台。

请直接输出高保真、多页面、一致性强的产品界面设计方案。

一、产品背景

产品名称可使用：

• BettaFish Workbench
• Venue Ops
• 场馆运营反馈调研平台

这是一个服务于博物馆、艺术馆、数字展馆、文旅场馆运营团队的研究分析平台，用来统一管理：

• 场馆研究任务
• 多平台评价/内容采集
• 多引擎分析过程
• 报告生成与交付
• 系统配置维护

用户不是来“浏览内容”的，而是来“持续推进任务”的。

因此界面必须强调：

• 当前上下文
• 当前状态
• 下一步动作
• 跨页面的一致工作流

二、信息架构

请设计以下 6 个一级页面，并保持统一的工作台外壳：

1. Dashboard
2. Task Center
3. Crawler Management
4. Engine Workspace
5. Report Center
6. Settings

请同时设计统一的：

• 左侧导航 Sidebar
• 顶部状态栏 Topbar
• 通用状态标签
• 通用卡片体系
• 通用表单体系
• 空状态 / 加载状态 / 错误状态

三、页面功能要求

1. Dashboard

目标：作为“总控台”，让用户一眼看到当前研究对象、采集状态、引擎状态、报告进度，并快速进入下一步。

请包含：

• Hero 总览区
• 4 个核心指标卡
• 当前研究任务卡
• 引擎状态卡
• 最近研究任务列表
• 报告交付状态卡

2. Task Center

目标：统一创建、编辑、切换研究任务，并查看任务与报告任务列表。

请包含：

• 顶部任务概览区
• 研究任务表格
• 报告任务表格
• 研究任务编辑工作区
• 研究指令输入区
• 当前任务摘要卡
• 历史任务切换区

研究任务表单字段至少包含：

• 场馆名称
• 所在城市
• 场馆类型
• 研究重点
• 观察周期
• 竞品 / 标杆场馆
• 研究补充要求
• 研究指令

3. Crawler Management

目标：完成平台登录、采集配置、采集执行、排障恢复。

请包含：

• 平台切换条
• 登录方式切换
• 采集模式切换
• 采集参数表单
• 工作流步骤区
• 二维码登录区
• 实时日志区
• 当前平台历史记录区
• 排障建议区

请重点体现以下状态：

• 未登录
• 二维码登录中
• 已登录可采集
• 采集中
• 存在风险提示 / 校验失败

4. Engine Workspace

目标：展示 Insight、Media、Query、Forum 的运行状态与输出。

请包含：

• 引擎切换卡组
• 顶部操作区
• 引擎运行区
• Forum 讨论流
• 控制台输出区
• 空状态提示

5. Report Center

目标：生成报告、查看历史任务、预览报告、下载交付物。

请包含：

• 报告总览区
• 自定义模板输入区
• 报告任务侧栏
• 当前报告预览区
• 进度状态
• 下载按钮（HTML / Markdown / PDF）

重点体现：

• 生成中状态
• 已完成状态
• 无报告空状态

6. Settings

目标：维护数据库、模型、搜索工具和网络相关配置。

请包含：

• 页面说明区
• 分组折叠配置面板
• 输入框与密码框
• 刷新与保存按钮
• 配置提示信息

配置分组建议为：

• Database
• Insight / Media / Query
• Report / Forum / Optimizer
• Search / Network

四、视觉方向

请不要做成通用 AI 后台，也不要做成紫色渐变 SaaS 模板。

采用以下明确风格方向：

整体气质

• 温暖、克制、专业、带一点编辑感
• 像“研究工作台”而不是“销售后台”
• 有文化机构 / 展馆 / 档案研究的气质
• 信息密度中高，但层级必须清晰

风格关键词

• Editorial operations workbench
• Warm parchment
• Forest green
• Brass accent
• Calm control room
• Museum-grade sophistication

推荐色彩方向

• 背景：暖米色 / 羊皮纸色
• 主深色：深森林绿 / 墨绿
• 强调色：黄铜金 / 琥珀棕
• 文本：深灰黑
• 成功：深青绿
• 警告：陶土棕
• 错误：暗砖红

避免：

• 紫色主色
• 纯科技蓝赛博风
• 过强玻璃拟态
• 过度发光
• 典型 AI 生成式圆角卡片堆叠套路

字体方向

请使用有识别度的字体组合，风格偏：

• 标题：高质感衬线字体
• 正文：现代但克制的人文无衬线
• 标签 / 状态 / 时间：等宽字体

如果 Stitch 支持字体建议，可参考：

• 标题：Playfair Display / Newsreader 风格
• 正文：Funnel Sans / Geist 风格
• 辅助标签：IBM Plex Mono 风格

五、布局要求

设备优先级

• 以桌面端优先设计
• 主要目标宽度：1440px
• 兼顾 1280px
• 需要考虑移动端/窄屏的收纳逻辑，但先以桌面稿为主

布局结构

统一采用：

• 左侧固定导航
• 右侧主工作区
• 主工作区顶部状态栏
• 页面内容区可纵向滚动

页面体验

每一页必须有：

• 一个主焦点区域
• 一个清晰的主操作
• 明确的状态反馈
• 可持续工作的节奏

不要让所有模块权重一样。

六、状态设计要求

请在设计中体现以下系统状态组件：

• loading
• empty
• error
• success
• running
• generating
• logged in
• awaiting scan
• ready to run

特别是以下页面请体现关键状态稿：

• Crawler Management：未登录、扫码登录、采集中
• Report Center：待生成、生成中、已完成
• Engine Workspace：引擎未启动、运行中、Forum 有消息

七、组件设计要求

请在设计中形成一套统一组件语言，至少包含：

• 导航项
• 页面标题区
• 指标卡
• 内容卡
• 状态标签 / 状态胶囊
• 按钮体系
• 表格体系
• 表单输入体系
• 日志面板
• 任务列表项
• 预览框
• 空状态模块

八、输出要求

请输出：

1. 一套统一风格的 Web 工作台设计
2. 6 个完整页面
3. 尽量带有真实产品感，而不是概念海报
4. 页面之间保持同一套设计系统
5. 强调“任务推进感”和“状态可见性”

如果支持，请优先生成：

• Dashboard
• Task Center
• Crawler Management
• Report Center

然后再补：

• Engine Workspace
• Settings

九、明确禁止

不要生成以下内容：

• 登录页
• 注册页
• 用户中心
• 权限后台
• 纯官网 Landing Page
• 与当前产品无关的聊天机器人首页

不要把它做成：

• 普通 CRM
• 通用 BI 大屏
• 电商后台
• 紫白渐变 AI SaaS 模板

十、最终目标

请把它设计成一个真正可以服务运营研究团队的产品工作台：

• 看起来可信
• 信息结构成熟
• 有行业气质
• 有执行感
• 适合长时间使用

重点不是炫技，而是“专业、清晰、独特、可持续工作”。

---

如果你一次只能生成一个页面，请先生成 Dashboard，并保持后续页面与该页面的风格、导航、组件体系完全一致。