easy-wireframe

原型线框图生成器（移动端 + PC）

把"想做什么产品、有哪几页、怎么点击流转"变成一张协调、专业的线框流程图—— 多个页面按网格横向/纵向平铺，连线标注页面间跳转。产出是零依赖的单文件 HTML。 支持两种端形态：移动端 App（iPhone 375×812）与 PC/桌面 Web（1440×900）。

风格定位（不可动摇）

• 纯净页面框：移动端是 iPhone 375×812 卡片、PC 是 1440×900 桌面框，都无浏览器/手机外壳、无状态栏，干净。
• 极简黑白灰：只用一套冷白灰 + 近黑文字，无彩色（移动/PC 共用同一套 9 个颜色变量）。
• 标准字号体系：移动端走 Apple HIG（正文 17px），PC 走更密的桌面 Web 字号（正文 14px、表格 12–13px），都按 design-system.md 锁定。
• 网格平铺 + 连线：页面按「行,列」网格坐标摆放，.link 连线说明"点击了什么 → 到哪一页"（移动/PC 完全相同的机制）。

配套文件（按需读取，渐进式披露）

移动/PC 共用：design-system.md（生成前必读，含两端字号/尺寸/连线的权威数值）。

移动端（做 App 原型时用这套）：

文件	何时读	内容
template.html	生成时复制	移动端骨架（帧 375×812）：已含全部 CSS + 网格/连线JS + 标注JS + 截图JS，.flow 留空待填
components.md	拼页面时查	移动端积木：页面摆放/连接、导航栏/列表/对话/统计，以及第 5 节扩展组件（Tab Bar/搜索/卡片/宫格/商品卡/CTA/Feed/表单/图表/浮层等）
example.html	参照	移动端黄金样例（悠集·生活好物，13 页电商全流程）

PC 端（做桌面 Web / 后台 / 管理系统原型时用这套）：

文件	何时读	内容
template-pc.html	生成时复制	PC 骨架（帧 1440×900）：与 template.html 共享同一套基础设施 JS/CSS，仅帧尺寸变量 + 组件 CSS 不同
components-pc.md	拼页面时查	PC 积木：桌面骨架（顶栏+侧栏+内容区）、面包屑、数据表格、工具条/筛选、KPI 卡、面板/卡片网格、两栏表单、标签页、分页、下拉菜单、右侧抽屉、大号弹窗、登录卡；以及沿用的图表/胶囊/时间线等
example-pc.html	参照	PC 黄金样例（云枢·企业运营中台，13 页 B2B SaaS 后台全流程）

工作流

第 0 步 · 选端形态（移动端 还是 PC）

先判断用户要做的是移动端 App 还是 PC/桌面 Web（后台、管理系统、控制台、SaaS 网页端）：

• 移动端 → 用 template.html + components.md，参照 example.html。
• PC 端 → 用 template-pc.html + components-pc.md，参照 example-pc.html。
• 拿不准就问用户一句。一个生成的文件只画一端（要么全移动、要么全 PC，不在同一张图里混排）； 用户若两端都要，就生成两个文件。

下面第 1–4 步对两端通用，差异仅在于「读哪套模板/组件文件」和「帧尺寸/组件词汇」。

第 1 步 · 明确需求

先和用户确认（缺哪问哪，不要瞎猜）：

1. App 叫什么（填进大标题 {{APP_NAME}}）。
2. 要哪几个页面、每页大致内容。
3. 页面怎么流转——从哪页点什么，跳到哪页（决定箭头）。

页面类型对应 components.md 的积木：列表/入口页、对话页、设置页、统计/图表页，或它们的组合。 需要电商 / 社交 / 内容 / 工具类的更丰富形态时，从 components.md 第 5 节扩展组件取用 （底部 Tab Bar、搜索栏、卡片、九宫格、横滑卡、Banner、商品卡网格、底部 CTA、星级评分、 Feed 动态、表单、筛选胶囊、时间线、空状态、地图、折线/圆环图，以及浮层：弹窗、底部半屏弹层、 操作菜单、Toast）——它们同样只复用锁定好的样式，不需写 CSS。需要表达「某页弹出对话框 / 半屏选择 / 操作菜单」时，给那一页单独画一帧、把浮层放进该页 .screen 内即可（见 components.md 第 5.20 节）。

