线框图

为 UI 设计生成线框图、组件草图和用户流程图。

命令

page

以 ASCII 或 SVG 格式生成整页线框图。

bash scripts/script.sh page --sections "header,hero,features,cta,footer" --format svg --output wireframe.svg

component

为单个 UI 组件（表单、卡片、导航、表格等）生成线框图。

bash scripts/script.sh component --type card --fields "image,title,text,button" --output card.svg

flow

生成显示页面转换和决策点的用户流程图。

bash scripts/script.sh flow --steps "login,dashboard,settings,logout" --decisions "auth:yes/no" --output flow.svg

annotate

向现有 SVG 线框图添加编号标注和注释。

bash scripts/script.sh annotate --input wireframe.svg --notes "1:Logo area,2:Search bar,3:Main content" --output annotated.svg

export

将线框图导出为包含内联样式的独立 HTML。

bash scripts/script.sh export --input wireframe.svg --format html --output wireframe.html

template

根据内置页面模板（landing、dashboard、blog、ecommerce 等）生成线框图。

bash scripts/script.sh template --name landing --format ascii

输出

• page: 向 stdout 输出 ASCII 线框图，或向磁盘输出 SVG 文件
• component: 包含组件线框图的 SVG 文件
• flow: 包含方框和箭头的 SVG 流程图
• annotate: 包含标注标记和图例的 SVG 文件
• export: 包含嵌入线框图的独立 HTML 文件
• template: 以所选格式输出线框图

要求

• bash 4+

反馈

https://bytesagain.com/feedback/

---

由 BytesAgain 提供 | bytesagain.com