technology-stack-blueprint-generator

technology-stack-blueprint-generator

熱門

全面的技術棧藍圖產生器,可分析程式碼庫以建立詳細的架構文件。自動偵測多個平台(.NET、Java、JavaScript、React、Python)的技術棧、程式語言和實作模式。產生可設定的藍圖,包含版本資訊、授權詳細資料、使用模式、編碼慣例和視覺化圖表。提供實作就緒的範本,並維持架構一致性以引導開發。

3.6萬星標
4556分支
更新於 2026/7/13
SKILL.md
readonlyread-only
name
technology-stack-blueprint-generator
description

全面的技術棧藍圖產生器,可分析程式碼庫以建立詳細的架構文件。自動偵測多個平台(.NET、Java、JavaScript、React、Python)的技術棧、程式語言和實作模式。產生可設定的藍圖,包含版本資訊、授權詳細資料、使用模式、編碼慣例和視覺化圖表。提供實作就緒的範本,並維持架構一致性以引導開發。

全面的技術棧藍圖產生器

設定變數

${PROJECT_TYPE="自動偵測|.NET|Java|JavaScript|React.js|React Native|Angular|Python|其他"} <!-- 主要技術 -->
${DEPTH_LEVEL="基本|標準|全面|實作就緒"} <!-- 分析深度 -->
${INCLUDE_VERSIONS=true|false} <!-- 包含版本資訊 -->
${INCLUDE_LICENSES=true|false} <!-- 包含授權資訊 -->
${INCLUDE_DIAGRAMS=true|false} <!-- 產生架構圖表 -->
${INCLUDE_USAGE_PATTERNS=true|false} <!-- 包含程式碼使用模式 -->
${INCLUDE_CONVENTIONS=true|false} <!-- 記錄編碼慣例 -->
${OUTPUT_FORMAT="Markdown|JSON|YAML|HTML"} <!-- 選擇輸出格式 -->
${CATEGORIZATION="技術類型|層級|用途"} <!-- 組織方式 -->

產生的提示

"分析程式碼庫並產生一份 ${DEPTH_LEVEL} 技術棧藍圖,徹底記錄技術和實作模式,以利於一致的程式碼產生。使用以下方法:

1. 技術識別階段

  • ${PROJECT_TYPE == "自動偵測" ? "掃描程式碼庫中的專案檔、設定檔和相依性,以判斷所有使用的技術棧" : "專注於 ${PROJECT_TYPE} 技術"}
  • 透過檢查副檔名和內容來識別所有程式語言
  • 分析設定檔(package.json、.csproj、pom.xml 等)以提取相依性
  • 檢查建置腳本和管線定義以取得工具資訊
  • ${INCLUDE_VERSIONS ? "從套件檔案和設定中提取精確的版本資訊" : "跳過版本詳細資訊"}
  • ${INCLUDE_LICENSES ? "記錄所有相依性的授權資訊" : ""}

2. 核心技術分析

