frontend-ui-standards-skill 是做什麼的?
以設計系統為優先的前端 UI 實作 Codex 技能。
概述
此技能指導 Codex(或相容的 AI 助理)如何根據既有的設計系統與元件庫來產生一致且高品質的前端 UI 程式碼。它強化了「設計系統優先」的原則,確保每個 UI 元件都能夠與團隊的設計語言對齊。
使用方式
在與 Codex 對話時,與前端 UI 相關的任務將會自動觸發此技能。你可以透過以下方式明確引用:
- 在提示中提及「依據設計系統實作」或「使用元件庫」
- 提供相關的設計規範連結或檔案路徑
核心原則
- 設計系統優先:在實作前先查詢既有的設計規範與元件庫。
- 一致性:確保樣式、間距、色彩與排版都遵循設計系統。
- 可維護性:撰寫模組化、可重複使用的程式碼。
- 工具鏈整合:與 Tailwind CSS、CSS Modules、Storybook 等現代工具協作。
支援的框架
- React(包含 Next.js、Remix)
- Vue 3
- 其他基於 JSX 或 Vue 模板的 UI 框架
範例提示
請使用設計系統中的 Button 元件,並依照 spacing 規範實作一個登入表單。