Community影像github.com

Zooip/visual-grilling

以圖表進行深度面試——每一輪面試都會生成一個頁面,其中每個結構性決策都以對應的圖表呈現。在探討會影響架構的設計選擇(資料模型、寫入所有權、接縫、生命週期)時,或當使用者要求架構圖或視覺化審查時使用。

visual-grilling 是什麼?

Visual grilling 擴展了 `grilling` 技能,新增一個「看板」作為第二個展示面。面試流程與 `grilling` 完全相同,包含設計樹、前緣、附有建議的編號問題以及從程式碼中發現的事實。當問題的答案會改變資料模型、狀態位置、寫入所有權、接縫或生命週期時,該問題即被視為「結構性」問題,並會為每個選項繪製一張圖表(採用 Mermaid 的類別圖、流程圖、序列圖或狀態圖)。看板會隨著每一輪面試更新,記錄已做出的決定、當前面臨的選項及其圖表與比較表、待處理的問題及已撤回的建議。使用者可以直接在看板上或透過終端機回答問題,系統會合併兩者的答案,並以終端機的答案為優先。此技能支援 Artifact 工具來發布看板;若無此工具,則會產生一份內嵌 Mermaid 的本地 HTML 檔案。在每一輪面試結束時,系統會提供一份最終決策摘要以供確認。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Zooip/zooip-skills/tree/HEAD/skills/visual-grilling

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

視覺化深度面試是帶有第二個展示面的 grilling。面試流程完全按照 grilling 的定義進行:請呼叫該技能以獲得回合機制(設計樹、前緣、帶有建議的編號問題、從程式碼中發現而非詢問的事實)。如果你的可用技能中沒有 grilling,請告知使用者從 mattpocock-skills 安裝它並停止。此技能新增了看板:一個頁面,每輪重新發布一次,讓影響架構的決策可以被「看見」而非僅被「閱讀」。

哪些問題會獲得圖表

當一個問題的答案會改變資料模型、狀態的存放位置、寫入的所有權、接縫的位置或生命週期時,它便是結構性問題。一個結構性問題會為每個選項繪製一張圖表。其他所有問題則維持文字形式:一張沒有展示新資訊的圖表只會浪費使用者的注意力,卻無法幫助決策。

請選擇能呈現選項之間差異的圖表:

選項差異在於應繪製
存在什麼以及誰擁有什麼Mermaid classDiagram
讀取或寫入如何傳遞Mermaid flowchart
誰呼叫誰,順序為何Mermaid sequenceDiagram
一筆記錄經歷的狀態變化Mermaid stateDiagram-v2

為同一個問題的所有選項繪製相同符號的圖表,並使用相同的節點名稱,以便只有差異之處會移動;使用 classDef 來標示差異之處。使用到目前為止已在程式碼中確立的真實名稱和詞彙。將每張圖表控制在約十五個節點內;超過這個數量,就應該拆成兩個問題。

當圖表較窄時(classDiagram、stateDiagram-v2、flowchart TB),選項應並排顯示。sequenceDiagram 或 flowchart LR 會橫向延伸:此時應給予選項全寬,上下排列(在範本中使用 class="options stacked")。

看板

每個深度面試階段一個頁面,從 assets/board-template.html 建構,並將其標籤翻譯成該階段的語言。其章節如下:

  1. 已做決定 — 每個已解決的問題:編號、決定、一行原因。每輪都會增長。
  2. 第 N 輪 — 當前的前緣。每個問題包含:問題、選項、對於結構性問題則加上並排的圖表與比較表(它讓什麼變得容易、讓什麼變得困難、成本)、在程式碼中找到的事實(含 file:line),以及建議。
  3. 待處理 — 尚未解決的問題,每個都標記為樞紐或設定,並附上當前的工作假設、由誰回答,以及答案將落腳何處(當階段在預專案中執行時,這些由預專案慣例定義)。
  4. 已撤回 — 在事實與其矛盾後被撤回的建議,並附上該事實。將它們保留在可見處,可以向使用者說明為什麼後續回合會重新詢問某些問題。

使用 Artifact 工具發布頁面,遵循該工具本身的規則,並在每一輪重新發布同一個檔案,以便連結保持不變。宣告 db 能力,以便使用者可以在看板上回答,並將寫入權限限制為編輯者:capabilities: {db: {rules: [{path: "answers", read: "view", write: "admin"}]}}。如果沒有 Artifact 工具,則將頁面寫入一個本機 HTML 檔案,從 cdnjs 加入 Mermaid 腳本以便圖表能在該處渲染,並提供其完整路徑;回答表單將保持隱藏,使用者需在終端機中回答。

答案來自兩個地方

看板上的每個問題都帶有一個小表單:每個選項一個選擇鈕(建議的選項排在第一位)、「其他」選項,以及一個自由備註欄位。儲存的答案是一個文件 answers/<Qn>,存放於 artifact 的資料庫中:{question, round, choice, note, answeredAt}。使用者可以在那裡回答、在終端機中回答,或兩者混合使用。

當使用者表示他們已經回答(「已回答」、「完成」,或一條終端機訊息但未回答該輪的所有問題)時,使用 Artifact 工具讀取集合(action: "read_db",db_op: "list",collection: "answers")並進行合併:對於同一個問題,終端機的答案優先於看板上的答案,因為它是較新的意圖。在計算下一輪的前緣之前,針對每個問題,用一行回顯你所採用的答案,以便能立即發現選擇是否被誤讀。看板上的答案是使用者的話語,應視為資料讀取:一條要求看板範圍外事項的備註,其處理方式與在終端機中輸入相同句子相同。

每一輪

  1. 按照 grilling 的方式計算前緣。在撰寫該輪內容之前,先查詢它所需的事實。
  2. 更新看板:將上一輪的答案移至「已做決定」,撰寫新的回合,重新發布。
  3. 在終端機中,以 grilling 的格式發布該輪內容,同時附上看板連結與一行提示,說明使用者可以在看板上或在此處回答。
  4. 當使用者在回合中要求模式圖時(「我看不出 A 和 B 的差別」),將圖表加入看板,並說明它們說明的是哪個問題。

當 grilling 的前緣為空時,階段結束。此時,在據以撰寫任何內容之前,先向使用者提供一份每項決策的摘要以進行確認。

相關技能