【jade教程C/C++】如何3分钟产生一个漂亮的UI

花老板

【教程2 · C++版】用 AI + C++ 玩转 JadeView 原生桌面 UI（附完整源码 + 可直接运行的 exe）


前言：
上一期我们用易语言喂一份规范给 AI，3 分钟生成了一个 JadeView 界面。
这一期把宿主语言换成 C/C++，同样一套"给 AI 一个明确目标（规范 + 参考），它照着方向产出前后端"的打法。

再强调一遍那句话：
现在指挥 AI 干活，本质是给它一个目标。前端也好、后端也好，你给它一个参考，它就照着方向前进。
任何语言都能实现（易语言 / go / rust / py / C / C++ / C# / java），任何能编程的 AI 都能实现。

这次的成品叫 JadeDesk：一个 Modern Native 极简风格的桌面小工具，浅色/深色双主题，
前端用 HTML/CSS/JS 写界面，后端用 C++ 通过 JadeView v2（WebView2 内核）承载，两边用 IPC 双向通信。

本期我为了方便大家理解，使用了 Claude code  Fable5模型 CLI模式
继续强调：任何AI都可以实现，换个模型只是告诉你，用什么都可以。

1：把文档资料喂给AI，直接开工


2：直接运行成品exe看效果 （说的3分钟，实际只用了1分钟）



■ 它和易语言版哪里不一样？

• 宿主语言是 C++，用 MSVC（VS2019）一键编译。
• 静态链接 JadeView_x64.lib —— 编出来的 exe 不依赖那个 DLL
• （DLL 是给易语言/Python 这类动态加载语言用的），只需系统自带的 Edge WebView2 运行时。
• 界面刻意走克制的 Modern Native 风（纯蓝主色、无渐变无发光）
• 和花哨的霓虹仪表盘正好相反 —— 严格贯彻《UI设计规范》。
  

■ JadeDesk 演示了哪些能力（都是真·C++ 后端）？

• 窗口/主题/背景材料：title-overlay 系统按钮 + 宿主端按主题配色、Mica/亚克力、置顶
• IPC 双向通信：前端 invoke → C++ 处理；C++ send_ipc_message → 前端 jade.on
• 系统能力：文件对话框、系统通知、系统信息（JadeView/WebView2 版本、语言、Win11 检测）
• 数据持久化：YAML 存草稿
• 网络校时：NTP 获取标准时间
  

■ 四步复现（傻瓜流程，这个图片，也是F5生成的，果然是强）

1：把两份规范 + 参考喂给 AI，让它理解：
   C++调用规范.md（易语言调用规范的 C++ 版）
   JadeViewUI设计规范AI提示词.md（视觉规范）
   JadeView.h（C ABI 头文件）+ 参考实现 src/main.cpp

2：让 AI 产出 src/main.cpp（C++ 宿主）+ web/（前端）+ build.bat（编译脚本）。

3：双击 build.bat（自动调 vcvars64，MSVC 编译链接）→ 产出 dist/JadeDesk.exe。

4：运行 dist/JadeDesk.exe，原生桌面应用就跑起来了。（其它语言直接用，不需要编译这步。）


■ 我已经帮你把坑填平了（C++ 版实测踩坑清单）
这些坑在《C++调用规范.md》第十二章有完整记录，照着抄就不会中招：

• 头文件第 787 行 i64 笔误（Rust 类型），C++ 编不过 → 包含前 typedef 一下。
• 中文路径 404 大坑：取 exe 目录必须用 GetModuleFileNameW 转 UTF-8，用 A 版会把中文路径喂坏，协议服务直接 404。
• 协议服务根路径要用正斜杠。
• 静态库要补一长串 Windows 系统库（ws2_32/bcrypt/ntdll/winspool…），否则一堆 LNK2019。
• 系统信息有时序竞争：打开"系统"页时再拉取才稳。
  

■ 附件包含

• C++调用规范.md、JadeViewUI设计规范AI提示词.md（两份提示词/规范）
• src/main.cpp（C++ 宿主源码，注释详尽）
• web/（前端 index.html + css + js）
• build.bat（一键编译）
• dist/JadeDesk.exe（编好的，双击即运行）
• img/（本帖全部配图）
  

环境要求：Windows 10/11 + 已安装 Edge WebView2 运行时（系统一般自带）
自行编译需 Visual Studio 2019+（MSVC x64）。

提示词 + 源码 + exe + 配图 打包下载：

游客，如果您要查看本帖隐藏内容请回复

【QQ群】jadeView前端UI：1103426302

wh1234567

谢谢分享！！

jysoft2022

感谢分享

tsl0413

img/（本帖全部配图）

yangdoudou

给楼主点赞或评分打赏，让楼主更有动力创作优秀内容！

fastdao

如果您要查看本帖隐藏内容请回复

hxq7311

不想静静

感谢分享

youxigw

感谢楼主的分享

一世深情一世美

感谢分享