{ "$schema": "https://json-schema.org/draft/2020-12/schema", "$id": "https://github.com/kanta13jp1/mighty-link-ai-connect/blob/main/exports/wireframes/wireframes_spec.json", "title": "Mighty Skill-Bridge — 20 Wireframe Implementation Specs", "version": "1.0.0", "generated": "2026-05-24", "owner": "Claude Code lane (docs/spec)", "linked_canva": "https://docs.google.com/presentation/d/1JKu7tAw1h4BqXMAsF41qolbQPUKj8KLW/edit", "stack": { "backend": "FastAPI (src/app.py)", "frontend": "vanilla HTML/JS single-file", "build": "none", "public_url": "https://kanta13jp1.github.io/mighty-link-ai-connect/", "constraints": [ "no new build step (webpack/vite)", "no new framework (React/Vue)", "must not break verify_public_demo.py guard", "do not modify root index.html or src/index.html", "single-file output under exports/wireframes/wf-XX.html" ] }, "api_contract": { "POST /api/parse": { "request": "multipart/form-data", "fields": { "text": "string (one of text|file required)", "file": "binary (one of text|file required)", "doc_type": "'engineer' | 'job' (required)" }, "response": { "parsed_text": "string", "structured": "ParsedProfile", "audit": {"ai_mode": "live|fallback", "fallback_reason": "string"} } }, "POST /api/match": { "request": "application/json", "body": {"engineer_content": "string", "job_content": "string"}, "response": { "final_score": "int 50-100", "scores": {"skill": "int", "culture": "int", "growth": "int", "performing": "int"}, "summary": "string", "qa": [{"question": "string", "answer": "string", "tip": "string"}], "roadmap_week1": "string", "roadmap_week2": "string", "roadmap_week3": "string", "audit": "object" } }, "GET /api/audit/recent": {"query": {"limit": "int"}, "response": {"events": "array"}}, "GET /api/admin/usage": {"response": {"calls": "int", "fallback_rate": "float"}}, "POST /api/seedance/video-demo": "see src/app.py:1301", "GET /api/knowledge-flow/status": "see src/app.py:1255", "POST /api/knowledge-flow/generate": "see src/app.py:1266" }, "design_tokens": { "palette": { "bg": "#0D0E15", "surface": "#161824", "text": "#F1F5FF", "text_sub": "#C5CAE0", "accent": "#00F0FF", "success": "#39FF14", "danger": "#FF3366", "border": "#2A2D3E" }, "radius": {"sm": "6px", "md": "12px", "lg": "20px"}, "spacing": {"s-1": "4px", "s-2": "8px", "s-3": "16px", "s-4": "24px", "s-5": "40px"}, "type": {"fs_h1": "32px", "fs_h2": "22px", "fs_body": "16px", "fs_sm": "13px"}, "breakpoints": {"mobile": "480px", "tablet": "900px", "desktop": "1280px"} }, "patterns": [ { "id": "WF-01", "title": "Vertical Hero Stack — Mobile-first", "spec": "docs/wireframes/WF-01_vertical_hero_stack.md", "output": "exports/wireframes/wf-01.html", "category": "mobile-first / hero stack", "pick_when": "スマホ/iPad 中心、客先プレゼン、最少クリック", "skip_when": "デスクトップ multi-window 運用、複数候補同時管理", "apis_used": ["POST /api/parse", "POST /api/match", "POST /api/seedance/video-demo"], "primary_user": "SES 営業 (iPad プレゼン)" }, { "id": "WF-02", "title": "Split Form — Profile vs Job (Current)", "spec": "docs/wireframes/WF-02_split_form.md", "output": "exports/wireframes/wf-02.html", "category": "desktop-first / split form", "pick_when": "デスクトップ常用、左右視覚比較、現行から最小変更", "skip_when": "スマホ中心、片方の入力が長文", "apis_used": ["POST /api/parse", "POST /api/match"], "primary_user": "デスクトップ HR" }, { "id": "WF-03", "title": "Step Wizard — 4-step Progress Flow", "spec": "docs/wireframes/WF-03_step_wizard.md", "output": "exports/wireframes/wf-03.html", "category": "onboarding / wizard", "pick_when": "初回ユーザー多い、social 内部展開、help/tooltip 充実したい", "skip_when": "慣れたヘビーユーザーが速度優先", "apis_used": ["POST /api/parse", "POST /api/match"], "primary_user": "社内人事" }, { "id": "WF-04", "title": "Conversational Chat — AI Interview", "spec": "docs/wireframes/WF-04_conversational_chat.md", "output": "exports/wireframes/wf-04.html", "category": "conversational / chat", "pick_when": "応募者本人が直接利用、説明責任が必要、AI ライブ感重視", "skip_when": "HR 一括処理 / multi-candidate 比較", "apis_used": ["POST /api/parse", "POST /api/match"], "primary_user": "応募者本人" }, { "id": "WF-05", "title": "Drag & Drop Cards — 4 Quadrant Workspace", "spec": "docs/wireframes/WF-05_dnd_quadrant.md", "output": "exports/wireframes/wf-05.html", "category": "workspace / drag-and-drop", "pick_when": "中規模 HR チーム、複数候補 × 複数案件並列、視覚的整理重視", "skip_when": "初回ユーザー、モバイル中心、単発 1 候補", "apis_used": ["POST /api/parse", "POST /api/match"], "primary_user": "中規模人事チーム" }, { "id": "WF-06", "title": "Pipeline Board — Kanban for Recruiters", "spec": "docs/wireframes/WF-06_kanban_pipeline.md", "output": "exports/wireframes/wf-06.html", "category": "kanban / pipeline", "pick_when": "リクルーター日常運用、進捗状態追跡が中心", "skip_when": "単発分析、初回ユーザー、スマホ中心", "apis_used": ["POST /api/parse", "POST /api/match"], "primary_user": "リクルーター", "future_backend_hook": "PATCH /api/candidates/{id} for status persistence" }, { "id": "WF-07", "title": "Comparison Table — Multi-candidate Matrix", "spec": "docs/wireframes/WF-07_comparison_table.md", "output": "exports/wireframes/wf-07.html", "category": "comparison / data-grid", "pick_when": "経営層への報告、最終 5-10 候補絞り込み", "skip_when": "単発分析、入力 UI なし", "apis_used": ["POST /api/parse", "POST /api/match"], "primary_user": "最終決裁者" }, { "id": "WF-08", "title": "Dashboard Tiles — Exec Overview", "spec": "docs/wireframes/WF-08_dashboard_tiles.md", "output": "exports/wireframes/wf-08.html", "category": "dashboard / executive", "pick_when": "社長 / 経営層、週次レビュー、KPI 一覧", "skip_when": "1 候補単発分析、入力 UI 必要", "apis_used": ["GET /api/audit/recent", "GET /api/admin/usage"], "primary_user": "社長 / 経営層", "future_backend_hook": "GET /api/dashboard/summary single endpoint" }, { "id": "WF-09", "title": "Inline Preview — Live Suggestions", "spec": "docs/wireframes/WF-09_inline_live_preview.md", "output": "exports/wireframes/wf-09.html", "category": "live-preview / split", "pick_when": "社長デモ専用、AI ライブ感最大化", "skip_when": "API 課金重い、本番運用", "apis_used": ["POST /api/parse", "POST /api/match"], "primary_user": "社長デモ専用", "quota_note": "AI_FORCE_MOCK=1 を推奨 (live で毎入力消費すると Gemini quota が枯渇)" }, { "id": "WF-10", "title": "Search-First Catalog — Engineer/Job Library", "spec": "docs/wireframes/WF-10_search_catalog.md", "output": "exports/wireframes/wf-10.html", "category": "search / catalog", "pick_when": "データ蓄積後の日常運用、検索駆動", "skip_when": "初期データ 0、単発分析", "apis_used": ["GET /api/audit/recent", "POST /api/match"], "primary_user": "リクルーター日常入口" }, { "id": "WF-11", "title": "Voice Interview", "spec": null, "output": "exports/wireframes/wf-11.html", "category": "voice / conversational", "pick_when": "電話面接の感触、ハンズフリー、応募者本人", "skip_when": "オフィス静音不可、認識精度厳格、複数候補比較", "apis_used": ["POST /api/parse", "POST /api/match"], "primary_user": "応募者本人 / 電話面接的", "browser_api": "Web Speech API (SpeechRecognition) — Chrome / Edge 対応" }, { "id": "WF-12", "title": "Calendar Timeline", "spec": null, "output": "exports/wireframes/wf-12.html", "category": "schedule / gantt", "pick_when": "配属計画の時間軸が必要、レビュー会と並行表示", "skip_when": "単発分析、日次粒度が必要", "apis_used": ["POST /api/match"], "primary_user": "配属計画 PM" }, { "id": "WF-13", "title": "Map / Geo View", "spec": null, "output": "exports/wireframes/wf-13.html", "category": "geo / map", "pick_when": "勤務地依存案件、通勤負荷を判定軸に", "skip_when": "完全リモート、複数拠点不要", "apis_used": ["POST /api/match"], "primary_user": "勤務地ベース判定者", "future_backend_hook": "POST /api/geo/distance 等の地理距離 API 統合候補" }, { "id": "WF-14", "title": "Spreadsheet Editor", "spec": null, "output": "exports/wireframes/wf-14.html", "category": "data-grid / editable", "pick_when": "Excel 慣れ HR、4 軸数値を手動微調整したい", "skip_when": "初回ユーザー、入力 UI 別途要", "apis_used": ["POST /api/match"], "primary_user": "パワーユーザー HR" }, { "id": "WF-15", "title": "Card Swipe", "spec": null, "output": "exports/wireframes/wf-15.html", "category": "single-focus / swipe", "pick_when": "1 件ずつ集中判定、モバイル親和", "skip_when": "並列比較が必要、複数同時 review", "apis_used": ["POST /api/match"], "primary_user": "1 件ずつ集中したい判定者" }, { "id": "WF-16", "title": "Org Tree", "spec": null, "output": "exports/wireframes/wf-16.html", "category": "hierarchy / org-chart", "pick_when": "組織配置責任、チーム別 fit 集計", "skip_when": "個人判定単発、組織情報なし", "apis_used": ["POST /api/match"], "primary_user": "組織配置責任者" }, { "id": "WF-17", "title": "A vs B Diff", "spec": null, "output": "exports/wireframes/wf-17.html", "category": "pair-comparison", "pick_when": "最終 2 名から 1 名選定、決裁会議直前", "skip_when": "3 候補以上の同時比較 → WF-07 へ", "apis_used": ["POST /api/match"], "primary_user": "最終 2 名から 1 名選定の決裁者" }, { "id": "WF-18", "title": "Notification Inbox", "spec": null, "output": "exports/wireframes/wf-18.html", "category": "event-stream / inbox", "pick_when": "常駐運用、event 駆動の検知が中心", "skip_when": "通知設定 UI 別途要、初期データ 0", "apis_used": ["POST /api/match"], "primary_user": "常駐運用担当", "future_backend_hook": "WebSocket / SSE での push 統合余地" }, { "id": "WF-19", "title": "Onboarding Tour", "spec": null, "output": "exports/wireframes/wf-19.html", "category": "onboarding / empty-state", "pick_when": "新規ユーザー初回、empty state を機会に変える", "skip_when": "ヘビーユーザーが速度優先", "apis_used": ["POST /api/match"], "primary_user": "新規ユーザー初回" }, { "id": "WF-20", "title": "Print Report", "spec": null, "output": "exports/wireframes/wf-20.html", "category": "report / print", "pick_when": "経営層への配布資料、紙 / PDF 必要", "skip_when": "インタラクション必要", "apis_used": ["POST /api/match"], "primary_user": "経営層配布", "print_supported": "@media print 対応、A4 1 ページ収まる、PDF 保存可" } ], "shared_acceptance": [ "verify_public_demo.py が pass し続ける (root index.html / src/index.html を変更しない)", "exports/wireframes/ 配下の単一ファイルで完結 (新 build step 禁止)", "Mighty cyber palette を CSS custom properties で適用", "keyboard only で primary flow を完走できる", "mobile (375x812) で横スクロール 0", "prefers-reduced-motion を尊重" ], "usage": { "ai_prompt_template": "Implement {WF-XX} per docs/wireframes/{WF-XX}_*.md. Output single exports/wireframes/wf-XX.html. Use existing FastAPI /api/parse + /api/match. Do not modify root index.html.", "future_automation": "scripts/generate_wireframe_impl.py --wf XX --out exports/wireframes/wf-XX.html (TBD, Codex lane)" } }