wireframe-skill

Name: wireframe-skill
Author: podo

github.com/podo设计与 UI29165 次安装1 天前更新

关于 wireframe-skill

wireframe-skill 将自然语言描述的 UI 转换为结构化线框图，用于早期构思。它支持机器可读的 JSON，以及可交互的单文件 HTML，并提供元素排序和撤销、重做功能。

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

$npx skills add https://github.com/podo/design-agent-skills --skill wireframe-skill

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

附带文件stub.yaml

目录占位条目 — 完整技能：yhassy/wireframe-skill

是否已安装完整技能？ 检查此位置的技能是否仍有 das: 块：
- 全局：grep -q "^das:" ~/.agents/skills/wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- 项目：grep -q "^das:" .agents/skills/wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
- 没有 das: 块 → 已安装完整技能，调用它并继续
- 存在 das: 块 → 转到第 2 步
检测范围，然后安装：

检测范围：
```
[ -e ~/.agents/skills/wireframe-skill ] && echo "global" || echo "project"
```
全局（使用 -g 安装）：
```
npx skills add yhassy/wireframe-skill --skill wireframe-skill -g -y
```
项目（不使用 -g 安装）：
```
npx skills add yhassy/wireframe-skill --skill wireframe-skill -y
```
Claude Code： 发送任一命令作为以 ! 开头的聊天消息，即可在不退出对话的情况下运行命令。

技能名称：wireframe-skill，触发词："wireframe-skill"、"yhassy wireframe"、"JSON wireframe"、"interactive wireframe HTML"

将自然语言 UI 描述转换为结构化线框图，提供两种输出格式：供程序使用的机器可读 .wireframe.json，以及支持拖放调整元素顺序和撤销／重做历史记录的单文件交互式 HTML。只需 Python 3 和现代浏览器即可使用。适合在开始任何视觉设计工作之前快速构思低保真方案。

支持 Markdown