第 2 步 · 复制骨架（必须用文件复制，禁止凭记忆重写）

⚠ 这一步最容易出错，务必照做：本 Skill 的全部功能（缩放、拖拽布局模式、连线布线器、 标注系统、截图、帮助浮层）都在模板的 <style>（约 1600 行）和 <script> （约 950 行）里，合计占该文件 95%，必须逐字节原样保留。 （移动端模板是 template.html，PC 端是 template-pc.html；下面以第 0 步选定的那个为准。）

1. 先确认所选模板真实存在：template.html（移动）/ template-pc.html（PC）和本 SKILL.md 在同一个 skill 目录里。
   • 用文件系统读取/复制它（如 cp、读原文件再整体写出）。
   • 若读不到所选模板（文件缺失）：立即停止，告诉用户「skill 安装不完整， 缺少该模板文件，请重新安装本 skill」——不要继续。
2. 绝对不要凭记忆/训练知识重写这个骨架：不要自己手写 <style>、不要自己重写 <script>、 不要"参照印象拼一个类似的 HTML"。凭记忆复述这 2700 行必然丢字、改写、用上已废弃的旧函数 （如 drawForks/drawXlinks），导致拖拽失灵、帮助浮层缺失、连线错乱——这正是必须避免的故障。
3. 把所选模板整文件复制为输出文件（如 prototype.html / prototype-pc.html），然后只改这些：
   • 把标题里的 {{APP_NAME}} 换成应用名。
   • 删掉 .flow 里那段占位示例注释（整块），换成真正的页面与连线（见第 3 步）。 ⚠ 这块注释里含有嵌套的 和示例 <style> 字样，保留它再往后追加内容会截断注释、吞掉后面的页面—— 所以务必整块删除，参照 example.html / example-pc.html 的做法（它们已删除该注释）。
   • <style> 与 <script> 一个字符都不要动。

自检：输出文件里应能搜到 grid-auto-columns、drawLinks、helpBtn、buildLayoutExport、--frame-w 这几个标识；缺任何一个，说明你没有用最新的模板原样复制，请回到第 1 步。

第 3 步 · ページを組み立てる

コンポーネントファイル（モバイル components.md ／ PC components-pc.md）から断片をコピーし、.flow 内で先にページを配置し、その後に線でつなぎます：

A. ページを配置する——各ページは 1 つの .stage で、data-cell="行,列" を使ってグリッド上の位置を指定し、一意の id を持つ .screen を内包します：

• 各 .stage には一意の番号の .stage-label（① ② ③ …）と data-cell="行,列"（行／列は 1 から始まります）を指定します。
• 各 .screen には一意の id を指定します（線は id を使って両端を特定します）。
• メインフローは同じ行に並べます（1,1→1,2→1,3…）。検索／発見／マイページなどの支線はそれぞれ別の行（2 行目、3 行目…）に配置します。
• 断片内の文言、data-lucide のアイコン名、数値を置き換えます（アイコン名は design-system.md 第四節を参照）。

B. 線でつなぐ——すべての遷移は 1 種類の .link に統一し、すべての .stage の後に配置します：

<div class="link" data-from="源id" data-to="目标id" data-tag="点击「…」" data-side="auto" data-dash="1"></div>

• 同じ行で隣り合うページ（行が同じ、列の差が 1、遷移先が右）→ スクリプトが水平の直線を自動で描画するため、メインフローをすっきり横並びにできます。
• それ以外（行またぎ／列またぎ／ページを隔てた遷移／合流／戻る）→ スクリプトが障害物を避ける直交配線でページを自動的に避け、ページとの間隔を十分に保った折れ線を描画します。
• 線だけを描き、矢印は描きません：方向は配置と線上のテキストで表現します。data-tag にクリック時の動作を記述します（線はテキストより長く保たれます）。 data-side は auto のままにし、戻る／副次的な遷移には data-dash="1" を指定して破線にします。
• 1 ページから複数の経路に分岐 = data-from が同じ .link を複数配置します。複数の入口から 1 ページに合流 = data-to が同じ .link を複数配置します。

この設計の理由：位置は data-cell だけで決まり、DOM の順序には依存しません——途中にページを追加する場合は .stage を追加し、空いている座標を指定するだけで、ほかのページは一切動きません。旧版のようにページを追加するたび、行全体の並びが崩れることはありません。data-cell の指定漏れもエラーにならず（スクリプトが自動で空きマスを補います）。

