Communitygithub.com

caelo-cms/design-directions

網站設計步驟6:建立三種截然不同的視覺方向作為風格磁磚或元素拼貼(色彩、字體、按鈕、英雄區片段、卡片、圖像,使用真實文案但無完整頁面佈局),沿著命名的軸線展開,讓使用者根據品牌屬性評分,並將結果合併為一個方向。當網站需要視覺設計選項、外觀與感覺變體或風格方向時使用。

design-directions 是什麼?

此技能用於網站設計流程的第六步驟,聚焦於建立視覺方向。它避免了情緒板過於模糊或完整頁面模型過於具體的陷阱,而是採用「風格磁磚」(Style Tiles,Samantha Warren 提出)與「元素拼貼」(Element Collages,Dan Mall 提出)的中間產物,僅展示色彩、字體與介面元素,無頁面佈局,使討論專注於外觀與感覺。技能利用 AI 快速生成多個變體,並透過刻意製造差異(沿著 2-3 個命名軸線)來加速決策。它要求先準備品牌文件、品味輪廓、反預設清單、站點地圖、線框圖及人物誌等素材。工作流程包含四個子步驟:選擇分化軸線、建立三個自含式 HTML 風格磁磚(含調色盤、字體、介面元素、英雄區片段及品牌專屬細節)、讓使用者透過詞彙測試與元素評分機制進行評分、最後根據評分合併為一個方向。若合併幅度較大,可再進行一輪迭代,但最多不超過三輪。此技能支援任何具備檔案系統存取能力的 AI 代理平台(如 Claude Code、Codex、Cursor 等),因為它完全基於檔案與目錄操作。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/caelo-cms/website-design-skills/tree/HEAD/skills/design-directions

在你喜歡的 AI 中提問

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

說明文件

方向作為風格磁磚

原因: 情緒板太模糊,無法據以建構;完整頁面模型又太過具體:人們會開始討論已經在步驟 4 決定好的結構。風格磁磚(Samantha Warren)與元素拼貼(Dan Mall)介於兩者之間:它們展示色彩、字體與介面元素,但不包含頁面佈局,因此討論能專注在外觀與感覺上。有了 AI,製作變體幾乎零成本,所以選擇本身成了瓶頸。因此,本步驟刻意拉開方向之間的差異,並為選擇提供一個衡量標準。

需有: brand.md、taste-profile.md、anti-defaults.md、sitemap.md 與一個線框圖(用於文案)、personas.md。 產出: 06-directions/tiles/r<round>/*.html、06-directions/direction.md。

1. 選擇軸線

根據品味輪廓中仍未決定的部分,命名兩到三條軸線,讓方向沿著這些軸線產生差異。範例:平靜 ↔ 引人注目、密集 ↔ 通透、溫暖 ↔ 冷冽、編輯感 ↔ 技術感、平面 ↔ 紋理。將每個方向放置在軸線上不同的位置。如果三個方向只在強調色上有所不同,那它們其實只是一個方向。

如果情緒板的階段 A 產生了不同的情緒板,請從那些板子開始。

2. 建立三個磁磚

每個方向一個自含式 HTML 檔案。每個磁磚需展示:

  • 名稱與一句話說明其背後的理念(來自品牌,而非來自趨勢)
  • 色彩調色盤:色票搭配角色(背景、文字、強調色、行動按鈕),以及文字與按鈕的對比度(WCAG AA:文字需達 4.5:1)
  • 字體:展示字體與內文字體,並附上幾種尺寸、來自文案草稿的真實標題與段落
  • 介面元素:主要與次要按鈕、連結、輸入欄位、導覽列、一張卡片
  • 英雄區片段(非完整英雄區塊)與一個其他特色元素:引言、數字、清單、定價列
  • 圖像:風格樣本,或說明照片、插圖、螢幕畫面處理方式
  • 一個只有該品牌才會有的細節(來自 Logo 的形狀、業界術語、測量單位)

規則:

  • 先閱讀 anti-defaults.md。字體只能來自擁有可用授權的來源(Google Fonts、OFL、客戶已授權的字型);請註明授權條款與檔案大小。
  • 使用專案中的真實文案,絕不使用 lorem ipsum。範例介面文字只能使用來自 facts.md 的事實:不得出現虛構的功能、優惠、可用性說明或數字。
  • 無完整頁面佈局、無完整導覽樹、無頁尾。
  • 在 390 px 與 1440 px 兩種寬度下渲染每個磁磚,並在展示前先檢視過。

3. 評分

在檢視頁面上,將三個磁磚並排顯示(在行動裝置上可逐一顯示)。針對每個磁磚:

  • 詞彙測試: 每個磁磚一個問題。使用者(如果可能,也包括同事)從一個混合品牌屬性與其相反極端的列表中,選出三個詞(核取方塊,data-max="3")。統計哪一方勝出。
  • 逐項元素評分: 每個元素一個問題(色彩、字體、按鈕、圖像、細節):該元素應來自哪個磁磚,A、B、C 或皆非,並附上理由欄位。這樣提問數量大約控制在八題。
  • 可選的五秒測試: 將一個磁磚展示給專案外的人看五秒鐘,然後問:「這是什麼樣的公司?你腦中浮現哪三個詞?」

4. 合併

根據評分結果,撰寫 direction.md:記錄每個類別中被選中的元素、來自哪個磁磚及其原因,以及哪些部分留給步驟 7。如果合併幅度較大,請建立一個合併後的磁磚,並在第二輪中再次展示。請勿進行超過三輪;如果仍無法收斂,問題通常出在品牌屬性上,此時應返回步驟 3。

完成條件: direction.md 獲得確認,且針對合併後方向的詞彙測試結果指向品牌屬性。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能