Communitygithub.com

jhd3197/AgentSite

個人或工作室的作品集網站 — 醒目的字體開場、專案網格、案例研究連結、聯絡資訊。

AgentSite 是什麼?

這是一個專為個人或工作室設計的網站技能,目標是讓訪客一看就想與你合作。它提供了一套完整的作品集網站結構,包含簡潔的導航欄、大型字體陳述的開場、專案卡片網格、關於本人/工作室的介紹、精選客戶或媒體展示,以及聯絡資訊區塊。該技能強調設計品質,要求使用統一的字體風格、真實的專案名稱與角色標籤,並避免使用輪播、視差或自動播放影片等干擾元素。它適用於任何支援自訂技能的 AI 代理平台(如 Claude Code),開發者只需根據提示填入內容即可快速生成專業的作品集網站,無需從頭搭建框架。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jhd3197/AgentSite/tree/HEAD/agentsite/skills/portfolio

在你喜歡的 AI 中提問

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

說明文件

作品集網站

一個個人或工作室網站,其任務是讓訪客說出「我想和這個人合作。」

必備區塊

  1. 精簡導航欄 — 名稱/識別標誌,3-4 個連結(作品 / 關於 / 文章 / 聯絡)。
  2. 開場 — 大型字體陳述(使用 clamp() 控制顯示大小)。一句話說明你的身分與服務對象,再加上一條輕量的中繼資料列(地點、可接案狀態、現職)。
  3. 專案網格 — 4-9 個案例研究卡片。每張卡片包含:封面圖片 / 色塊、專案名稱、一行角色說明、年份。滑鼠懸停時卡片微微上浮。點擊後導向(模擬的)案例研究網址。
  4. 關於 — 簡短的個人介紹段落 + 照片或簽名標記。
  5. 精選客戶 / 媒體 — 低調的標誌列或清單。如果沒有真實素材,則完全跳過此區塊。
  6. 聯絡 — 電子郵件(mailto 連結),可加上 Twitter/LinkedIn 及日曆預約連結。

品質規則

  • 採用單一決定性的字體風格。如果顯示字體是襯線體,內文字體就用無襯線體(反之亦然)。
  • 專案卡片:使用真實名稱與角色。使用有標籤的佔位文字(例如「[封面圖片 — 請替換為英雄形象]」),而非 Lorem ipsum 標題。
  • 不要輪播、不要視差效果、不要自動播放影片。
  • 空的或「敬請期待」狀態要誠實呈現。不要用假專案填充網格。

相關技能