A
返回 工具
工具2026/05/095 分鐘閱讀

Open Design Kanban Board 技能指南

看板/任務板 — 多欄(To do / In progress / In review / Done)、可拖拽卡片、負責人頭像、泳道、頂部篩選欄。

技能概述

Kanban Board 技能生成一個單屏看板頁面,包含:頂部欄(項目麵包屑、Sprint 標籤、篩選行含成員/標籤/狀態、搜索欄)、4 個欄位(Backlog / In progress / In review / Done,每欄含數量標籤 + 添加按鈕)、每欄 3-6 張卡片(含標籤芯片、標題、負責人頭像、點數估算、進度條)、側邊欄(Sprint pulse 進度條、主要負責人、blocked tickets 提示)。

觸發關鍵字

  • kanban、task board、sprint board、trello、jira board、看板

什麼時候用

  • 敏捷開發 Sprint 看板
  • 項目任務管理
  • 團隊工作流可視化
  • Trello / Jira 風格界面原型

使用方法

自然語言觸發

帮我做一个看板
做一個 sprint board
整一個 task management 界面

指定技能

用 kanban-board 技能生成我哋團隊嘅 Sprint 25 看板

標準工作流程

  1. 讀 DESIGN.md
  2. 提取資訊 — 團隊名稱、Sprint 編號、欄位定義、成員名單
  3. 頁面結構
    • Top bar — 項目 crumb、sprint chip、filter row(members, labels, status)、search
    • 4 columns — Backlog, In progress, In review, Done。每欄有 count chip + "+ add"
    • Cards — 每欄 3-6 張。每張含:tag chip、title、assignee avatar、point estimate、progress
    • Sidebar — "Sprint pulse" 進度條、top assignees、blocked-tickets callout
  4. 輸出 — 單文件 HTML,inline style,語義化 HTML

輸出格式

單文件 HTML,自包含。CSS Grid 或 Flexbox 佈局。卡片模擬可拖拽視覺效果。

自檢清單

  • 每欄卡片數量合理(3-6 張)
  • 狀態標籤清晰(含顏色區分)
  • 負責人頭像可辨認
  • Sprint pulse 進度條反映真實進度
  • blocked tickets 有醒目提示

實際例子

例子 1:Sprint 看板

用戶:「做一個 5 人 Growth Squad 嘅 Sprint 看板,mid-sprint 狀態」

生成:

  • 4 欄:Backlog(3 張)、In progress(4 張)、In review(2 張)、Done(5 張)
  • 每張卡片含 assignee、story points、priority tag
  • 側欄顯示 Sprint 進度 60%、2 個 blocked tickets

例子 2:個人任務板

用戶:「幫我整一個個人 kanban 板」

生成:

  • 4 欄:To Do / Doing / Review / Done
  • 個人任務卡片,簡潔設計
  • Sprint pulse 改為 "Weekly Progress"

相關技能