# Brand Site

> 做個人品牌網站。當使用者說要做個人網站、一頁式網站、作品集、接案頁、求職頁、線上名片，或是要幫別人做這些的時候使用。會先訪談問出他真正要促成哪一件事，再替他選後端、生站、驗收，最後迴圈優化到受眾覺得有用、使用者覺得是他的為止。六種版面、四種風格、五種會流動的首屏，附四個行業的完整範例。零依賴零 build step。

- Skill: `yazelin/brand-site` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add yazelin/brand-site`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yazelin/brand-site/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yazelin (https://skillmd.com/u/yazelin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yazelin/brand-site

---


# 做一個個人品牌網站

**先讀這個 skill 目錄底下的 `AGENTS.md`，照它跑。** 那份是總控，
五個階段各自的作業指引在 `skills/01-interview/` 到 `skills/05-optimise/`。

**什麼叫做完：受眾覺得這個網站對他有用，而且使用者覺得這個網站是他的。
兩件事同時成立才算，缺一個都不算。**

三件最容易做錯的事，先記住：

1. **先訪談，訪談完成前不准寫任何一行 HTML。** 使用者說「你直接幫我做就好」也一樣。
2. **使用者不知道的事你替他決定**，然後用一句話說你選了什麼、為什麼。
   不要把「要用 Cloudflare 還是 Render」丟回去問他。
3. **每個階段結束停下來給他看過再繼續。**
4. **上線不是結束。** 階段五跑兩邊：用受眾的角度審一輪（這個網站對他有沒有用），
   用使用者的角度驗一輪（這些話是不是他會講的、他敢不敢貼給客戶）。
   兩邊都過才停，每一圈結束回去跟他對齊。
   **受眾的意見用來補，不要用來換掉他的話。**

`docs/` 底下有七份清單，`AGENTS.md` 裡有一張表寫明哪個階段要打開哪一份。
那些是流程的一部分。

**做出來會長什麼樣，看 `examples/`。** 四個行業的完整範例，
每一個都是跑完整條流程做的，而且附上跟中性版對打的票數。
使用者問「會做成什麼樣子」的時候，開那個給他看。

產出放在使用者專案裡的 `site/`，不要改這個 skill 目錄底下的 `templates/`。