Communitygithub.com

設計工程師

前端和設計工程工作的編排器。每當任務涉及 UI 設計、設計系統、視覺潤飾、AI 生成的粗糙內容審查、圖表、影片、簡報、3D（Three.js 或 Blender）或 Penpot/Figma 檔案時，請先讀取此技能。它會將任務導向合適的專業技能，將它們鏈接起來處理多步驟工作，並確保每個技能都使用最新的上游版本。

設計工程師 是什麼？

此技能作為一個智慧型路由器，用於針對前端和 UI 相關任務選擇並編排正確的 AI 代理專業技能。它界定了一套位於 `~/.claude/skills/` 的指標技能，這些技能會動態地從其上游儲存庫中獲取最新的程式碼和說明，而不是維護它們自己的本地副本。當使用者提出如建立設計系統、潤飾現有 UI、為架構繪製圖表、根據 HTML/CSS 或 Figma 素材製作影片，或為網頁建立 3D 模型等任務時，此技能會查閱一個決策表，以指導使用者選擇合適的專業技能，例如 `ui-ux-pro-max`、`impeccable`、`diagram-design`、`hyperframes` 或 `img2threejs`。它透過明確定義的鏈接推薦常見的工作流程，例如「新的著陸頁」或「發布套件」，並且始終優先考慮專案中的現有設計文件，例如 `DESIGN.md`。此技能主要設計用於與 Claude Code 或 Cursor 等 AI 編碼代理一起使用，它透過執行一個名為 `upstream.sh` 的指令碼來運作，該指令碼會為所選技能管理一個淺層複製，然後代理可以讀取並執行該技能的特定指令。

相容平台✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/suryxnshsingh/design-engineering-skills/tree/main/design-engineer
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

design-engineer：哪個設計技能適合哪個工作

所有位於 ~/.claude/skills/ 的專業技能都是指向即時上游儲存庫的輕量指標。它們都不會儲存一份副本。每個技能都會告訴您在執行之前如何取得最新版本。共用的取得器是：

bash ~/.claude/skills/design-engineer/scripts/upstream.sh <名稱>   # 複製或更新，輸出 PATH=<目錄>

名稱：impeccable ui-ux-pro-max blender-mcp img2threejs video-shotcraft hyperframes penpot remotion lemo-opuscar diagram-design。離線時請加上 --no-update。

路由表

使用者想要技能為什麼選擇這個
風格方向、調色盤、字型、新產品或頁面的完整設計系統ui-ux-pro-max搜尋 79 種風格 / 192 種產品類型並產生一個系統
改進、審查、潤飾、去除粗糙內容、使現有 UI 更大膽/更安靜impeccable24 個引導/審查/完成指令 + 62 條規則偵測器
在發布任何 UI 變更前捕捉 AI 生成的粗糙內容impeccable detect確定性，無需 LLM
架構、流程圖、序列圖、ER 圖、甘特圖、組織圖、任何圖表diagram-design一個品牌化的 HTML+SVG 檔案，45 種類型
產品 UI 內部的圖表（非獨立圖表）dataviz（內建）然後 impeccabledataviz 負責圖表系統，impeccable 負責周圍的 UI
真實網站或應用程式的宣傳影片video-shotcraft捕捉真實頁面、鏡頭卡片、Remotion 渲染
從 HTML/CSS 製作影片、從 Figma 取得品牌代碼、反向分析現有影片、幻燈片hyperframesHTML 轉 MP4，450 個區塊，/figma 子技能
使用 React 製作影片，或處理現有的 Remotion 儲存庫remotion官方的 Remotion 技能
以繪畫或紀錄片風格製作有旁白的短片/解說片，無需實拍素材lemo-opuscar60 多種純程式碼風格的影片，含配樂 + TTS
將參考圖片轉換為純程式碼的 Three.js 模型img2threejs程序化生成，可進行動畫處理
真實的 3D 建模、場景、材質、渲染、素材匯入blender-mcp透過 MCP 驅動即時 Blender
讀取或編輯 Penpot 設計檔案penpot官方的 Penpot MCP
讀取 Figma 檔案以進行 UI 工作（代碼、框架、元件）官方的 Figma MCP（claude mcp add figma -t http https://mcp.figma.com/mcp）不在此套件範圍內；HyperFrames 的 figma 子技能僅用於影片
將 Figma 品牌素材匯入影片hyperframes figma 子技能僅讀取 Figma 以建構 HyperFrames 動畫