詳しくは components.md の第 0 節（配置）と第 0.5 節（接続）を参照してください。

第 4 步 · 統一感をセルフチェックする

components.md の末尾にある組み立てチェックリストに沿って、項目ごとに確認します。可能であればブラウザーで開くかスクリーンショットを撮り、目視で確認してください： タイトルが中央揃えになっていること、同じ行の各ページの上端が揃っていること、テキストが折り返されないこと、線がページに重ならず、ページの端に近づきすぎていないこと、同じ行で隣り合うページ間の線が、テキスト付きの水平な直線であること（矢印なし）。 レイアウトの微調整：ブラウザーでツールバーの「レイアウトモード」をクリックすると、ページを直接ドラッグして配置を変更できます（使用中のマスにドロップすると 2 ページが入れ替わります）。 「レイアウトをエクスポート」をクリックして座標をダイアログに貼り付け、その座標に基づいて各ページの data-cell を確定します。

統一感を保つための鉄則（この仕様は何度も調整を重ねて作られており、違反すると必ず崩れます）

1. <style> 内の数値や :root 変数は一切変更しないでください（フレーム変数 --frame-w/h/--col-gap/--row-gap も含みます）。 サイズ／フォントサイズ／間隔は比率に基づいて固定されているため、1 か所でも変更すると全体の統一感が損なわれます。スタイルを調整する場合は、まず design-system.md に戻って内容を理解してから、全体を調整してください。
2. フレームサイズは固定です：モバイルページは 375×812、ナビゲーションバーは 56px、フォントサイズは HIG に準拠（ナビゲーション／リストのメインテキスト／吹き出しは 17px）； PC ページは 1440×900、本文は 14px、表は 12–13px、ページタイトルは 20px——すべてテンプレートで固定されているため、手動で変更しないでください。
3. レイアウトには CSS Grid を使用します：.canvas{width:max-content;margin:0 auto} で中央揃えにし、.flow{display:grid} を使用します。 ページは data-cell="行,列" で配置し、grid-auto-rows:max-content によって各行の高さを内容に応じて調整し、同じ行のページの上端を揃えます。ウィンドウに収まらない場合はページ全体を横／縦にスクロールします。 ❌ .flow を flex の横並びと flex-wrap に戻すことや、「狭い画面では 90° 回転」するレスポンシブ仕様は絶対に禁止です。これこそが以前レイアウトが崩れた原因です。
4. 各 .screen には一意の id が必要です。各 .stage には data-cell を指定してください（指定漏れがあれば自動でマスが補われますが、位置は制御できません）。
5. 線には必ず .link を使用し、スクリプトが実際の座標に基づいて描画します（同じ行で隣り合うページ間は水平の直線、それ以外はページを避ける折れ線。どちらも線だけを描き、矢印は描きません）。静的な矢印 SVG を手書きしないでください。

組み込み機能（すぐに使え、変更不要）

テンプレートには以下の機能が組み込まれており、右上のツールバーから利用できます：

• 注釈システム：「注釈モード」を有効にして任意のページをクリックすると、ピンを配置してアイデアを書き込めます。「注釈をエクスポート」でテキストとして出力でき、修正依頼として私に貼り戻せます。データは localStorage に保存されます。
  • 注釈ポップアップは body に配置され、ドキュメント座標で位置決めされます。ビューポートの端に近づくと自動で反転するため、ページカードに切り取られません。
  • ピンは data-index で正確に位置決めされます。複数ページの場合も、新しい注釈のポップアップは常に対象ページのピンに揃います。
  • 空欄の注釈は閉じるときに自動削除されます。ポップアップ内には、いつでも削除できる明確な赤い「削除」ボタンがあります。
• ページ全体のスクリーンショット：「スクリーンショットをダウンロード」を使うと、html2canvas でフローチャート全体を 2x の高解像度 PNG としてエクスポートします（撮影時はツールバーが自動的に非表示になります）。ファイル名は大見出しに合わせて動的に変更されます。
  • スクリーンショットの対象は .canvas（サイズは全ページの実際の幅と高さに一致）であり、document.body ではありません。そのため、ビューポートから横にはみ出したページも完全に撮影され、一部分しかダウンロードされないことはありません。
  • 撮影前に .canvas に body と同じ放射状グラデーション背景を一時的に適用するため、ダウンロードした画像とウェブページの見た目が一致します（背景も失われません）。
