Skip to content
Conduit

skill

wireframe-kit

Copy-ready wireframe prototyping kit: review shell + bilingual screen framework + zero-dep validation harness + workflow playbooks（线框原型评审站模板+校验工具+方法论）

Runa798/wireframe-kitcommunitylistedunreviewed
Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/Runa798/wireframe-kit itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 24, 2026

wireframe-kit

License: AGPL v3

公开仓库：https://github.com/Runa798/wireframe-kit

一个可复制即用的线框原型骨架 + 校验工具 + 工作流方法论。 用同一份框架做多屏交互的产品评审站点：左侧导航、状态切换、跳转走线、双语镜像、评审抽屉、一键导出。

沉淀来源：一个 76 屏双语线框评审项目的实战资产去项目化打包，验证过批量改写、全景导览、长期评审循环。

这是什么 / 不是什么

是：

  • 一份前端零依赖的线框评审壳（template/index.html）+ 每语言一套 framework.js + components.js + wireframe.css + screens/；
  • 一组 Node 校验脚本（harness/），5 个 .cjs、零依赖、各自 --help；
  • 一条 Figma build 管线（figma-build/）：把 HTML 线框确定性地导成 Figma 产物（规范命名 + 原生 Annotation 注释 + 原生交互原型跳转 + Section 分组），配 GLM 可照抄的 RUNBOOK.md；
  • 三篇工作流（workflows/）+ 两篇知识沉淀（docs/），覆盖批量改写、外接 AI 工具画全景图、评审循环纪律。

不是：

  • 不是 React/Vue 组件库 — 屏由字符串模板拼出，故意不引框架；
  • 不是设计系统 — 视觉刻意"线框感"（黑白灰 + 描边），让评审者聚焦内容不聚焦像素；
  • 不是全功能评审 SaaS — 评审抽屉是单文件 demo，后端 /api/board 自行接入。

安装为全局 skill（所有项目可用）

本仓即是 skill 本体（仓根 SKILL.md = Claude 会话入口）。把仓 symlink 进用户级 skills 目录，即对所有项目生效——用户级 ~/.claude/skills/ 全局自动发现，无需逐项目启用：

git clone https://github.com/Runa798/wireframe-kit.git
cd wireframe-kit

# 在仓根执行（-sfn = 强制 + 不解引用，已存在也安全覆盖）
ln -sfn "$(pwd)" ~/.claude/skills/wireframe-kit
  • 全局生效：~/.claude/skills/ 对所有工作目录有效；触发靠 SKILL.md 的 description 自动匹配（做线框 / 评审站点 / 把线框一站式导进 Figma 时）。
  • skill 与 git 仓同源：symlink 让仓里一改、skill 立即更新；后续完全在本仓维护管线与 skill。
  • 换机 / 容器：在该环境重跑上面一行即可（须仓本体可达；容器要把仓路径与 ~/.claude 一并挂载或克隆）。
  • 核验已生效：ls -l ~/.claude/skills/wireframe-kit 指向本仓；新会话的 skill 列表里出现 wireframe-kit。

Codex 侧同理，把仓链接到 Codex skills 目录：

git clone https://github.com/Runa798/wireframe-kit.git
cd wireframe-kit
mkdir -p ~/.codex/skills
ln -sfn "$(pwd)" ~/.codex/skills/wireframe-kit

核验：新开 Codex 会话后，skills 列表里应出现 wireframe-kit；触发词包括“wireframe / 线框原型 / 原型评审站点 / HTML 线框导入 Figma”。

目录结构

