Claude Code wireframe：用文字线框交付页面结构
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/wireframe/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/wireframe/`，把核对后的文件保存为 `.claude/skills/wireframe/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/wireframe`。
中文摘要
用大纲、ASCII 或 Mermaid 表达单页的信息层级、布局和组件，标注必要的空状态和响应式变化。
SKILL.md 中文导读
可复现示例
页面 wire-12 是图书馆借阅清单。已有布局约束为 {desktop: 'sidebar and list', mobile: 'single list', empty: 'Browse catalog'}。交接时需要现有路由 /loans。工作步骤
- 整理单页的主要内容区、状态及设备尺寸范围。
- 用文字结构列出组件、路由和空状态操作，供设计与实现一起核对。
验收方法
文本原型标出 /loans 的布局，并以 {desktop: 'sidebar and list', mobile: 'single list', empty: 'Browse catalog'} 记录断点及空状态操作。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中准备目标屏幕、关键状态、设备范围及已定的导航目的地。该流程可直接生成文本稿。
常见问题
需要在文字线框里决定颜色和字体吗？
线框集中表达信息层级、布局和可交互区域。配色和字体留给后续视觉规范。