設計目標

打造結構清晰、視覺層次分明的新聞欄目頁面，適合 CMS 後台套版，強調像素級對齊與可復用組件化思維。

最終效果

逐步構建

1. 外層容器框架

• 圓角矩形工具（半徑 4~6 px）繪製主容器。
• 圖層樣式：描邊 1 px #ddd，內部陰影 1 px #fff（頂部高光）。

2. 欄目標題載體

• 底部矩形上方再繪一長矩形（高 40~50 px），承載欄目名稱。
• 圖層樣式組合：漸層疊加（垂直、淺→深）+ 內發光（白、螢幕、大小 3 px）+ 描邊（1 px、深色、內側）。
• 放大至 200%+ 檢查每條邊緣像素對齊，消除半像素模糊。

3. 文字與資訊排版

• 欄目標題文字置入載體，字號 14~16 px、字重 Medium、顏色深灰 #333。
• 輔助資訊（日期、分類標籤）字號 12 px、顏色中灰 #888。

4. 圖片展示區與摘要區

• 矩形框架（圓角 3 px）置放縮略圖，圖層樣式描邊 1 px #eee。
• 標題 16 px 粗體、摘要 13 px 正文、行高 1.6、顏色 #555。
• 「閱讀更多」連結：色系強調色、懸停態底線/變色。

5. 精細分隔線與互動點綴

• 鉛筆工具（1 px 方頭），筆刷面板 ▸ 間距 200%+，按 Shift 點擊繪製虛線分隔線。
• 顏色需調整時：圖層樣式 顏色疊加 一鍵變色。
• 小方點狀態指示器：鉛筆點 1 px 方塊，Ctrl+J 複製對齊，垂直分佈對齊 自動等距。

組件化交付建議

• 將「標題載體」「圖文卡片」「分隔線」「狀態點」各自建立圖層組，命名規範（如 comp/tab-header）。
• 狀態變體（Normal/Hover/Active/Disabled）並列在組內，可見度切換即可預覽。
• 導出：圖片資產 WebP、SVG 圖示、CSS 變數表（色彩、間距、圓角、陰影）。