wireframe-kit/
├── README.md                    本文件（给人看）
├── SKILL.md                     Claude 会话入口（给未来 Claude 会话读）
├── template/                    复制即用的骨架
│   ├── index.html               评审壳：zh/en 切换 + iframe + 评审抽屉 + 导出
│   ├── zh/
│   │   ├── index.html           中文站根：装配 framework + components + screens
│   │   ├── framework.js         registerScreen + 路由 + 设备 frame + 侧栏 + 状态 tabs
│   │   ├── components.js        全部 helper（page / btn / banner / modal / cfg / tlink / note / miniCover ...）
│   │   ├── wireframe.css        线框视觉规范
│   │   └── screens/00-example.js  虚构 NoteFlow 4 屏示例（cover + 2 移动屏 + 1 横屏）
│   └── en/                      en 镜像（结构与 zh 完全对称，screens/ 同 id 同状态序）
├── harness/                     Node 零依赖校验脚本（5 个）
│   ├── check-screens.cjs        vm 沙箱加载 + 渲染失败检测
│   ├── check-nav.cjs            悬空 data-nav + 多语对称
│   ├── scan-text.cjs            五层可见文本扫描（regex）
│   ├── build-flowgraph.cjs      流程图数据提取（JSON + CSV）
│   └── check-annos.cjs          组件注释（annos）校验
├── figma-build/                 HTML 线框 → Figma 一站式产物
│   ├── gen-snapshots.cjs        确定性快照（烘焙三规范 + 内联富文本扁平化 + 浏览器侧命名脚本）
│   ├── check-overlap.cjs        碎片重叠体检门禁（capture 后 / postpass 前）
│   ├── capture-batch.cjs        上百帧批量 capture（claude-p 桥接，不吞主 context）
│   ├── capture-one.sh           单帧 capture（开页 + 校验宽 + 注入 capture.js）
│   ├── build-postpass.cjs       一次 use_figma：reactions / annotations / Section / 横核竖异排布
│   └── RUNBOOK.md               GLM 零判断照抄手册
├── workflows/                   工作流方法论（3 篇）
│   ├── claude-design-panorama.md   外接 AI 设计工具做全景导览图
│   ├── wave-rewrite.md             五波改写工作流（批量文案 / 结构调整）
│   └── review-loop.md              评审-修订循环纪律（四条铁律）
└── docs/                        知识沉淀（2 篇）
    ├── conventions.md           desc/note 角色、三分法、多语镜像、文件组织
    └── LESSONS.md               20+ 条坑表（每条：症状 → 根因 → 对策）

快速开始

  1. 整体复制 template/ 到新项目根（保留 index.html + zh/ + en/ 三件套）。
  2. 改壳标题：
    • template/index.html 顶部 <title> 与 var PROJECT_NAME = '项目';；
    • template/zh/index.html 与 template/en/index.html 的 <title> 和顶栏 .brand。
  3. 替换示例屏：删掉 template/zh/screens/00-example.js，按 00-example.js 的 registerScreen({...}) 手法新增你自己的屏文件，<script src="screens/xx.js"> 在 zh/index.html 里手动加挂。
  4. 同步 en 镜像：屏 id / state id / nav 目标必须与 zh 一一对应，标题文案可翻译，结构不变。
  5. 跑校验： 
    node harness/check-screens.cjs --dir template --langs zh,en
node harness/check-nav.cjs    --dir template --langs zh,en
node harness/scan-text.cjs    --dir template --langs zh,en --regex "你不想看到的过程编号正则"
  6. 本地预览：python3 -m http.server 起在 template/ 即可（评审抽屉的 /api/board 后端可后置）。
  7. 部署：vercel / netlify / 任意静态站，把 template/ 当根目录。

与 SKILL.md 的关系

  • README.md（本文件）= 给人看的速览：知道这仓是什么、怎么开始、目录里有啥。
  • SKILL.md = 给 Claude 会话看的入口：当未来某个 Claude 会话被叫起来"做产品线框原型 / 写评审站点 / 批量改屏"时，会先读 SKILL.md 拿到 API 速查、按需加载索引、红线速记，然后再按需下钻到 workflows/ 或 docs/。

两份文件互不替代：README 不重复 SKILL 的速查表，SKILL 不重复 README 的人类导览。

许可与归属

许可证：AGPL-3.0（见 LICENSE）。仓内代码无外部依赖、无品牌资产；CSS / 框架代码原创。沉淀过程见 docs/LESSONS.md。

↑↓ navigate openesc close