【学习工作赛道】GoFyneUI Designer —— 可视化 Go + Fyne UI 设计器，让 Go 开发者也可以拖拽设计桌面应用界面。

TRAE AI 创造力大赛 【大赛初赛专区】
1

【学习工作赛道】GoFyneUI Designer —— 可视化 Go + Fyne UI 设计器

用 TRAE 从零到一打造的可视化 UI 设计工具，让 Go 开发者也能像用 Figma 一样拖拽设计桌面应用界面。

我叫马超,爱玩红警,所以网名重装大兵.文科专业的,但是热爱编程,最早入门是学习的易语言,然后又逐渐学习c#,c,golang,vue,从没有老师带,所以一直在野生的路上自学.

学go后,一直用go做主力语言, 一些简单的小工具也是用go,但是一直没有一款自己觉的好用的设计器,写界面就比较麻烦费时,于时就想做一个这种可视设计工具,我不确定这个工具有多大的商业价值,但是我相信肯定可以解决像我有这种烦恼的问题,提高效率

一、Demo 简介

是什么

GoFyneUI Designer 是一款面向 Go 语言开发者的可视化 UI 设计器。它基于 Fyne 跨平台 GUI 框架，参考element-plus ,提供拖拽式组件面板、实时属性编辑、代码自动生成三大核心能力，让 Go 开发者无需手写冗长的 UI 代码，即可快速构建美观的桌面应用程序。

更重要的是：项目内置的组件库完全参照 Element Plus 设计规范封装，即便你不使用设计器本身，也可以直接导入这些 Element 风格的 Fyne 自定义组件，像调用标准库一样在代码中使用。设计器与组件库解耦，各取所需。

面向谁

  • Go 语言初学者：想通过拖拽方式快速上手 GUI 开发，降低学习曲线
  • 独立开发者：需要快速搭建桌面工具、内部管理系统原型
  • 只想用组件库的开发者：不依赖设计器，直接 import Element 风格的 Fyne 组件到现有项目
  • 跨平台应用团队：一套设计，同时输出 Windows / macOS / Linux / Android / iOS 应用

主要功能

功能模块 说明
组件库面板 30 种预设组件（Button、Input、Tag、Image、Rate 等），拖拽到画布即可使用
可视化画布 支持拖拽布局、网格对齐、组件嵌套、实时预览
代码生成器 一键将设计稿导出为可运行的 Go + Fyne 源代码
组件封装标准 定义了完整的组件元数据结构，支持自定义组件扩展
组件库独立使用 不依赖设计器，直接 import 组件包到任意 Fyne 项目，像 Element Plus 一样调用

界面预览

代码预览
代码预览1920×1040 164 KB

代码预览
代码预览1402×932 153 KB

录制_2026_07_01_12_30_59_716

二、Demo 创作思路

灵感来源

作为一个长期使用 Go 语言的开发者，我深切感受到 Go 在服务端领域的强大，但在桌面 GUI 开发方面却一直缺乏好用的可视化工具。市面上有 Qt Designer、Figma、Framer 等优秀的 UI 设计工具，但几乎没有一款是专门为 Go 语言生态打造的。Fyne 虽然提供了完整的跨平台 GUI 能力，但开发者仍需手写大量 widget.NewButton(...) 这样的代码来构建界面。

于是我想：为什么不能给 Go + Fyne 做一个像 Figma 那样的可视化设计器？

想解决的问题

  1. Go GUI 开发效率低：手写 Fyne UI 代码繁琐，布局调整需要反复编译运行
  2. 缺乏设计到代码的桥梁：设计师和开发者之间没有好用的协作工具
    3组件复用困难：没有标准化的组件封装规范，团队难以共享组件

为什么做这个方向

  • 市场需求明确：Go 语言在云计算、DevOps、区块链领域快速增长，大量开发者有构建配套桌面工具的需求
  • 技术可行性高：Fyne 框架已成熟，支持跨平台，且 API 设计清晰，非常适合可视化封装
  • 差异化定位：现有工具多面向 Web/移动端，面向 Go 桌面端的可视化设计器几乎是空白
  • 大赛契合度高：TRAE 的 Agent 能力非常适合处理复杂的代码生成、文档编写、架构设计等任务

