上位机 AI 开发工作流

Appearance

界面原型到 WPF 开发流程 ​

这份文件用于解决 WPF 上位机界面返工问题。

很多上位机项目不是代码写不出来，而是界面方向一开始没确认：按钮放哪里、曲线占多大、日志是否常驻、参数配置放主界面还是二级页面，这些没想清楚就写 XAML，后面很容易反复改。

推荐做法不是让用户手工写一大堆页面 Prompt，而是怎么方便怎么来：

  1. 如果已经有需求文档、技术方案、客户说明书，直接传给 AI，让 AI 先分析界面应该怎么设计。
  2. 如果还没有完整方案，只说大概需求，让 AI 先出一个初版界面方案和效果图。
  3. 在初版基础上不断提修改意见，直到效果图接近你想要的样子。
  4. 效果图确认后，再进入 WPF 页面拆分和代码开发。

一句话：先让 AI 看资料和出图，不要一开始就手工填一堆控件清单。

1. 适合什么时候用 ​

适合：

  1. 从 0 做 WPF 上位机项目。
  2. 客户或自己对界面没有明确想法。
  3. 主界面包含曲线、表格、状态、日志、按钮，信息比较多。
  4. 需要先给客户确认界面方向。
  5. 现有 WPF 页面不好用，准备重新调整布局。

可以跳过：

  1. 只是改一个按钮文字。
  2. 只是修一个绑定错误。
  3. 纯通信、纯协议、纯数据保存任务。
  4. 已经有明确 UI 设计稿或现成界面。

2. 推荐完整流程 ​

text
准备资料或描述大概需求
-> 让 AI 分析界面结构
-> AI 生成第一版界面方案/效果图
-> 人工提出修改意见
-> AI 继续迭代效果图
-> 效果图达到预期
-> 拆成 WPF 页面任务
-> 生成 XAML / ViewModel / Service
-> 模拟数据验证
-> 真实功能接入
-> 回归测试和交付

对应资料：

阶段主要文件
需求拆解10-问题定义与用户场景.md、11-上位机项目需求拆解表.md
质量检查12-AI开发质量门.md
界面原型23-界面原型到WPF开发流程.md
WPF 开发20-WPF上位机AI开发流程.md
通信和协议21-串口TCP通信任务模板.md
验收测试30-回归测试与验收清单.md
Skill 调用60-host-computer-dev-Skill说明.md

3. 三种实际使用方式 ​

3.1 有需求文档或技术方案：直接给 AI 看 ​

这是最推荐的方式。

如果你已经有下面任意一种资料：

  1. 客户需求文档。
  2. 自己整理的需求拆解表。
  3. 技术方案。
  4. 设备说明书。
  5. 通信协议文档。
  6. 旧软件截图或客户参考图。
  7. 当前项目的页面截图。

就不需要重新手写一大段界面 Prompt。直接把资料传给 AI，让它先分析。

text
请阅读我上传的需求文档/技术方案/截图。

请先不要写 WPF 代码。

请先帮我分析这个上位机软件应该怎么设计界面。

请输出：
1. 软件主要使用人员。
2. 主界面应该显示哪些信息。
3. 哪些操作应该放在主界面。
4. 哪些配置应该放到二级页面。
5. 建议有哪些页面。
6. 主界面区域布局。
7. 每个区域放哪些控件。
8. 哪些信息需要实时刷新。
9. 哪些内容适合用曲线、表格、状态灯、日志显示。
10. 根据这些分析，生成一版适合 WPF 开发参考的界面效果图描述。

如果 AI 工具支持生成图片，就继续说：

text
请根据上面的界面方案，生成一张 WPF 工控上位机主界面效果图。

要求：
1. 工控软件风格，不要营销页风格。
2. 信息密度高但不要混乱。
3. 主操作按钮明显。
4. 状态、曲线、表格、日志区域清楚。
5. 中文标签清晰。
6. 适合作为后续 WPF 页面开发参考。

3.2 没有完整需求：先出初版 ​

如果你现在只有一个大概想法，不需要先憋完整文档。

可以先让 AI 出一个初版，再慢慢改。

text
我现在还没有完整需求文档，先帮我根据下面的大概需求设计一个 WPF 上位机界面初版。

项目大概是：
【例如：一个用于电源测试的数据采集上位机】

主要功能大概有：
【例如：连接设备、开始测试、显示电压电流曲线、保存数据、查看日志】

使用人员：
【例如：测试工程师 / 操作员】

请先输出：
1. 你理解的页面结构。
2. 主界面应该放什么。
3. 哪些内容应该放二级页面。
4. 第一版界面效果图设计思路。
5. 需要我继续确认的问题。

然后生成一版初始界面效果图。

初版不需要一步到位。它的作用是给你一个可以修改的起点。

3.3 有旧界面或参考图：让 AI 按图改 ​

text
请参考我上传的旧界面/参考图，帮我重新设计一版 WPF 上位机界面。

保留：
1. 原界面的核心功能。
2. 必须显示的数据。
3. 必须保留的操作按钮。

优化：
1. 布局更清晰。
2. 高频操作更明显。
3. 状态和报警更容易识别。
4. 曲线、表格、日志区域更合理。
5. 更适合后续用 WPF 实现。

请先分析原界面的问题，再生成一版改进后的效果图。

4. 怎么迭代效果图 ​

AI 生成第一版效果图后，通常不会一次满意。正常做法是继续提修改意见。

不要重新写完整 Prompt，只需要针对当前图说具体修改点。

常见修改方式：

text
这版方向可以，但请继续修改：