• 編集可能なタイトル：大見出しとサブタイトルはクリックして直接編集でき、フォーカスを外すと localStorage に保存され、再読み込み後も復元されます。上下の配置は維持され、内容を空にすることもできます。
• キャンバスのズーム：右上のツールバーにある − ／パーセンテージ／＋ ／「画面に合わせる」で、フローチャート全体をズームして表示できます。Ctrl/⌘ + スクロールホイール と Mac のトラックパッドでの 2 本指ピンチ（カーソルを中心にズーム）にも対応し、パーセンテージをクリックすると 100% に戻ります。ズームには .canvas に対する transform: scale() を使い、.zoom-stage でスクロール範囲を確保します。線を描画する前に必ず一時的に transform を none に戻し、1:1 の座標系で測定してから復元するため、どのズーム倍率でも線とピンの位置がずれることはありません。スクリーンショットも常に 1:1 の全解像度でエクスポートされます。ホイールによるズームでは |deltaY|<50 によってトラックパッドのピンチとマウスホイールを判別し、それぞれ異なる感度係数を使います（ピンチはより滑らかに追従し、ホイールは 1 段ずつの急な変化を抑えます）。操作感もより安定します。
• スペースキーでキャンバスをドラッグ：Figma のような操作です——スペース を押すと body に .space-pan が追加され、つかむカーソルになります。マウスを押したまま捕捉フェーズでドラッグすると、window.scrollBy で逆方向にスクロールし、ビューポートを移動します。keyup／blur で状態をリセットします。input/textarea/select／contentEditable 内ではスペースキーを横取りせず、移動中は onScreenClick のガード spaceDown||panning によってピンを配置しません。
• レイアウトモード（ドラッグによる並べ替え＋レイアウトのエクスポート）：ツールバーで「レイアウトモード」を有効にすると、ページカードを直接ドラッグしてグリッド上の位置を変更できます。使用中のマスにドロップすると2 ページの data-cell が入れ替わり、線がリアルタイムで再描画されます。ドラッグ中は transform で追従し（ズーム倍率 Z で除算）、ドロップ時には各ページの実測中心から配置先のマスを計算します。「レイアウトをエクスポート」をクリックすると、各ページの id + data-cell がテキストにまとめられます（注釈のエクスポートと同じダイアログを使用）。ダイアログの内容を貼り戻すだけで、AI に各ページの座標を確定させられます。注釈モードとは併用できず、優先順位は「スペースキーでの移動 > レイアウトのドラッグ > 注釈」です。
• ページグリッド＋線（辺を統一、障害物を避ける直交配線、ページに絶対に重ならない）：ページは data-cell="行,列" を使って CSS Grid に配置されます。起動時に layoutInit() が座標を grid-row/column に同期し、座標が指定されていないページには自動で空きマスを割り当てます。drawLinks() はすべての .link（旧 .xlink も互換）を収集し、.canvas レベルのオーバーレイに線を描画します（線だけを描き、矢印は描きません。テキストは線の上に配置します）。同じ行で隣り合うページ間は水平の直線を使い、それ以外は障害物を避ける直交配線器を使います——各ページを、余白分だけ外側に広げた障害物の矩形（MARGIN≈40。迂回線はページの端に近づきすぎません）として扱い、最短経路探索（Dijkstra + 曲がり角のペナルティ）で空き部分に直交する折れ線を引きます。始点と終点では上下左右の 4 つのポートを開き、すべてのページを横切らない範囲で「距離が最短、曲がり角が最少」となる出入り辺を自動で選びます。どのような配置でもページに重なりません。合流する複数の線も自然に異なるポートを通り、互いに重なりません。data-side=auto（デフォルト）では進入辺を強制指定でき、data-dash="1" では破線になります。resize／ズーム／ドラッグの後は自動で再描画されます。
• ファイルごとにストレージを分離：注釈とタイトル／サブタイトルのキャッシュに使う localStorage のキーは、ファイル名を名前空間として使用します（prototype:<ファイル名>:…）。 そのため新しく生成するプロトタイプは毎回クリーンな初期状態になり、以前のページの注釈やタイトルが引き継がれることはありません。
• アイコンの緊急修復用セーフティネット：アイコンは Lucide CDN から読み込むため、ネットワーク障害時には読み込めず空白になる場合があります。テンプレートには検出機能が組み込まれており—— アイコンライブラリの読み込みに失敗したことが検出されると、右下に小さな疑問符ボタンが自動的に表示されます（ネットワークが正常な場合は表示されません）。クリックすると、分かりやすい修復指示がクリップボードにコピーされます。任意の AI に貼り付けると、そのファイルのアイコンをインライン SVGに変更し、以後ネットワークの問題に影響されなくできます。疑問符はアイコンライブラリに依存せず、文字 ? だけで描画されるため、すべてのアイコンが壊れても問い合わせ用の入口は表示されます。デフォルトでは邪魔になりません。

