首頁製作技能 v2.0
由來: 實際製作出的成品被判定為「不好看」。於是，我親自打開並測量其他AI服務針對相同主題製作的網站，將優點轉化為用自己語言描述的步驟。 這裡記載的不是個人喜好，而是實際測量值，以及當時我忽略了什麼。
首先要知道的事（這是所有前提）
比較後發現，差異最大的部分在於開始製作前的準備工作。 其中效果最顯著的是下列這一步：
在開始撰寫之前，將設計理念語言化，並連同否定限制一起固定到檔案中。
被比較的對手網站，在其樣式表的開頭簡短寫明了「如何呈現」的原則以及「不做的事」。
（寫法與型態請參考 reference/DESIGN_THESIS.md。Step 0 中使用的格式也在那裡。）
我的失敗版本，正是落入了所謂「不做的事」中的「置中對齊的均等卡片重複」。 只要放任不管，一定會掉入那個陷阱。預先知道這一點並將其禁止，就造成了那樣的差距。
這6點就是全部
- 撰寫前先寫下論述，並固定到檔案中。 對話中的宣言會隨著對話流動而消失。
- 加入2項以上的否定限制。 不指名道姓地禁止預設值，就無法脫離預設值。
- 使用明體＋黑體兩種字體。 只用一種字體，無論做什麼都會變成管理後臺的臉。
- 不要排列置中對齊的均等卡片。 以不對稱方式分割。放置一個深色帶。
- 不可使用0張圖片。 如果沒有素材，就生成它。如果是生成的，必須明確標註「示意圖」。
- 在實際渲染並用自己的眼睛確認之前，不算完成。 「沒有壞掉」並非評價。
⚠ 過去實際發生的意外（3件）
意外1 — 將「沒有壞掉」誤認為「很好」
檢查了是否出現橫向捲軸、表格是否收攏後就出貨了。全都是檢查崩壞的項目，魅力的評估數量為0。 結果變成了一個沒有扣分、但也沒有加分的成品。
檢測法: 當驗證日誌中只有「◯◯沒有出現」「◯◯有收攏」這類項目時，就正在發生此意外。
意外2 — 未經考慮替代方案，就直接接受了「沒有素材」的限制
「無法取得實際照片」→ 直接確定「不使用圖片」。明明可以生成圖片，卻沒有使用。 誠實並非放棄圖片的理由。透過註記來擔保。
檢測法: 如果從成品中遺漏了委託中包含的元素（例如「照片也」等），務必懷疑此情況。
意外3 — 機械檢測全部通過後，用眼睛看時發現了崩壞
verify.py 全部顯示綠燈後，縮小到25%觀看時，發現 h1 在中途換行並崩壞了
（例如 新鮮出爐，送到您／手上。 這種，最後1～2個字元掉到下一行的形式。例句為虛構）。
這是數值檢測絕對無法捕捉到的缺陷類型。
對策: 不要省略 §5 的目視檢查。verify.py 會自動輸出用於目視檢查的圖片。務必要查看。
§1 步驟
Step 0. 撰寫論述（務必在HTML之前，必須執行）
閱讀 reference/DESIGN_THESIS.md。 裡面有6種型態以及否定限制的目錄。
選擇型態 → 將名稱配合主題調整 → 選擇2項以上的否定限制 →
至少將其中1項替換為主題特有的限制 → 將其寫入 template.html 的開頭註解中。
Design: 「◯◯◯◯」— {視覺上的主張一句話}。
Visual rules: {否定限制1}; {否定限制2}; {否定限制3}。
Information rule: {資訊放置方式的規則}。
然後，向委託人宣告一次。如果在這裡感覺到不協調感，可以在開始撰寫前停下來。
◆ 設計方針
論述: 「◯◯」— {主張}／禁止事項: {2項以上的否定限制}
配色: 里山(綠) / 藍 / 陶 ← 選擇其中一個，或重新調配
級數: h1在1280px時為70px ／ h2=51px ／ 邊距: 區塊上下120px
圖片: {實際照片 / 生成插圖N張（附註明為示意圖） / 圖版}
構成: hero → {區塊} → 深色帶 → 事實表 → 結尾
Step 1. 收集事實（對象為實際存在的事物時）
- 優先使用公開資料庫。 法人編號公開網站、各行業的許可・指定公開系統 （由國家或地方政府營運）。層級高於業界入口網站，通常可以取得許可編號・指定編號。 例（虛構）: 在業界入口網站只有名稱和電話號碼的「綠町的◯◯教室」， 其指定編號可以在地方政府的公開頁面上確認 ── 就是這樣使用。
- 如果出處有出入，老實地寫上「表記有差異」並同時列出兩者。 不要默默地偏向其中一方。
- 如果評論數為0，就不要建立評論區。 絕對不要創作。
Step 2. 準備素材（不要以0張圖片的狀態前進）
依序檢討，在可以寫出「無法取得」的理由之前，不要確定「不使用圖片」。
- 從委託人處取得實際照片
- 生成圖片（如果環境中有可用的圖片生成工具，就用它來生成）＋ 務必附上來源註記
- 以圖版・作圖・資料視覺化代替
- 僅以字體編排與色面構成（＝明確表示為刻意選擇）
風格指定與禁止事項請參考 reference/DESIGN_SYSTEM.md §6。不要生成人物臉孔。
生成後要進行網頁用壓縮（實績: 7.4MB → 566KB。不要以每張1.8MB的狀態輸出）。
Step 3. 組合
assets/satoyama.css … 直接 <link>（配色透過 body 的 class 切換）
assets/template.html … 全部替換 {{ }}
務必保留不對稱 hero 與深色帶這兩項。 各區塊的配置請參考 reference/DESIGN_SYSTEM.md §5。
⚠ h1 每行7個字元以內。 超過會在自動換行時崩壞（意外3）。
Step 4. 測量
python ~/.claude/skills/homepage/verify.py path/to/index.html
實際測量論述的有無、否定限制的數量、級數、邊距、圖片張數、字體分離、深色帶、結構的重複、
在3種寬度下是否橫向溢出，並將用於目視檢查的圖片輸出到 _review/ 資料夾。
Step 5. 觀看（不可省略・無法以機械替代）
務必查看 verify.py 輸出的 _review/review-25percent.png 和 review-desktop.png。
- 縮小觀看整體 — 是否保留了層次感。如果全部看起來像同樣灰色的帶狀，表示深色帶或邊距不足。
- 只挑標題閱讀 — 語意是否通順。如果只是陳列目錄詞語，則違反 R-11。
- 單獨觀看第一畫面 — 在不滾動的情況下，是否能傳達出「這是誰的、什麼地方」。
- 尋找崩壞 — 標題換行、溢出、圖片缺損。意外3只有在這裡才能捕捉到。
- 用一句話將好壞語言化。 「沒有崩壞」並非評價。不要在無法語言化的狀態下出貨。
§2 實際測量基準值（與其他AI成品比較後確定）
| 項目 | 基準 | 過去輸出的失敗值 |
|---|---|---|
| 論述存在於檔案中 | 必須 | 無 |
| 否定限制的數量 | ≥2件 | 0件 |
| h1 實際渲染（1280px） | ≥56px（建議70px） | 46px ← clamp()上限達到頂點 |
| h2 實際渲染（1280px） | ≥40px（建議51px） | 30px |
| 區塊上下 padding | ≥100px（建議120px） | 76px |
| 圖片張數 | ≥1（建議4） | 0 |
| 字體 | 標題與本文使用不同字體 | 1種字體 |
| 深色全幅帶 | ≥1處 | 0 |
| 結構多樣性 | 主要區塊中超過半數為不同結構 | 全部相同 |
⚠ 配色數量不成為差異。 失敗版的色票token有15個，優良版的10個更多。 有效的是論述・字體・級數・邊距・圖片・文案。
§3 要求（未滿足則不出貨）
- R-1 標題與本文使用不同字體。日文標題以明體為第一候選。
- R-2 1280px實際渲染中 h1≥56px / h2≥40px。實際測量
clamp()的上限是否達到頂點。 - R-5 桌機版區塊上下 padding ≥100px。資訊量不能成為密度高的理由。
- R-7 不可使用0張圖片（必須經過 Step 2 的4個步驟）。
- R-8 生成圖片必須在可視位置明確標示「示意圖（並非實際的◯◯）」。
- R-9 所有區段不得使用相同模式。必須放置1個以上的深色全幅帶。
- R-11 區段標題不要使用功能標籤。將目錄詞語移至
.label側。 - R-13 不可省略無障礙功能（skip-link / focus可視 / alt / reduced-motion）。
- R-14 將論述固定於檔案開頭，並撰寫2項以上的否定限制。
- R-15 用自己的眼睛閱讀渲染後的圖片，將好壞用一句話語言化後再出貨。
§4 內容禁止事項（處理實際店鋪・設施時）
- 不得創作評論・使用者心聲。 如果為0件，就寫0件，僅放置招募引導。
- 不得將沒有實際照片偽裝成有。 生成圖片必須註記。
- 不得轉載其他網站的圖片・文章。 嵌入（如Instagram官方embed等）則可。
- 不得承諾效果・改善（特別是醫療・福利・教育領域）。僅限於刊載事實。
- 必須在取得委託人許可後才公開。 不得擅自公開以實際組織名義的頁面。 若為練習・檢討用途，請在檔案開頭以註解留下該意旨。
- 處理包含兒童的素材時，務必確認是否可以刊載。
§5 檔案
~/.claude/skills/homepage/
├── SKILL.md 此步驟說明書
├── verify.py 實際測量檢查＋輸出目視用圖片
├── assets/
│ ├── satoyama.css 設計系統本體・包含3種配色
│ ├── template.html 骨架（開頭有論述框架）
│ └── placeholder.svg 即使素材未定也能成立的暫用圖片
└── reference/
├── DESIGN_THESIS.md ★最重要。論述寫法・6種型態・否定限制目錄
└── DESIGN_SYSTEM.md 各數值依據・10種區塊・詞語製作方法
開始工作時的閱讀順序: DESIGN_THESIS.md → DESIGN_SYSTEM.md → template。
僅模仿數值無法再現型態。論述優先。
§6 不使用此體系的情況
管理後臺・儀表板・以比較表為中心的LP・時效性高的公告・遊戲UI・ 已有品牌規定的項目。明朝體的大標題與寬闊邊距會產生反效果。