三、Demo 体验地址

二进制下载地址:
https://wwbhi.lanzoub.com/in18k3wmufzi

需要安装go, cgo,gofyne库
源码托管GoFyneUiDesigner: GoFyneUI Designer - 基于 Go Fyne 的可视化桌面应用设计工具

当前状态：项目已完成核心架构设计,部分组件封装完成,代码生成,

整个项目从 0 到设计文档体系完成，全部由 TRAE IDE / TRAE Work 辅助完成。以下是关键开发阶段：

第一阶段：需求分析与架构设计
└─ 用 TRAE 确定整体设计架构
└─ 用 TRAE 分析 Fyne API，确定组件封装策略
└─ 用 TRAE 设计 Seed → Map → Alias 三层主题架构

第二阶段：核心模块设计
└─ 用 TRAE 编写组件封装标准（2000+ 行设计文档）
└─ 用 TRAE 设计画布系统、代码生成器、主题系统
└─ 用 TRAE 编写代码编辑框、调试、CLI 模块设计文档

第三阶段：工程代码实现
└─ 用 TRAE 生成 BaseInstance、ComponentMeta 等核心结构体
└─ 用 TRAE 实现拖拽画布和属性编辑器原型

4.2 关键步骤截图

1.写开发文档
1.写开发文档1913×1031 89.4 KB

2.生成界面
2.生成界面1920×1040 98.2 KB

3开始写代码
3开始写代码1920×1040 71.6 KB

4任务进行中
4任务进行中1920×1040 76.2 KB

解决报错，未定义变量
解决报错，未定义变量1920×1043 135 KB

写解决方案
写解决方案1920×1038 75.1 KB

13
132490×1332 356 KB

组件卡顿
组件卡顿1920×1040 176 KB

解决麻烦问题，
解决麻烦问题，1919×1038 184 KB

** 1：确定好创意,写出开发文档**
向 TRAE 描述需求后，AI 生成了包含 14 个章节、2000+ 行的完整 HTML 设计文档，涵盖接口拆分、属性分类、事件分类、代码生成元数据等全部内容。
2144514429160420:58997e7858b7b21e591913edc5427ff9_6a364a27f31bc0749d4d6818.6a368d9cf31bc0749d4d69b8.6a368d9cf31bc0749d4d69b6:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/20 20:54:52)
** 2：开始写代码 **
2144514429160420:1feb09381e096c0be55417c81d777102_6a364a27f31bc0749d4d6818.6a36a179f31bc0749d4d6aa5.6a36a179f31bc0749d4d6aa3:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/20 22:19:37)
** 3：测试后解决报错 **
2144514429160420:e494478e6c12483a1ce64d696290cc6b_6a364a27f31bc0749d4d6818.6a374700fe06ca2e633ef26f.6a374700fe06ca2e633ef26d:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/21 10:05:52)
组件封装方案探索
.2144514429160420:6ec3598ad93f3280143b27003cbfde9a_6a41af2c42a48303d9fbd3dc.6a42268642a48303d9fbe0ae.6a422685fda50f2c8261d989:Trae CN.T(2026/6/29 16:02:14)
解决拖放卡顿
.2144514429160420:6bb4de8783e956e45eae0067a6574683_6a41af2c42a48303d9fbd3dc.6a41afeb42a48303d9fbd3de.6a41afebfda50f2c8261d96e:Trae CN.T(2026/6/29 07:36:11)
修复组件树
.2144514429160420:6b6568314f59cb0946be696a0639c427_6a51977ff2938598cef609ac.6a5197f6f2938598cef609ae.6a5197f62cf165d9f866b055:Trae CN.T(2026/7/11 09:10:14)

五、通过审核的报名帖链接

六、技术架构

6.1 核心模块

