圖片邊框設計：提升視覺辨識度

起因

在檢查淺色模式的樣式時，發現文章中間多了一行 footer，覺得很詭異。仔細一看才發現，原來那是網站的截圖；但因為截圖沒有明確的邊線，讓我誤以為那個 footer 是真的 footer，想想還是得為圖片加個邊框會比較適合。

Brainstorming 過程

這次試用 Brainstorming skill，逐步釐清設計需求：

1. 邊框風格選擇

討論了三種可能的風格：

• 類似程式碼區塊 - 深色背景框線
• 類似 inline code - 淺色系邊框
• 獨立框線風格 - 純邊框，不加背景色 <— 選了這個

最終選擇純邊框設計，原因是：

• 圖片本身有內容與顏色，加背景色會干擾視覺
• 細框線能定義邊界而不搶眼
• 更適合在亮暗模式間切換

2. 倒角大小

比較了不同的倒角方案：

• rounded (4px) - 與 inline code 一致
• rounded-md (6px) - 稍微柔和 <— 選了這個
• rounded-lg (8px) - 較大倒角

選擇 6px 倒角，因為圖片比 inline code 大，稍大的倒角視覺上更平衡。

3. 邊框顏色

考慮到 stone 色系與亮暗模式需求：

• stone-200/800 - 對比度較低
• stone-300/700 - 平衡的對比度 <— 選了這個
• stone-400/600 - 對比度較高

最終採用 stone-300 (亮) / stone-700 (暗)，與現有的 inline code 背景色形成協調層次。

4. 邊框粗細與額外效果

• 邊框：選擇 1px 極細邊框，符合極簡風格
• 額外效果：無，不添加陰影或內距

技術實作

CSS 樣式

在 src/styles/global.css 中添加：

/* Image border styling */
.prose :where(img):not(:where([class~='not-prose'] *)) {
  @apply rounded-md border border-stone-300;
}

.dark .prose :where(img):not(:where([class~='not-prose'] *)) {
  @apply border-stone-700;
}

OpenSpec 規範化流程

這次也採用了 OpenSpec 工作流程：

1. Proposal 階段 - 建立 add-image-border-styling 變更提案

   • 根據前一步的 Brainstorming 結果撰寫 spec
   • 撰寫實作任務清單
   • 建立 content-styling spec

2. Implementation 階段 - 按照 tasks.md 逐項完成

   • 添加 CSS 樣式
   • 開發模式測試
   • 建置與預覽驗證
   • 更新文件

3. Archive 階段 - 封存並提交

   • 將 spec deltas 合併到 openspec/specs/
   • 移動變更到 archive
   • 分離提交：樣式實作 + 文件更新

成果展示

淺色模式效果

• 圖片周圍有清晰的 stone-300 邊框
• 6px 倒角與整體設計協調
• 視覺層次分明

深色模式效果

• 邊框自動切換為 stone-700
• 在深色背景下依然清晰可見
• 保持一致的視覺語言

總結

雖然這次的改動幅度很小，但用上了 BrainStorming 加上 OpenSpec 的工作流程，挺有趣的。未來大一點的修改應該比較不會走鐘了。

不過我用的是Gihub Copilot with VS Code，他的計費方式比較不適合這樣來回討論的方式，會消耗太多次數。

這次用的模型是 Claude Sonnet 4.5，在一個 Session 內完成。包含 commit 變更與產出這篇文章的架構草稿，使用了 58.1k tokens。大約消耗 3% 的 copilot 額度。