上次文章发的匆忙，项目也进行的很快速，在这好几天的时间里诞生了第一个真正可用版本。实现过程中本人实际上没有写任何一行代码，甚至在一开始的时候对怎么实现都没有任何一点清晰的认知。从最开始的解析器、渲染器，到现在的第一个可用的Skill完成，终于是切实的体会到AI时代的到来。这里感谢下DeepSeek进行了想法的验证和指导，Trae负责了实际的编码调度和项目管理，Doubao-Seed-2.0-Code以及GLM-5实际做了编码工作，感谢🙏（这样说下来倒像一个团队了）。
一、为什么做 SolarWire？
最早的思考，应该是在去年了，AI的应用正火热，所以我也想自己能多摸摸鱼。但是在使用的过程中就发现了一些非常头疼的事情。
第一件事就是Axure，我习惯的产品文档现在是用Axure产生的，里面的描述和说明也都是在Axure里进行说明。这样的场景下，就会发现Axure这玩意儿跟AI是八字不合。本身.rp格式是封闭格式，再加上有一些原型方面的规范，到AI层面就很难解析出来，界面元素与说明的对应关系就无法建立。然后就会影响到后续的PRD转为代码、测试用例；
第二件事就是业务背景的输入。大多数时候，我们负责的项目会是一个已经维护了数十年或数年的项目，此时产生的业务背景信息是无比庞大的，人工梳理几乎是不可能的。但是，在没有这些业务背景的情况下，AI根本无法输出有效的方案。这也是现有的所有原型、设计工具都无法处理的；
直到最近在给公司技术团队培训AI一些基础概念后，才开始往——“为什么非得用Axure、Figma”——这个思路去想。
一旦开始了这个思路，也算是放飞了想象力了。很快就确定了必须有solarwire语法，必须可以嵌入markdown文档（天然结构化，天然语义化，AI天然支持）。然后就可以通过Skill从自然语言转化为.md格式的PRD，并且也可以从代码反向推导出PRD。这样就同时解决了AI无法理解、业务背景无法输入的问题。
所以，SolarWire 的初衷很简单：用纯文本描述 UI，让 AI 能理解、Git 能管理、团队好协作。官网在这儿：solarwire.github.io/SolarWire
二、SolarWire 是什么？
SolarWire 是一个轻量级的 DSL（领域特定语言），用类似 Markdown 的语法描述 UI 线框图。
!title="Login Page"
[] @(0,0) w=400 h=500 bg=#fff
"Welcome Back" @(150,80) size=24 bold
"Email" @(50,180)
["Enter your email"] @(50,205) w=300 h=44
"Password" @(50,280)
["Enter password"] @(50,305) w=300 h=44
["Sign In"] @(50,380) w=300 h=48 bg=#3498db c=white
这段代码可以直接渲染为 SVG 格式的线框图。
通过Skill，也完全可以描述一个CRM系统，交给AI生成21个页面/弹窗以及完整的PRD文档：
拿商机的原型举例：
当然也会同时有没有说明的版本，项目：
当然也做了VS Code的实时预览插件：
三、如何使用？
在线体验
我们（我和AI们）确实也实现了一个在线版的Playground。
访问官网 solarwire.github.io/SolarWire，在 Playground 中直接编写和预览。
VS Code 插件
在扩展商店搜索 “SolarWire Support”，提供语法高亮、实时预览、错误诊断、导出 SVG/PNG 等功能（这句话是瞎说的，除了实时预览和错误诊断，其它功能都没测过）。
AI 辅助生成
在任意支持Skill的工具中使用 solarwire-prd 技能（SolarWire/packages/ai/skill/solarwire-prd），AI 可以：
● 通过对话收集需求
● 自动生成完整的 PRD 文档
● 为每个页面生成 SolarWire 线框图
● 导出 SVG 图片
四、版本演进
从零到能用的过程，大概经历了这些阶段：
先把东西启动：先定下名字，github建组织建仓库，简单定义语法规范（坐标跟容器嵌套可太难了，所以现在也只有表格属于容器嵌套）；
再把东西做到有实感：解析器、渲染器、VS Code插件，这是首先做的。解析器根据语法规范解析为AST、渲染器把AST转为图形。但是VS Code插件是负责带来实感的东西；
再把东西做到能看：实时预览、错误诊断、语法优化。这时候可以说是最痛苦的时候了，元素的描述note怎么写、怎么渲染、换行的处理（最近好像有个pretext开源可以试试处理换行），容器嵌套也导致了很多问题。那几天算是最麻的时候。
再把东西做到能用：开始Skill的编写，确实很难让AI符合预期的去输出。再加上SolarWire本身没有太多资料，也是碰了很多灰。后来把解析、渲染的报错信息都完善了之后，AI也能自己去排查错误，也算是一次心得。
到现在，SolarWire 已经是一个完整的工具链了。解析器、渲染器、VS Code 插件、AI Skill、在线 Playground，现阶段也到了可以真正使用的程度。
五、未来规划
两个方向，都是解决实际痛点。
solarwire-code-to-prd：解决业务背景、项目文档的问题。让 AI 扫一遍代码，前端代码提取页面结构，后端代码提取接口和数据模型，然后自动生成 PRD 和线框图。这样老项目的业务背景就有了，AI后续也能继续处理改动。
solarwire-prd-to-testcase：顾名思义，用SolarWire画的图，支持针对元素写note，那自然也可以直接出测试用例（已经在测试了，效果拔群）。
六、与传统工具对比
这模块就用AI写了：
SolarWire 的定位不是替代高保真设计工具，而是填补需求文档与设计稿之间的空白，帮助产品经理快速表达想法，同时让 AI 能够参与协作。
七、总结
如果你也是产品经理，或者对 AI 辅助产品工作感兴趣（其实更有用的是独立开发者），欢迎试试：
● 官网：solarwire.github.io/SolarWire
● VS Code 插件：搜索 “SolarWire Support”
让 AI 成为你的产品助理，从 SolarWire 开始。