GoFyneUI Designer
├── internal/
│   ├── component/          # 组件封装与元数据
│   ├── canvas/             # 可视化画布
│   ├── editor/             # 属性编辑器
│   ├── codegen/            # 代码生成器
│   ├── theme/              # 主题系统
│   ├── project/            # 项目读写
│   └── event/              # 事件总线
├── pkg/
│   └── element/            # Element Plus 风格组件库
├── main.go                 # 主程序入口
│
└── docs/                   # 设计文档

6.2 关键技术决策

  • Fyne v2：跨平台 GUI 框架，一套代码跑在 Windows/macOS/Linux/Android/iOS 上
  • Ant Design Token 体系：借鉴 Seed → Map → Alias 三层派生，实现灵活主题切换
  • Go 接口拆分（ISP）：将 IComponentInstance 拆分为 7 个小接口，提升可扩展性
  • 代码生成模板：基于组件元数据自动生成 Go window.go和event.go源代码，支持增量更新

七、后续计划

阶段 目标
Phase 1 完善element-plus组件封装
Phase 2 实现代码编辑器
Phase 3 完善调试 + CLI

八、开发经验与心得

核心开发经验总结
以下是我用 TRAE 开发整个项目后总结的 4 条核心经验：

经验一：写代码之前一定要先写文档

直接让 AI 写代码，产出和预期偏差会非常大。AI 会基于自己的"合理推断"去填充细节，而这些推断未必符合你的真实需求。正确的做法是：先用 TRAE 生成完整的设计文档，把接口定义、数据结构、模块边界、配色方案、交互逻辑全部定下来，审阅确认后再让 TRAE 按文档实现代码。文档是契约，代码是执行。有文档兜底，代码偏差极小。

经验二：一定要分模块进行，一个模块的所有问题尽量在一个对话中解决

不要在一个对话里混杂多个模块的需求。TRAE 的上下文窗口有限，当对话中穿插着"组件封装标准"、“画布系统”、"代码编辑框"等不同模块的讨论时，AI 很容易把不同模块的约束搞混。正确做法是：每个模块开一个独立对话，在该对话中集中解决该模块的所有问题（设计、实现、调试、优化）。模块内的连续性保证了解决方案的一致性。

经验三：AI 连续三次解决不了同一个问题，让它重读项目代码再检查

AI 有时会陷入"反复试错但方向一致"的循环——连续给方案、连续报错、但始终没有跳出自己的思路框架。我的判断标准是：同一个 bug 连续 3 次修复失败，就不再让 AI 继续猜了。此时应该让 TRAE 重新读取相关源码文件，从头分析上下文，而不是在之前的错误思路上修补。往往重读一遍代码后，AI 能发现之前忽略的关键细节。

经验四：AI 给出的方案语法一定没错，但策略未必最优——善用脑暴技能和人工引导

AI 生成的代码几乎不会有语法错误，编译一定能过。但"能编译"和"能正确工作"是两回事。AI 选择的技术方案可能是它认为最"常规"的，但不一定是最适合你当前场景的。遇到这种情况，可以：

让 AI 使用脑暴（Brainstorming）技能，扩展思路，跳出当前方案的局限
自己提供新的方向，比如"试试用状态机代替正则匹配"或"用观察者模式解耦这两个模块"，然后让 AI 沿着你给的方向实现
AI 是很强的执行者，但方向感需要人来把控。人定方向，AI 实现，效率最高。

实用小贴士
截图留痕：大赛要求附关键步骤截图，开发过程中记得在重要节点截图，不要等写帖子时再补,已经试过了, 太费劲了
Session ID 随手复制：关键任务完成后立即双击头像复制 Session ID，聊天记录久了不好翻
文档即资产：这些 HTML 设计文档本身就是项目的核心价值之一，可以直接作为 Demo 体验材料提交

本项目基于 TRAE IDE / TRAE Work 开发，感谢 TRAE 提供的强大 AI 编程能力！

2

支持一下，:star_struck: