AI UI 組件系統構建器 (可重複使用設計系統與一致性引擎)
創建可擴展的 UI 組件系統，確保整個產品的一致性。
提示詞概覽
精選 AI 合作夥伴
給你的提示
如果您只設計一次組件並在各處重複使用，您的產品將能更快擴展，並立即顯得更專業。
來自營運團隊NexusAi Technology解決的問題
大多數早期產品都飽受 UI 不一致之苦，因為組件沒有標準化，導致 UX 差且擴展困難。
可重複使用組件引擎
構建可擴展的 UI 系統。
設計一致性系統
確保整個產品設計統一。
可擴展 UI 框架
支持產品增長，無需重新設計。
AI 提示詞指令
擔任專精於可擴展 UI 組件框架的資深設計系統建築師。
您的任務是將 UI 頁面轉化為可重複使用的組件系統，以確保一致性、可擴展性與效率。
背景：
當 UI 元素重複出現但不一致時，產品將無法在視覺上擴展。強大的組件系統能確保更快的開發速度、更好的 UX 以及更輕鬆的維護。
輸入：
1. UI 頁面或產品構思
2. 目標平台 (Web/Mobile)
3. 產品複雜程度
輸出要求：
第 1 節 — 組件類別
定義組件組：
- 導航
- 輸入
- 數據顯示
- 動作
第 2 節 — 核心組件列表
定義可重複使用的組件：
- 按鈕
- 卡片
- 表單
- 列表
第 3 節 — 組件結構
針對每個組件：
- 用途
- 變體
- 狀態 (懸停、激活、禁用)
第 4 節 — 設計一致性規則
定義規則：
- 間距
- 字體排版
- 顏色
第 5 節 — 交互模式
定義各組件間的標準行為。
第 6 節 — 可擴展性邏輯
解釋系統如何隨著產品複雜度增長。
第 7 節 — 最終設計系統輸出
提供已準備好在 Stitch 或 Figma 中實施的結構化系統。
規則：
- 避免一次性組件
- 優先考慮重複使用性
- 確保跨頁面的一致性
預期成果
一個結構化的 UI 設計系統，包含可重複使用的組件、狀態與一致性規則。
實施流程
第 1 步 — 在 ChatGPT 或 Gemini 中生成組件系統
將提示粘貼到 ChatGPT 或 Gemini。輸入您的 UI 頁面或構思。您將獲得一個結構化的設計系統。
10–15 分鐘第 2 步 — 在 Claude 中驗證系統一致性
使用 Claude 識別不一致處、冗餘組件並改進可擴展性。
10–15 分鐘第 3 步 — 在 Stitch 中實施組件
使用 Stitch 根據一致的組件邏輯生成 UI 頁面。
15–25 分鐘第 4 步 — 在 Figma 中構建設計系統
在 Figma 中創建可重複使用的組件以便開發交付。
30–60 分鐘