決策規則

  1. 現有 UI vs 新 UI。現有：先對窄目標執行 impeccable critique。新的且沒有設計系統：先執行 ui-ux-pro-max，結果持久化到 DESIGN.md，建構，然後執行 impeccable 進行審查。永遠不要跳過對已發布 UI 的審查步驟。
  2. 影片：根據素材類型選擇。
    • 真實產品頁面 → video-shotcraft。
    • HTML/CSS 技能、品牌素材或 Figma → hyperframes。
    • 團隊使用 React 開發 / 儲存庫已使用 Remotion → remotion。
    • 故事或主題短片，用程式碼繪製 → lemo-opuscar。 除非正在移植，否則不要在一個專案中混用兩個影片框架（HyperFrames 有 remotion-to-hyperframes）。
  3. 3D：程式碼或 DCC。 輸出必須為用程式碼建構的網路資源 → img2threejs。任何需要真實建模工具、渲染或下載素材的 → blender-mcp。兩者都需要使用者確認主機設定（安裝程式或 Blender 附加元件）；說明他們必須做什麼。
  4. 圖表不是圖表。 系統的圖表 → diagram-design。應用程式中的資料圖表 → dataviz。影片中的圖表 → 影片技能的圖表區塊。
  5. 設計檔案。 Penpot → penpot。用於 UI 的 Figma → 官方 Figma MCP；用於影片的 Figma → hyperframes figma 子技能。提取一次代碼並將其寫入 DESIGN.md，以便所有其他技能都能重複使用它們。
  6. 基於 MCP 的技能（blender-mcp、penpot）需要一個正在執行中的主機應用程式。首先檢查 claude mcp list；如果沒有，向使用者提供安裝和連線步驟，然後停止直到他們確認。

常見鏈接

  • 新的著陸頁面：ui-ux-pro-max（系統）→ 建構 → impeccable detect + critique → polish。
  • 發布套件：ui-ux-pro-max 代碼 → 網站 → video-shotcraft 宣傳 → diagram-design 架構圖用於文件，全部使用相同的代碼。
  • 設計交接：penpot 代碼/框架 → DESIGN.md → 建構 → impeccable audit。
  • 附圖表的解說影片：diagram-design 靜態圖 → hyperframes 或 lemo-opuscar 負責動畫。
  • 主打 3D 物件：從產品照片使用 img2threejs → 嵌入 → impeccable overdrive 負責互動。

在開始任何設計任務之前

  1. 從表格中選擇技能。如果兩個都適用，請遵循決策規則；如果仍然不清楚，問一個問題。
  2. 使用 upstream.sh <名稱> 取得最新版本，並閱讀技能指定的進入點檔案。只讀取當前步驟需要的部分。
  3. 在專案中尋找現有的 DESIGN.md、PRODUCT.md、.diagram-design 或代碼檔案，並重複使用它們。
  4. 用一句話說明你選擇了哪個技能以及原因，然後開始工作。

維護

  • upstream.sh 在 ~/.cache/design-skills/ 中為每個技能保留一個淺層複製。刪除該資料夾以重置。
  • 要新增技能：在 scripts/upstream.sh 中新增一個 case，編寫一個指標 SKILL.md，並在上方新增一行。
  • 如果上游附帶了一個外掛或 npx skills add 路徑，在真實專案中優先使用該方式；指標技能是始終可用的備用方案。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

suryxnshsingh/hyperframes

Write HTML/CSS and render deterministic MP4 with HeyGen's HyperFrames; ~450 ready blocks (transitions, kinetic type, captions, charts, maps, 3D), a /figma sub-skill that pulls brand tokens and frames into video, reverse-any-video, slideshow/present mode, and Remotion-to-HyperFrames porting. Use for launch films, explainers, social clips, title cards, or when the user wants video from HTML rather than React.

suryxnshsingh/video-shotcraft

Make cinematic product promo videos of a real web app in Remotion: captures the real pages, picks from ~124-150 shot recipe cards, offers the Ink Press template, beat sync and Freesound sound design. Use for "make a promo/launch video of my site/app", single shot-card effects, or finding/aligning SFX for an existing product video. Always fetches latest.

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community