1. 曲线区域太小，请放大到主视觉区域。
2. 日志区域可以降低高度，只保留底部一行区域。
3. 参数配置不要放主界面，改成右上角按钮进入二级页面。
4. 连接、开始、停止按钮要更明显。
5. 报警状态要放到顶部状态栏，并用红/黄/绿区分。
6. 整体不要像网页后台，要更像工控上位机软件。

请基于上一版继续生成新效果图，不要完全换方向。

也可以这样逐步迭代：

text
这一版先保留整体布局，只调整三点：

1. 把左侧控制区缩窄。
2. 把实时数据卡片放到顶部。
3. 把曲线图放到中间最大区域。

其他内容先不要大改。

每次只改几个点，效果会比每次重新生成一版更稳定。

5. 必要时再用页面 Prompt ​

下面这些 Prompt 不是必须从头填写的。

只有在 AI 无法从文档里提炼出页面，或者你想单独生成某个页面时，再使用。

主界面补充 Prompt ​

text
请基于当前需求，单独细化主界面效果图。

主界面重点显示：
1. 设备连接状态。
2. 运行状态。
3. 关键实时数据。
4. 曲线。
5. 高频操作按钮。
6. 日志和报警。

请保持工控软件风格，适合 WPF 开发。

参数配置页补充 Prompt ​

text
请基于当前需求，单独设计参数配置页。

重点包含：
1. 通信配置。
2. 采集参数。
3. 保存路径。
4. 报警阈值。
5. 保存、应用、取消、恢复默认按钮。

要求表单分组清楚，不要把低频配置塞到主界面。

历史查询和报警页补充 Prompt ​

text
请基于当前需求，设计历史查询页和报警记录页。

历史查询页重点包含查询条件、结果表格、导出和统计。
报警记录页重点包含当前报警、历史报警、报警等级、确认和导出。

要求适合工程人员长期使用，信息清晰，不要花哨。

6. 效果图确认清单 ​

拿到效果图后，先检查：

  1. 主操作按钮是否明显。
  2. 状态信息是否一眼能看懂。
  3. 表格和曲线是否有足够空间。
  4. 日志区是否不会抢占主要区域。
  5. 参数配置是否分组清楚。
  6. 报警颜色是否醒目但不刺眼。
  7. 是否适合目标屏幕尺寸。
  8. 是否符合工程软件风格，而不是宣传页风格。
  9. 中文标签是否清楚，是否存在乱码风险。
  10. 高频操作和低频配置是否分开。
  11. 是否符合需求文档里的核心流程。
  12. 是否有明显多余的装饰或营销化元素。

如果效果图方向不对，先改原型，不要急着写 WPF。

7. 从效果图转 WPF 开发任务 ​

确认效果图后，让 AI 直接生成一套可以喂给 Codex（或其他 AI 编程工具）的执行指令。用户拿到这套指令后，复制粘贴到 Codex 里就能开始开发，不需要自己在中间做翻译。

text
我已经确认了上位机界面效果图。请你根据这张效果图，帮我生成一套可以直接交给 Codex 的 WPF 开发指令。

效果图说明：
【粘贴效果图描述或截图文字】

功能需求：
【粘贴需求拆解表中的 UI 部分】

请输出的内容，就是我要复制到 Codex 里说的话。不要写给我看的结构分析，直接输出 Codex 能执行的开发命令。

更省事的说法：

text
请根据我确认的效果图，直接生成一套 Codex 可执行的 WPF 开发指令。

8. 使用 Skill 的方式 ​

如果你已经安装 host-computer-dev Skill，可以直接让它处理：

text
调用 host-computer-dev，请根据我确认的效果图，生成一套可以直接在 Codex 里执行的 WPF 开发指令。

效果图说明：
【粘贴】

需求背景：
【粘贴】

如果你用的是 Cursor、CodeBuddy/WorkBuddy、Trae 或其他工具，也可以让它读取 skills/host-computer-dev/03-ui-designer/ 和 20-WPF上位机AI开发流程.md，再把这套流程转换成当前工具的项目规则。

9. WPF 开发时的注意事项 ​

  1. 先做页面结构，不急着接真实设备。
  2. 先用模拟数据验证绑定和刷新。
  3. 先做主界面，再做参数配置、历史查询、报警记录。
  4. 表格、曲线、日志要注意性能。
  5. 不要一次让 AI 写完整 MainWindow 和完整 MainViewModel。
  6. 每次只开发一个页面或一个区域。
  7. 修改前先备份项目，尤其是已有项目。
  8. 做完页面后用 30-回归测试与验收清单.md 检查。

10. 特殊环境提醒 ​

如果你的电脑有企业加密软件，保存 .cs、.xaml、.csproj 后 AI 可能读不到文件。

这种情况先看：

text
07-加密软件环境下的AI开发注意事项.md

建议开发顺序：

  1. 原型图和界面拆分阶段不直接改代码。
  2. 进入代码修改前先备份。
  3. 必要时使用 .work 这类临时后缀编辑。
  4. 改完后恢复正式后缀。
  5. 再用 Visual Studio 编译和运行验证。

11. 最短流程 ​

text
有需求文档/技术方案就直接上传
-> AI 分析界面结构
-> 生成第一版效果图
-> 按你的意见迭代
-> 效果图确认
-> 20 WPF 页面拆分
-> 模拟数据开发
-> 接入通信/数据
-> 30 回归验收

一句话：先让 AI 看资料出图，图不满意就迭代，图满意后再写 WPF。怎么方便怎么来，不要为了写 Prompt 而重复劳动。

上位机 AI 开发工作流资料包 | 閑魚：別來無恙

Copyright © 2026 別來無恙