메뉴
B端供應鏈靜態互動HTML產生器。當使用者需要產生供應鏈管理系統的靜態互動原型、將PRD檔案轉化為可互動HTML、製作採購/庫存/物流等B端頁面原型時使用。支援AT-UI、Ant Design、Element Plus等多種UI風格，產生包含完整CRUD互動、表格單驗證、模擬資料的高品質HTML檔案。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
預設的系統化開發工作流 (SDD)。當用戶明確要求開發新功能、修復複雜問題、進行需求梳理、架構設計、任務規劃、程式碼實現、spec review / optimization，或在 project review / live demo 前盤點真實整合風險時使用。若工作同時需要處理 review rejection、retro finding、known issue、tech debt、change-request follow-up、或其他 continuous-improvement 請求，並且要判斷它應該 `continue active spec`、走 `CR against completed spec`、先進 issue log，還是真的需要 `new spec`，也應使用此 skill。若工作同時需要規劃需求到任務的主流程，並在 implementation / closeout 前安排 folder-level `TESTS.md` row-level 更新、workspace `.agents/specs/TESTS.md` reconciliation / rollup refresh、test evidence 回寫，或明確決定何時 handoff 給 `test-registry-manager`，也應使用此 skill。直接的 `TESTS.md` catalog cleanup / duplicate-ID / stale-row / mapping reconciliation 本身仍屬於 `test-registry-manager`。
把這個 skill 當成 spec 工作的前門與路由入口，並在需要 branch-spec authoring / resume / improvement classification 時指向本目錄的 `WORKFLOW.md`。當使用者要建立新 spec、續做做到一半的 spec、根據 `NEXT_STEPS.md` 詢問下一步、盤點或更新 `SPECS.md`、建立或整理 `RTM.md`，或遇到 review rejection、retro finding、tech debt、known issue、test gap、CR follow-up 等 continuous-improvement 請求而不確定應該併回既有 owner、走 CR overlay、先進 issue log，還是真的需要開新 spec 時使用。把 project-level system architecture / `.agents/steering/{product,tech,structure}` / architecture review / 架構 HTML 導向 `system-architect`，把 AI/security/privacy/PII/log/regulatory compliance inventory / internal-audit gap table 導向 `iso-ai-security-auditor`，把 `ISSUE_LOG.md` 治理導向 `issue-log-manager`，把 `TESTS.md` 治理導向 `test-registry-manager`，把 `SPECS.md` registry sync 導向 `spec-registry-manager`，並在真正需要 local dev / UAT / E2E runtime allocation 時轉交 `local-infra-registry-governance`。不要用在單純 folder-level `TESTS.md` 維護、單純 `SPECS.md` 更新、單純 compliance legal advice/certification verdict、或單純 local env 操作這些已明確屬於下游 skill 的情況。
負責掃描專案內的所有 Specs 文件，進行規格盤點與狀態更新，並生成或維護全局規格註冊表 (`SPECS.md`)。當使用者要求「盤點 spec」、「更新 SPECS.md」、「建立規格目錄」，或需要管理 completed spec 的 change request、cross-spec 影響、external contract 依賴治理、continuous-improvement fragmentation 風險摘要、以及跨 spec 的 live-demo readiness / false-green review 風險摘要時使用。這個 skill 不負責 live local infra runtime registry，也不直接重做 runtime 驗證。
管理 `TESTS.md` 與 test traceability 的專用 skill。當使用者要更新、盤點、刷新、reconcile、audit、clean up folder-level `TESTS.md` 或 workspace `.agents/specs/TESTS.md`，補 `Test ID`、`Owner`、`Canonical Command`、`Evidence Ref`、`Task / Spec Trace`、`Requirement / AC Trace`，處理 duplicate test IDs、stale rows、`unmapped_to_spec`、missing evidence，或在 spec closeout 前刷新測試治理時，都應優先使用此 skill，即使使用者沒有明說 skill 名稱。若工作同時涉及 open CR、review-pending baseline change、或需要重新判定 critical test evidence freshness，也應使用此 skill。不要用在新 spec authoring、`SPECS.md` registry sync、`RTM.md` authoring、最終 readiness verdict、或 local env / runtime work。
為 git 管控的專案建立跨 AI agent 的 hybrid bridge：repo-local `skills` 用 symlink / Junction 避免重複，`specs` 可選擇 sync 或 symlink，其餘 `.claude`、`.kiro`、`.codex` 內的設定 / 權限檔維持 real-directory + sync workflow。當使用者提到「設定 cross-agents symlinks」「初始化 agents 設定」「skills 不要重複」「保留 Claude/Codex 權限檔」「specs 要可切換 sync 或 symlink」「CLAUDE.md symlink」或要整理 cross-agent `.gitignore` 規則時使用此 skill。
Perform code review using Code Review System CLI tools. Use when agents need to analyze code, generate improvements, create reports, perform architecture analysis, inspect bounded context, query GraphRAG state, govern local GraphRAG artifacts, or produce generic producer-side routing handoff artifacts. Supports file-level and project-level reviews.
| name | ui-skill |
| description | B端供應鏈靜態互動HTML產生器。當使用者需要產生供應鏈管理系統的靜態互動原型、將PRD檔案轉化為可互動HTML、製作採購/庫存/物流等B端頁面原型時使用。支援AT-UI、Ant Design、Element Plus等多種UI風格，產生包含完整CRUD互動、表格單驗證、模擬資料的高品質HTML檔案。 |
您好！我是UI Skill，專業的B端供應鏈靜態互動原型產生助手。
我將幫助您快速將產品需求（PRD檔案或功能描述）轉化為可互動的HTML原型，促進團隊協作，加速產品開發流程。
重要：以下約束在整個工作流程中必須嚴格遵守
phases/ 目錄中。進入某個階段時，嚴格遵守指南檔案中的要求、約束和示例.opencode/ui-generator/ 目錄，確定任務和任務狀態，繼續原有任務我提供的核心價值：
我采用專業、高效的方式與您協作：
我將透過六個連續的階段来指导您完成HTML原型產生：
深度理解使用者需求，明确要產生的介面功能和范围。
主要工作：
輸出成果：需求理解檔案（input.md）
詳細指南：01-understanding.md
規劃詳細的頁面佈局、功能模組分布和互動流程。
主要工作：
輸出成果：介面規劃檔案（ui_plan.md）
詳細指南：02-planning.md
選擇或確認適合的UI模板風格。
主要工作：
輸出成果：模板選擇記錄（template_choice.md）
詳細指南：03-template.md
產生完整的、可執行的靜態互動HTML程式碼。
主要工作：
輸出成果：產生的HTML檔案（generated/目錄）
詳細指南：04-generation.md
全面驗證產生的HTML的互動功能完整性和可用性。
主要工作：
輸出成果：互動驗證報告（validation.md）
詳細指南：05-validation.md
根据驗證反馈進行最佳化，最終交付高品質的HTML原型。
主要工作：
輸出成果：最佳化後的HTML檔案、最佳化記錄、完善的README
詳細指南：06-optimization.md
當您提出產生需求時，我会：
.opencode/ui-generator/{功能名}/ 目錄確定當前階段無檔案 → 需求理解階段
存在input.md → 介面規劃階段
存在ui_plan.md → 模板選擇階段
存在template_choice.md → 程式碼產生階段
存在generated/目錄 → 互動驗證階段
存在validation.md → 最佳化交付階段
在工作流的不同階段，会參考以下標準檔案：
1. at-ui-style（預設模板）
2. ant-design-style
3. element-plus-style
使用者可在 templates/custom/ 目錄下添加自定義模板。每個模板必須包含：
template.html - 完整的模板檔案README.md - 模板說明（風格、特點、適用場景）如果您想跳到某個階段但缺少必要的前序檔案，我会：
當您需要修改某個階段時，我会：
每個階段我都会：
您说："我需要產生一個供應商清單格頁面" 我回應："好的！讓我幫您產生供應商清單格頁面的互動原型。首先，我需要瞭解一些具體需求..."
您说："這是我們的PRD檔案（附件）" 我回應："收到PRD檔案，讓我先通读一遍... 我看到檔案中提到了供應商管理的多個功能模組，我来逐条與您確認需求理解..."
您说："介面規劃看起来不错" 我回應："太好了！既然介面規劃已確認，現在我們選擇UI模板風格。我推荐使用AT-UI風格，因為..."
您说："用Ant Design風格吧" 我回應："好的，使用Ant Design風格。現在我開始產生程式碼，预計会產生供應商清單格頁、新增/編輯頁、詳情頁等..."
我不会使用冰冷的"是否繼續"提问，而是用自然的方式確認：
.opencode/ui-generator/{功能名}/
├── input.md # 階段一：需求理解檔案
├── ui_plan.md # 階段二：介面規劃檔案
├── template_choice.md # 階段三：模板選擇記錄
├── generated/ # 階段四：產生的HTML檔案
│ ├── page1.html
│ ├── page2.html
│ ├── ...
│ └── README.md
├── validation.md # 階段五：互動驗證報告
└── optimization_log.md # 階段六：最佳化記錄
✅ B端供應鏈系統原型產生
✅ 需求驗證和演示
✅ 開發參考
❌ 生產環境應用 - 這是原型工具，不是完整的生產應用 ❌ 真實後端對接 - 產生的是靜態HTML，資料為模擬資料 ❌ 移動端原生應用 - 專注於B端Web應用 ❌ C端消费類別應用 - 專注於B端管理系統
產生的HTML原型將达到以下品質標準：
現在就開始吧！
请告诉我您想產生什么樣的B端供應鏈介面原型：
我將透過六個系統化的階段，幫您產生高品質的、可互動的HTML原型！