Communitygithub.com

ZZZoey333/portfolio-site-builder

協助初學者和設計師規劃、建置或改善個人 UI/UX 作品集網站,使用可重複使用的頁面區塊、專案案例模式及命名動畫配方。適用於建立作品集網站或將作品集簡報轉化為頁面和元件時使用。

portfolio-site-builder 是什麼?

這個技能旨在引導使用者,特別是設計領域的初學者或設計師,將個人背景與作品轉化為結構清晰、可重複使用的作品集網站。它提供了一套完整的參考系統,包括頁面模式(page-patterns)和動畫目錄(motion-catalog),讓使用者可以根據實際需求,而非模板,來規劃和建置網站。技能會先協助使用者釐清目標受眾、角色定位、作品內容和偏好的技術棧(如單頁或多頁),然後提出頁面地圖和區塊順序,避免虛構內容,並要求使用者提供真實材料或使用明確標記的佔位符。在實作上,它強調可重複使用的設計原則,例如引導使用者的角色與價值、保持首頁簡潔、使用一致的區塊標題模式與間距尺度,並讓專案頁面採用靈活的順序而非強制一致。對於動畫,它提供經過命名的動畫配方,讓使用者可以用日常語言描述視覺行為後選擇實作,且強調動畫應細緻、有目的且一致,同時尊重使用者的減少動畫偏好,並確保鍵盤與觸控的可用性與無障礙設計。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ZZZoey333/portfoliowebsite-site-builder-skill/tree/HEAD/portfolio-site-builder

在你喜歡的 AI 中提問

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

說明文件

個人作品集網站建置工具

協助使用者將自身的背景與作品轉化為清晰、可重複使用的作品集網站。參考系統以一個真實的多頁面 UI/UX 作品集為基礎,但其視覺識別為可選:保留使用者選擇的風格,僅在適用時使用參考結構。

工作流程

  1. 確定使用者的目標受眾、角色、作品集內容、偏好的技術棧(若有的話),以及他們想要的是單頁還是多頁網站。對於初學者,建議簡單的實作方式,並以白話說明取捨。
  2. 在填入虛構的個人經歷或專案事實之前,先提議頁面地圖和區塊順序。當缺少的內容會改變故事時,請詢問使用者;否則使用清楚標記的佔位符。
  3. 建置參考資料/頁面模式.md中描述的共享外殼和可重複使用的區塊。讓專案案例可設定:使用者可以包含、省略及重新排序相關區塊。
  4. 提供來自參考資料/動畫目錄.md的命名動畫配方。以日常語言描述可視行為,然後使用使用者的技術棧實作所選的配方。不要預設加入所有動畫;使用動畫來釐清層級或互動。
  5. 在使用者的視覺方向上保持一致,涵蓋字體、顏色、間距、圖像和元件。參考網站的調色盤僅為一個起點主題;主題可以改變而無需更改頁面結構。
  6. 使佈局具有回應性,並讓互動可透過鍵盤和觸控方式進行。尊重減少動畫的偏好,提供可見的焦點狀態,並在動畫停用時保持基本內容的可見性。
  7. 總結已交付的頁面/元件和命名動畫,並指出使用者仍需提供的內容。

可重複使用的設計原則

  • 以個人的角色和價值為開端,然後讓選定作品易於被發現。
  • 保持首頁為簡潔的介紹和入口;讓每個案例研究承載自己的敘事和證據。
  • 使用一致的區塊標題模式、間距尺度、導覽、頁尾和專案卡片系統。
  • 讓專案頁面共享靈活的順序,而非強迫每個專案採用相同的內容。
  • 保持動畫細緻、有目的且一致。動畫名稱描述的是可重複使用的行為,而非特定的函式庫或實作方式。
  • 不要將參考資料中的文案、個人資料、專案宣稱、圖片或原始碼複製到新使用者的網站中。要求使用者提供自己的材料,或使用標記過的佔位符。

參考資料

相關技能