${PROJECT_TYPE == ".NET" || PROJECT_TYPE == "自動偵測" ? "#### .NET 棧分析(若偵測到)

  • 目標框架和語言版本(從專案檔偵測)
  • 所有 NuGet 套件參考,包含版本和用途說明
  • 專案結構和組織模式
  • 設定方式(appsettings.json、IOptions 等)
  • 驗證機制(Identity、JWT 等)
  • API 設計模式(REST、GraphQL、最小 API 等)
  • 資料存取方式(EF Core、Dapper 等)
  • 相依性注入模式
  • 中介軟體管線元件" : ""}

${PROJECT_TYPE == "Java" || PROJECT_TYPE == "自動偵測" ? "#### Java 棧分析(若偵測到)

  • JDK 版本和核心框架
  • 所有 Maven/Gradle 相依性,包含版本和用途
  • 套件結構組織
  • Spring Boot 使用和設定
  • 註解模式
  • 相依性注入方式
  • 資料存取技術(JPA、JDBC 等)
  • API 設計(Spring MVC、JAX-RS 等)" : ""}

${PROJECT_TYPE == "JavaScript" || PROJECT_TYPE == "自動偵測" ? "#### JavaScript 棧分析(若偵測到)

  • ECMAScript 版本和轉譯器設定
  • 所有 npm 相依性,依用途分類
  • 模組系統(ESM、CommonJS)
  • 建置工具(webpack、Vite 等)及其設定
  • TypeScript 使用和設定
  • 測試框架和模式" : ""}

${PROJECT_TYPE == "React.js" || PROJECT_TYPE == "自動偵測" ? "#### React 分析(若偵測到)

  • React 版本和關鍵模式(hooks vs class 元件)
  • 狀態管理方式(Context、Redux、Zustand 等)
  • 元件庫使用(Material-UI、Chakra 等)
  • 路由實作
  • 表單處理策略
  • API 整合模式
  • 元件的測試方式" : ""}

${PROJECT_TYPE == "Python" || PROJECT_TYPE == "自動偵測" ? "#### Python 分析(若偵測到)

  • Python 版本和使用的關鍵語言特性
  • 套件相依性和虛擬環境設定
  • Web 框架詳細資訊(Django、Flask、FastAPI)
  • ORM 使用模式
  • 專案結構組織
  • API 設計模式" : ""}

3. 實作模式與慣例

${INCLUDE_CONVENTIONS ?
"記錄每個技術領域的編碼慣例和模式:

命名慣例
  • 類別/型別命名模式
  • 方法/函式命名模式
  • 變數命名慣例
  • 檔案命名和組織慣例
  • 介面/抽象類別模式
程式碼組織
  • 檔案結構和組織
  • 資料夾階層模式
  • 元件/模組邊界
  • 程式碼分離和責任模式
常見模式
  • 錯誤處理方式
  • 記錄模式
  • 設定存取
  • 驗證/授權實作
  • 驗證策略
  • 測試模式" : ""}

4. 使用範例

${INCLUDE_USAGE_PATTERNS ?
"提取代表性的程式碼範例,展示標準實作模式:

API 實作範例
  • 標準控制器/端點實作
  • 請求 DTO 模式
  • 回應格式化
  • 驗證方式
  • 錯誤處理
資料存取範例
  • 儲存庫模式實作
  • 實體/模型定義
  • 查詢模式
  • 交易處理
服務層範例
  • 服務類別實作
  • 商業邏輯組織
  • 橫切關注點整合
  • 相依性注入使用
UI 元件範例(若適用)
  • 元件結構
  • 狀態管理模式
  • 事件處理
  • API 整合模式" : ""}

5. 技術棧地圖

${DEPTH_LEVEL == "全面" || DEPTH_LEVEL == "實作就緒" ?
"建立全面的技術地圖,包含:

核心框架使用
  • 主要框架及其在專案中的具體使用
  • 框架特定的設定和自訂
  • 擴充點和自訂
整合點
  • 不同技術元件如何整合
  • 元件間的驗證流程
  • 前端和後端之間的資料流
  • 第三方服務整合模式
開發工具
  • IDE 設定和慣例
  • 程式碼分析工具
  • Linter 和格式化工具及其設定
  • 建置和部署管線
  • 測試框架和方式
基礎設施
  • 部署環境詳細資訊
  • 容器技術
  • 使用的雲端服務
  • 監控和記錄基礎設施" : ""}

6. 技術特定的實作詳細資訊

${PROJECT_TYPE == ".NET" || PROJECT_TYPE == "自動偵測" ?
"#### .NET 實作詳細資訊(若偵測到)

  • 相依性注入模式

    • 服務註冊方式(Scoped/Singleton/Transient 模式)
    • 設定繫結模式
  • 控制器模式

    • 基底控制器使用
    • 動作結果型別和模式
    • 路由屬性慣例
    • 篩選器使用(授權、驗證等)
  • 資料存取模式

    • ORM 設定和使用
    • 實體設定方式
    • 關聯定義
    • 查詢模式和最佳化方式
  • API 設計模式(若使用):

    • 端點組織
    • 參數繫結方式
    • 回應型別處理
  • 使用的語言特性

    • 從程式碼偵測特定語言特性
    • 識別常見模式和慣用語
    • 注意任何特定版本相依的特性" : ""}

${PROJECT_TYPE == "React.js" || PROJECT_TYPE == "自動偵測" ?
"#### React 實作詳細資訊(若偵測到)

  • 元件結構

    • 函式 vs 類別元件
    • Props 介面定義
    • 元件組合模式
  • Hook 使用模式

    • 自訂 hook 實作風格
    • useState 模式
    • useEffect 清理方式
    • Context 使用模式
  • 狀態管理

    • 本地 vs 全域狀態決策
    • 狀態管理函式庫模式
    • Store 設定
    • Selector 模式
  • 樣式方式

    • CSS 方法論(CSS modules、styled-components 等)
    • 主題實作
    • 響應式設計模式" : ""}

7. 新程式碼實作的藍圖

${DEPTH_LEVEL == "實作就緒" ?
"根據分析,提供實作新功能的詳細藍圖:

  • 檔案/類別範本:常見元件類型的標準結構
  • 程式碼片段:常見操作的即用程式碼模式
  • 實作檢查清單:端到端實作功能的標準步驟
  • 整合點:如何將新程式碼與現有系統連接
  • 測試需求:不同元件類型的標準測試模式
  • 文件需求:新功能的標準文件模式" : ""}

${INCLUDE_DIAGRAMS ?
"### 8. 技術關係圖表

  • 棧圖表:完整技術棧的視覺化表示
  • 相依性流程:不同技術如何互動
  • 元件關係:主要元件如何相互依賴
  • 資料流程:資料如何流經技術棧" : ""}

${INCLUDE_DIAGRAMS ? "9" : "8"}. 技術決策背景

  • 記錄技術選擇的明顯原因
  • 注意任何標記為待取代的舊版或已棄用技術
  • 識別技術限制和邊界
  • 記錄技術升級路徑和相容性考量

將輸出格式化為 ${OUTPUT_FORMAT},並依 ${CATEGORIZATION} 分類技術。

將輸出儲存為 'Technology_Stack_Blueprint.${OUTPUT_FORMAT == "Markdown" ? "md" : OUTPUT_FORMAT.toLowerCase()}'
"