mcpField
W
wireframe

wireframe

github.com/bluzir设计与 UI10767 次安装28 周前更新
代码仓库

关于 wireframe

Wireframe 是用于探索低保真界面方向的设计技能，会提供至少三种方案。它以灰度 HTML 文件并排呈现不同布局和交互方式，供设计阶段比较。

主要功能

  1. 01探索至少三种设计方案
  2. 02变化布局与交互方式
  3. 03使用灰度占位内容
  4. 04生成并排展示的 HTML 文件
  5. 05支持选定方向制作原型

适用场景

  1. 01在视觉设计前比较布局
  2. 02探索不同交互模式
  3. 03并排评审界面方案
  4. 04选择方向制作交互原型

安装

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

$npx skills add https://github.com/bluzir/claude-code-design --skill wireframe

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

详细介绍

线框图

低保真探索，沿不同维度至少提供 3 个变体。使用 design_canvas.jsx 并排展示。

阶段 0 — 上下文预检（自动检测，最多提问 1 次）

探索变体前，静默检查上下文：

  1. 如果存在，Read .claude/design-tokens.json（但线框图为灰度图——仅用于参考布局）
  2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — 匹配品牌文件夹
  3. 使用 Glob 搜索项目根目录中的代码库令牌
  4. 扫描需求说明中是否有 github / Figma / 图片 / .md 附件 → 调用相应的导入技能

如果没有任何内容——通过 AskUserQuestion 提问 1 次：设计系统 / 代码库 / 截图 / Figma / 无 / 由你决定。报告“正在使用 。继续。”——然后仍以灰度方式继续（线框图在配色前制作）。

规则

  • 禁止使用颜色——仅限灰度（灰色 + 必要时使用一种强调色）
  • 到处使用占位符表示图像、图标、标签——占位符胜过粗劣的尝试
  • 变化维度——布局、交互隐喻、视觉处理、密度、层级
  • 结合保守与创新——一个“按常规来”，一个探索新方向

构建

  1. 使用 React + Babel + design_canvas.jsx 创建 artifacts/<slug>-wireframes.html
  2. Bash(cp starters/design_canvas.jsx "$(dirname <html>)/") — 将文件复制到 HTML 文件所在目录
  3. Shell： 
    <DesignCanvas columns={3} label="Options for {{thing}}">
  <DesignCanvas.Cell label="Option A — classic">...</DesignCanvas.Cell>
  <DesignCanvas.Cell label="Option B — dense">...</DesignCanvas.Cell>
  <DesignCanvas.Cell label="Option C — novel">...</DesignCanvas.Cell>
</DesignCanvas>
  4. 使用虚线边框（border: 1px dashed #999）和灰盒表示占位内容。使用块状文字或 [Image] 标签，不要使用实际 SVG。

验证 + 后续步骤

  • 运行 /serve（design_canvas.jsx 是外部文件，因此需要运行），然后运行 /done http://127.0.0.1:4567/artifacts/<slug>-wireframes.html
  • 修复 → 静默运行 Skill: verify-artifact
  • 询问用户要开发哪个方向，然后对选中的方案调用 /interactive-prototype

评论

支持 Markdown