AI 設計工具 Starter Components 與設計規範

核心概念

現代 AI 設計工具（如 Claude Design）提供一套 Starter Components 鷹架系統，讓設計師不需手工搭建設備外框、投影片外殼或動畫引擎，而是透過 copy_starter_component 工具直接取得完整元件並填入設計內容。

Starter Components 清單

Kind（含副檔名）	用途
`deck_stage.js`	投影片外殼 Web Component。縮放、鍵盤/點擊導航、幻燈片計數覆蓋層、演講者備註 postMessage、localStorage 持久化、列印 PDF
`design_canvas.jsx`	並排展示 2+ 個靜態設計選項，帶標籤的網格佈局
`ios_frame.jsx`	iOS 裝置外框（含狀態列與鍵盤）
`android_frame.jsx`	Android 裝置外框
`macos_window.jsx`	macOS 桌面視窗（紅綠燈按鈕）
`browser_window.jsx`	瀏覽器視窗（tab 欄）
`animations.jsx`	時間軸動畫引擎（Stage + Sprite + scrubber + Easing）

重要：kind 參數必須精確含副檔名（.js 或 .jsx）。裸名或錯誤副檔名會導致工具失敗。

投影片使用規則

每頁投影片是 <deck-stage> 的直接子 <section>
deck_stage.js 自動打上 data-screen-label、data-om-validate，並向 parent 發送 {slideIndexChanged}
任何投影片演示都應使用此元件，不要手工重建縮放或鍵盤邏輯

GitHub 整合工作流

從 GitHub 倉庫引入設計素材時，必須完成完整連結：

github_get_tree（看檔案名稱）
→ github_import_files（匯入子集）
→ read_file（讀取匯入的檔案）

優先讀取的檔案類型：

主題/顏色 token：theme.ts、colors.ts、tokens.css、_variables.scss
全域樣式表和佈局骨架
用戶提及的具體元件

目標是像素級還原真實設計數值（hex、間距步進、字體堆疊、圓角半徑），而非依賴記憶重建。

關鍵要點

內容規範

不加填充內容：每個元素都要配得上它的位置。版塊感覺空 → 用佈局和構圖解決，不是發明內容
新增素材前先問：不擅自新增版塊、頁面、文案，先詢問使用者
先建立設計系統：探索設計資產後，先宣告將採用的版面系統（標題類型、圖片處理方式、背景色分區）

尺度規則

情境	最小值
投影片文字（1920×1080）	24px
列印文件	12pt
行動端點擊目標	44px

避免 AI Slop 套路

以下模式已過度使用，應主動避免：

激進漸層背景
不必要的 emoji（非品牌識別用途，改用佔位符）
「圓角容器 + 左側強調色邊框」組合
用 SVG 繪製圖像（改用佔位符，向使用者索取真實素材）
過度使用字體：Inter、Roboto、Arial、Fraunces、系統字體

推薦 CSS 技巧：text-wrap: pretty、CSS Grid、進階 CSS 效果都是好選擇。

可用技能（Skill）

技能名	用途
Animated video	時間軸動效設計
Interactive prototype	帶真實互動的可用應用
Make a deck	HTML 幻燈片演示
Make tweakable	增加設計內的 tweak 控件
Frontend design	現有品牌系統之外的美學方向
Wireframe	線框圖與分鏡探索
Export as PPTX (editable)	原生文字形狀，PowerPoint 可編輯
Export as PPTX (screenshots)	像素完美平面圖像
Create design system	建立設計系統或 UI 元件庫
Save as PDF	直接列印的 PDF 匯出
Save as standalone HTML	離線可用的單一自包含文件

實務應用

製作投影片演示：呼叫 copy_starter_component(kind: "deck_stage.js")，將每頁幻燈片寫成 <section> 放入 <deck-stage> 元素，無需自行處理縮放或鍵盤事件。

引用現有設計系統：從 GitHub 匯入 token 檔案後，抬取精確數值（hex、間距、字體堆疊、圓角），像素級還原真實 UI，避免從訓練記憶臆測。

設計系統建立順序：先聲明系統（版面類型、背景色分區、字體層級），再填入內容，確保視覺節奏有意圖而非隨機。

延伸觀點

工具堆積是偽生產力，工作流架構才是核心（高置信度）多篇研究指出：「找到一個 AI 工具解決所有問題」行不通。有效的 AI 設計應用是分層工作流——先結構化輸入，再分配不同工具處理各環節，最後人工收尾。六階段堆棧模型（抽取→結構化→數據視覺化→生成→品質控制→審查）與「先編碼意圖再給 AI 使用」的設計系統原則一致：AI 是中介層，不是決策終點。

語意化結構決定 AI 能力上限（高置信度）若元件缺乏語意代幣與行為意圖，AI 只能猜測設計意圖；若素材是非結構化文件，生成結果就失準。「讓 AI 可讀」已成為現代設計資產的新設計原則。元件 metadata、命名規範、屬性定義，直接影響 AI 能否準確使用設計系統。

設計系統應將 AI 視為使用者（單來源，Southleft Substack）傳統設計系統服務工程師與設計師，新一代系統還需考慮 AI Agent 的「使用體驗」。隨著 MCP 等協議普及，設計系統的「機器可讀性」將成為衡量成熟度的新維度。

AI 能做到 70%，剩下 30% 需人判斷（單來源，Medium） AI 擅長從零生成初稿、填充結構、維持視覺一致性；但資料正確性、邏輯敘事合理性、品牌敏感度仍需人把關。核心競爭力正從「會做」轉移到「會判斷」——能清楚定義什麼是好的輸出，才能有效引導 AI。

反向連結

以下頁面引用了本頁：

Claude Design 實戰工作流程——Ryan Mather 七招心得（技術與AI）