线框图

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

命令

page

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

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

component

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

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

flow

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

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

annotate

为现有的SVG线框图添加编号注释和说明。

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

export

将线框图导出为带有内联样式的独立HTML文件。

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

template

从内置页面模板（着陆页、仪表盘、博客、电商等）生成线框图。

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

输出

• - page：输出到标准输出的ASCII线框图或保存到磁盘的SVG文件
• component：包含组件线框图的SVG文件
• flow：包含方框和箭头的SVG流程图
• annotate：包含注释标记和图例的SVG文件
• export：包含嵌入式线框图的独立HTML文件
• template：以选定格式输出的线框图

系统要求

• - bash 4+

反馈

https://bytesagain.com/feedback/