Communitygithub.com

alty-oss/dev-design

用於為新 UI 或刻意重新設計建立獨特的視覺方向。

dev-design 是什麼?

此技能旨在協助開發者或設計師為新產品或重新設計的 UI 建立明確且具區別性的視覺方向。它要求使用者先閱讀前端設計指南,然後根據簡報與專案限制,提出兩種本質上不同的設計方向,重點在於比較層級、構圖、字體與強調手法,而非僅是調色盤的變化。技能指定了一個兩階段的流程:首先規劃 4–6 種命名色、字型與角色、佈局概念及 ASCII 線框,然後與簡報及相似產品進行比較,以避免設計趨同。最終的設計方向需記錄在 `direction.md` 中,並明確決策狀態。此技能支援所有開發平台,強調使用真實內容、集中表現於一個令人難忘的元素,並在缺乏字型或素材時使用有意的替代方案。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/art-direction

在你喜歡的 AI 中提問

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

說明文件

藝術指導

Português (Brasil) 在決定方向前,請先閱讀內含的前端設計指南。將其特定的視覺原則與簡報和專案限制一同運用。 閱讀 brief.md 和現有約束條件。對於新產品/重新設計,請提出兩種本質上不同的方向,各自奠基於目標受眾、內容與任務。比較層級、構圖、字體與強調手法,而不僅僅是調色盤的變化。 將選定的方向、理由以及決策狀態/來源記錄在 direction.md 中。如果決策已被委派,請選擇最合適的選項並記錄為委派。否則,在實作新方向之前,請解決這個實質性的決策。 遵循原始的兩階段流程:

  1. 規劃 4–6 種命名色彩、字型與角色、佈局概念、帶有對齊方式的 ASCII 線框,以及獨特的原則。
  2. 與簡報和一個合理的相似產品進行比較。修正那些在不同主題下看起來相同的選擇;記錄變更與原因。 明確的使用者指示具有決定性,包括來源視為陳腔濫調的風格。已有既有識別度的專案通常會沿用該識別。 使用真實內容。將表現力集中在一個令人難忘的元素上;並以有紀律的層次結構來支撐它。說明缺少的字型/素材,並使用有意的替代方案,而非假設某項服務可供使用。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相關技能