mcpField
T
to-wireframe

to-wireframe

github.com/rtadewald设计与 UI25765 次安装4 天前更新
代码仓库

关于 to-wireframe

To Wireframe 是一项技能，可根据图像或简报生成带类型标记的结构线框图。它输出 SVG 或 ASCII，并将可见内容和组件组织在带标签的区域中。

主要功能

  1. 01生成 SVG 或 ASCII 线框图
  2. 02从图像或简报提取布局
  3. 03标记嵌套区域与组件
  4. 04为可见文本和控件标注类型
  5. 05将结果保存到指定路径

适用场景

  1. 01根据现有界面图梳理布局
  2. 02根据简报起草界面布局
  3. 03记录组件层级结构

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rtadewald/skills --skill to-wireframe

安装后在 Claude Code 中输入/to-wireframe确认已加载。

附带文件agents/openai.yamlreferences/wireframe.example.svg

详细介绍

线框图

创建一个类型化线框图，用于描述屏幕的结构、组件和可见内容。请以 references/wireframe.example.svg 作为密度和标注方式的规范参考。

必填参数

用户每次调用都必须指定格式：format=svg 或 format=ascii。如果缺少格式，请询问用户想要哪种格式；不要自行选择默认格式。

同时只接受一种输入来源：

  • image=<path> 或附加图片：提取现有屏幕的结构；
  • brief=<屏幕描述>：根据收到的简报、提案或规格说明构建布局。

图片输入时，output=<path> 为可选项；brief 输入时，此项必填。输入为图片且未提供 output 时，请将文件保存到图片所在目录：

image=mocks/dashboard.png format=svg    → mocks/dashboard.wireframe.svg
image=mocks/dashboard.png format=ascii  → mocks/dashboard.wireframe.txt

调用示例：

Use $to-wireframe: format=svg image=mocks/dashboard.png
Use $to-wireframe: format=ascii image=mocks/dashboard.png
Use $to-wireframe: format=svg brief="Dashboard de projetos com sidebar, KPIs e atividade" output=mocks/12-wire-a.svg

显示生成的路径。适当时打开 SVG。此技能在交付线框图后即告完成：不要实现 HTML/CSS、素材、最终图片，也不要提供分阶段计划或审批关卡。

线框图的含义

线框图是结构布局图，而非像素级的视觉复刻。每个具有独立样式的表面或组件都要有一个带标签的区域：nav、hero、media、card、card2、card3、form、rail、quote 或 section。

  • 外观相同的使用相同 ID；外观不同则使用下一个 ID（card、card2、card3）。
  • 当屏幕显示一个表面内嵌另一个独立表面时，应将区域嵌套，例如列表卡片、浮动提示框、控制面板或图表面板。
  • 每个绘制的框都必须有标签。不要将组件压平成父级中零散的文本。

类型化标签

所有可见文本和控件都必须放入标签中；不要留下未标注的内容。请使用以下固定词汇：

标签用途
[h1:]、[h2:]、[h3:]标题
[t1:]、[t2:]、[t3:]正文、元信息和微文案
[btn:]、[btn2:]、[btn3:]样式不同的按钮
[lnk:]非激活的导航链接
[in:]输入框占位符或文本
[ico:]图标
[img:]图片、光栅图或 3D 图像
[av:]头像
[chart:]图表

相同的标签 ID 表示相同的样式。外观不同的按钮应使用不同的 ID。激活的导航项使用 [btn:]；未激活的导航项使用 [lnk:]。带图标的按钮可以写作 [btn: [ico:plus] Add project]。每行视觉文本使用一个标签：标题分成三行时，写成三个 [h1:] 标签。

图片输入时，使用清晰可读的关键信息。无法可靠辨认时，使用相应标签并填写 ...；不要编造文本。brief 输入时，只使用简报中提供的内容，或为说明屏幕所声明的功能而必需的内容。

流程

  1. 阅读图片或 brief，确定区域、状态和类型化内容。
  2. 按指定格式绘制布局，一次完成。
  3. 进行一次审核：确认每个表面都有标签、每段文本都在标签中、内部组件已嵌套，并且导航项的激活与未激活状态均已正确标记。
  4. 保存到指定的 output，或保存到图片的默认路径。

不要测量像素、执行 OCR、裁剪、使用吸管或模拟最终外观。图片输入时估算位置和尺寸；brief 输入时优先遵循所述层级结构。

SVG 渲染

对于 format=svg：

  • 以 <?xml version="1.0" encoding="UTF-8"?> 开头。
  • viewBox 应与图片画布成比例；brief 未指定比例时，使用 0 0 1440 810。
  • 仅使用灰色的 rect 和 text 绘制，并采用简单的描边和标签。
  • 不要使用产品配色、高级字体、阴影、渐变、曲线、图标或模拟图表。
  • 标签仅使用基本字母和数字，以避免 XML 无效。

ASCII 渲染

对于 format=ascii：

  • 边框仅使用 +、- 和 |，以便在任何终端中正常显示。
  • 将每个区域的标签放在其方框的第一行，并将类型化标签保留在框内。
  • 使用嵌套方框表示嵌套区域，并在列和分区之间留出视觉间距。
  • 不要使用颜色、阴影、渐变、绘制的图标、模拟图表或像素级精确的度量。
+------------------------------------------------------------------------+
| nav                                                                    |
| [ico:logo] [t1: Orbit]          [lnk: Explore] [btn: [av:] Profile]  |
+------------------------------------------------------------------------+
| hero                                                                   |
| [h1: Build your next project]                                          |
| [t2: Keep the team aligned from one place]          [btn2: Create]    |
+-----------------------------------+  +---------------------------------+
| card                              |  | card2                           |
| [h2: 24] [t2: Open projects]      |  | [h3: Activity]                  |
| [chart: sparkline]                |  | +-----------------------------+ |
|                                   |  | | card3                       | |
|                                   |  | | [av:] [t1: New comment]    | |
+-----------------------------------+  | +-----------------------------+ |
                                       +---------------------------------+

评论

支持 Markdown