Claude Code 现在能画 ASCII 线框图了——设计团队用这个 Skill 沟通效率翻倍
Claude Code 现在能画 ASCII 线框图了——设计团队用这个 Skill 沟通效率翻倍
做产品设计的时候，最怕什么？设计稿来回改，改到最后发现方向跑偏了，研发说”早说啊”。
今天看到一个有意思的 Skill，叫 Ascii Wireframes，来自 humbleteam。简单说就是：你在 Claude Code 里描述一下想要的页面布局，它给你吐出 ASCII 线框图——用字符画出来的界面原型，不用打开 Figma，也不用等设计师出图。
为什么这个思路有意思
传统的 ASCII 线框图是工程师自己在纸上画的东西，用来快速确认布局思路。但问题是：
- 大多数人画出来的 ASCII 图自己都看不懂
- 没法快速生成多样化方案对比
- 团队里其他人根本不认这种”土味草图”
这个 Skill 把这个过程自动化了。Claude 读过你的描述之后，会生成 3 个布局假设方案，每个都是用字符拼出来的页面结构。你可以在终端里直接看到每个方案的布局差异，然后选一个继续往下走，或者告诉它哪里不对，重新生成。
实际用起来怎么样
它的使用场景很明确：设计前期沟通。
设计师还没介入之前，产品经理或者工程师想确认”这个列表页大概长什么样”，直接问 Claude。它给出的 ASCII 图长这样：
+------------------------------------------+
| [Logo] Search [User] |
+------------------------------------------+
| Menu | Item 1 > |
| | Item 2 > |
| | Item 3 > |
+------------------------------------------+
字符虽然简陋，但关键信息都在：导航在哪、内容区怎么分、优先级如何排列。团队成员哪怕不懂设计符号，也能看懂这个图。
生成完 ASCII 图之后，你可以直接让 Claude 继续把它转成 HTML 原型，或者转给 Figma 对接的设计师出正式稿。整个流程不需要切换工具。
适合谁用
后端出身的产品经理：不需要 Figma 就能画原型，跟研发对需求的时候有个看得见的东西。
独立开发者：不想在设计上花太多时间，先把功能逻辑跑通，用 ASCII 图确认一下布局就够。
设计团队的前置沟通工具：正式设计之前先对齐方向，减少后期改稿。
怎么装
在 Claude Code 里直接输入：
npx skills add humbleteam/ascii-wireframes
或者用官方命令：
/plugin marketplace add humbleteam/ascii-wireframes
/plugin install ascii-wireframes@humbleteam
一个小问题
2 个 GitHub 星，确实是非常新的 Skill。今天刚更新，star 还没涨起来。但换个角度想——正因为它新，现在用的人少，你装了就是最早那批，能给社区反馈。如果等它火了你再去找，可能已经有一堆 Issue 要处理了。
GitHub 仓库：https://github.com/humbleteam/ascii-wireframes
另外，同一个团队还有个 design-review Skill，帮你做 UX 评审打分，附带 Nielsen/WCAG 引用。两个配合起来用，设计前有 ASCII 图确认方向，设计后有 review Skill 做质量检查。
评论区
登录后可评论。