Communitygithub.com

TIKAZI/TIKAZ-Codex-Frontend-Design

以藝術指導驅動的前端工作流程,在擴展實作前先驗證視覺方向。

TIKAZ-Codex-Frontend-Design 是什麼?

這項技能提供了一套結構化的前端設計方法論,稱為「TIKAZ 方法」,旨在優先建立視覺導向的驗證,再進行大規模實作。它要求將頁面分類為說服、操作、閱讀或體驗四種類型,避免對所有產品套用無謂的登陸頁效果。透過撰寫「設計閱讀」、設定三個專案轉盤(變異、動態、密度)、一個主導佈局和三個反目標,來收斂設計方向。在實作上,由前端設計工作室掌控藝術指導與實作,其他技能不得推翻已批准的視覺世界;同時需建構藝術導向驗證,涵蓋導航、第一視口、一個代表性下游區段,以及桌面版和行動版。完成必須提交設計合約、多視口螢幕截圖、關鍵狀態、減少動態行為、建置/測試證據、元件授權狀態,以及殘留限制交接。該技能支援 Codex 平台,與 `code-intelligence` 和 `engineering-delivery` 協作,確保設計決策的影響範圍與生產執行分離。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add TIKAZI/TIKAZ-Codex-Frontend-Design

在你喜歡的 AI 中提問

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

說明文件

前端設計

由 TIKAZ 設計、整合、重構並持續維護。

TIKAZ 方法

  1. 將表面分類為 說服、操作、閱讀 或 體驗;不要對每個產品套用登陸頁效果。
  2. 撰寫一份 設計閱讀、三個專案轉盤(變異、動態、密度)、一個主導佈局以及三個反目標。
  3. 讓 frontend-design-studio 負責藝術指導與實作。輔助技能不得推翻已批准的視覺世界。
  4. 建構藝術導向驗證:導航、第一視口、一個代表性下游區段,包含桌面版與行動版。
  5. 僅在設計驗證獲批准後,將儲存庫範圍內的變更影響路由至 code-intelligence,並將生產執行路由至 engineering-delivery。
  6. 分別執行視覺/產品與實作品質驗證。

完成閘道

需要提交一份已確認的設計合約、目標視口的螢幕截圖證據、關鍵狀態、減少動態行為、建置/測試證據、元件授權狀態,以及包含殘留限制的交接文件。

閱讀 references/routing.md 和 references/output-contract.md。

相關技能