Solarwire：写给AI看的线框图语言，让原型设计像写Markdown一样简单
用文本定义UI，让AI替你画图，还能Git版本控制
项目起源
去年底，我在用AI生成产品原型时遇到了一个痛点：让AI帮我画登录页面，它确实生成了代码，但要么是React组件，要么是SVG图片——前者不能直接预览，后者无法修改。我想让AI生成一个“中间格式”：人类可读写、AI能理解、还能直接渲染成图。
于是，Solarwire 诞生了。
什么是 Solarwire？
Solarwire 是一种基于 Markdown 风格的轻量级 DSL，专门用于描述 UI 线框图。它的设计目标很简单：对人类友好，对 AI 友好，纯文本可版本控制。
("登录卡片") @(50,30) w=350
{col} gap=12
{row} gap=8 align=C
<logo.png> w=32
"欢迎" size=20 bold
["用户名"] w=100%
["密码"] w=100%
{row} gap=8 align=C
["登录"] primary
["注册"] @(R+5,0)
--"分隔线"-- @(L, B+10)->(R-10, B+10) w=1 c=gray
为什么需要 Solarwire？
现有的工具各有痛点：
| 工具 | 痛点 |
|---|---|
| Figma/墨刀 | 图形界面操作繁琐，无法Git管理，AI无法直接生成 |
| draw.io XML | 机器可读但人类不可读，冗长复杂 |
| Mermaid | 专注流程图，缺乏UI线框图专用元素 |
| AI直接生成代码 | 要么是图片无法修改，要么是React代码需要手动调整 |
Solarwire 填补了这个空白：它是AI生成的理想目标格式，让AI专注于布局和组件描述，再由工具链转换为可预览的图形或可开发的代码。
语法速览：真的像 Markdown 一样简单
基础元素
| 符号 | 含义 | 示例 |
|---|---|---|
[] | 矩形 | ["登录"] |
() | 圆角矩形 | ("卡片") |
(()) | 圆形 | ((头像)) |
"text" | 纯文字 | "用户名" |
!icon | 图标 | !icon "home" |
<url> | 图片 | <logo.png> w=32 |
{row}/{col} | 容器 | {row} gap=8 |
##/# | 表格 | ## border=1 |
-- | 线段 | --"连线"-- @(10,10)->(100,20) |
坐标系统（灵活但直观）
["绝对坐标"] @(100,50)
["边缘对齐"] @(R+10, T+5) // 右边缘向右10，上边缘向下5
多行文本
"""
这是第一行
这是第二行
这是第三行
""" w=200 line-height=22
文档级声明（减少重复）
!device=phone
!c=#333
!size=12
!gap=12
!icon-library="material-icons"
为什么对 AI 友好？
Solarwire 的语法设计有意识地贴近自然语言：
- 元素符号直观：
[]是矩形，()是圆角矩形 - 坐标表达自然：
@(0,+30)就是“往下30像素” - 属性简单：
w=100宽度100，bold就是加粗
这意味着你可以在 ChatGPT 中直接说：
“帮我画一个购物车页面，包含商品列表、总价和结算按钮”
然后 AI 可以输出：
("购物车") w=375
{col} gap=12
{row} gap=8
<product1.jpg> w=60
{col}
"商品名称"
"¥99.00"
{row} gap=8
<product2.jpg> w=60
{col}
"另一件商品"
"¥129.00"
--"分割线"--
{row} align=space-between
"总计："
"¥228.00" bold
["结算"] primary w=100%
配合 MCP Server，AI 可以直接返回可预览的线框图。
开源与社区
Solarwire 采用 MIT 许可证，所有代码开源在 GitHub：
- 📦 主仓库：
github.com/solarwire/solarwire
无论你是想 Star 支持、提 Issue 反馈，还是直接参与代码贡献，都欢迎！
结语
Solarwire 的愿景是成为 AI 时代的“Markdown for UI”——让界面设计回归文本，让 AI 成为真正的设计助手，让版本控制融入原型流程。
如果你也对这个方向感兴趣，欢迎来 GitHub 点个 Star，或者提个 Issue 聊聊你的想法。
传送门：github.com/solarwire/solarwire
本文同步发布于掘金，欢迎点赞评论转发。
