Communitygithub.com

MaxHan7/frontend-ui-standards-skill

以設計系統為優先的前端 UI 實作 Codex 技能

frontend-ui-standards-skill 是什麼?

這個技能針對使用 Codex 的開發者,提供以設計系統(Design System)為核心的前端 UI 實作指引。它強調在實作 UI 元件時,應優先參考並遵循既有的設計規範與元件庫,而非從零開始編寫樣式。此技能涵蓋了架構決策、元件拆分、樣式管理(如 Tailwind CSS、CSS Modules)以及與設計工具的對接流程,協助 AI 助理(如 Codex)產出更一致、可維護且符合設計語言的程式碼。適用於 React、Vue 等主流框架,並支援現代開發工具鏈。透過此技能,開發團隊能減少設計與開發之間的落差,提升 UI 實作品質與效率。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add MaxHan7/frontend-ui-standards-skill

在你喜歡的 AI 中提問

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

說明文件

frontend-ui-standards-skill 是做什麼的?

以設計系統為優先的前端 UI 實作 Codex 技能。

概述

此技能指導 Codex(或相容的 AI 助理)如何根據既有的設計系統與元件庫來產生一致且高品質的前端 UI 程式碼。它強化了「設計系統優先」的原則,確保每個 UI 元件都能夠與團隊的設計語言對齊。

使用方式

在與 Codex 對話時,與前端 UI 相關的任務將會自動觸發此技能。你可以透過以下方式明確引用:

  • 在提示中提及「依據設計系統實作」或「使用元件庫」
  • 提供相關的設計規範連結或檔案路徑

核心原則

  1. 設計系統優先:在實作前先查詢既有的設計規範與元件庫。
  2. 一致性:確保樣式、間距、色彩與排版都遵循設計系統。
  3. 可維護性:撰寫模組化、可重複使用的程式碼。
  4. 工具鏈整合:與 Tailwind CSS、CSS Modules、Storybook 等現代工具協作。

支援的框架

  • React(包含 Next.js、Remix)
  • Vue 3
  • 其他基於 JSX 或 Vue 模板的 UI 框架

範例提示

請使用設計系統中的 Button 元件,並依照 spacing 規範實作一個登入表單。

相關資源

相關技能