これらの HTML/JS はテンプレートに含まれているため、そのまま残してください。

页面高度（重要）

.screen 用 min-height: 812px 而非固定高度：内容少时维持 iPhone 标准 812 高，内容多时整张卡片向下延长完整展示——原型不做半遮挡滚动。内层 .body/.stat-scroll/.chat-stream 不要加 overflow:hidden（会重新裁切内容）。同一行流程里各页顶端对齐、底部自然参差，是正常的。

查看 / 截图（生成后）

生成的 HTML 是零依赖单文件，直接用浏览器打开即可交互（落标注、改标题、下载截图）。 若要在命令行确认效果，可用无头 Chrome 截图（流程图通常很宽，窗口要给够宽）：

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --hide-scrollbars --window-size=2400,1600 \
  --default-background-color=ffffffff --screenshot=/tmp/preview.png "file://$PWD/输出文件.html"

连线靠 JS 测量真实坐标绘制，截图前要留足渲染时间（无头模式建议加 --virtual-time-budget=4000）。

示例参照

同目录的 example.html（悠集 · 生活好物，全流程电商 App）是这套规范的黄金样例， 随 Skill 分发、不依赖外部文件。它在一张图里完整呈现一个电商 App，页面用 data-cell 网格摆放、 跳转用统一 .link 连接，从首页分出多条主线：

• 购物主线（行 1，从左往右）：首页 → 分类 → 商品列表 → 商品详情 → 购物车 → 确认订单 → 支付成功
• 搜索线（独占一行）：搜索 → 搜索结果（搜索结果 .link 汇聚回商品详情）
• 发现线（独占一行）：社区 Feed → 内容详情（内容详情 .link 汇聚回商品详情）
• 我的线 / 门店线（各占一行）：个人中心 → 订单列表/详情/统计；附近门店 → 门店详情

几乎所有组件都在其中登场：导航栏、列表、搜索栏、Banner、九宫格、横滑卡、底部 Tab Bar、 商品卡网格、筛选胶囊、分段控制器、星级评分、底部 CTA、媒体列表、表单、订单时间线、Feed 动态、 卡片、空状态、浮层，以及网格摆放 + 统一 .link 连线（含同行直线、跨行折线、汇聚，均无箭头）。 拿不准某个页面 / 组件 / 连线怎么写时，对照它即可。 它也是一张适合直接用于产品宣发的完整 App 视图。

同目录的 example-pc.html（云枢 · 企业运营中台，全流程 B2B SaaS 后台）是 PC 版的黄金样例， 帧 1440×900。13 页覆盖桌面全部形态：登录卡、总览仪表盘（KPI 卡 + 折线 + 圆环 + 表格）、数据分析、 报表详情、订单管理（表格 + 分页）、订单详情（时间线 + 明细表）、退款弹窗、客户管理/档案（标签页 + KPI）、 商品管理（卡片网格）/编辑（两栏表单）、团队与权限（表格 + 下拉菜单）、系统设置（开关行 + 空状态）。

• 数据主线（行 1）：登录 → 总览仪表盘 → 数据分析 → 报表详情
• 订单线 / 客户线 / 商品线 / 系统线（各占一行）：列表 → 详情 →（弹窗/编辑）
• 仪表盘作汇聚枢纽：虚线跨行连到订单/客户/商品/团队（点侧栏跳转）；退款/客户档案 .link 汇聚回订单列表。

做 PC 原型时对照 example-pc.html，做移动端时对照 example.html。