1355 字
4 分鐘
視覺設計文檔索引與使用指南
文檔地圖
核心美術規範
| 文檔 | 用途 | 適合對象 | 更新日期 |
|---|---|---|---|
| 原始視覺規範 | 站點整體風格定義、色系、光線、角色圖規格 | 所有團隊成員 | 2026-06-10 |
| AI 繪圖提示詞指南 | 詳細的 Midjourney/SD/NovelAI 提示詞模塊化教學 | UI/UX 設計師、內容創作者 | 2026-06-11 |
| 美術風格快速參考 | OKLCH 色值、尺寸規格、快速提示詞組合 | 所有美術工作者 | 2026-06-11 |
使用場景速查
我需要…
生成新的視覺素材
了解站點色系與配置
→ 查看 快速參考表 - 專案色系統
快速組合提示詞
→ 跳至 快速參考表 - 快速組合範例
排查生成問題
→ 查看 快速參考表 - 問題排除
深入學習提示詞工程
→ 完整讀取 AI 繪圖提示詞指南
提示詞速抄卡
基礎必加
masterwork, best quality, 8k, anime art, shiratama style, moe aesthetic色系必加
soft pastel pink and ice blue and lavender palette,soft lighting, dreamy atmosphere, translucent尺寸（選一）
--ar 16:9 (Desktop Banner, 文章封面)--ar 1:1 (頭像)--ar 2:3 (Mobile Banner)負面提示詞（必填）
lowres, bad anatomy, bad hands, realistic, 3d,harsh lighting, distorted, deformed, extra limbs, censored相關配置檔案
src/├── styles/│ └── variables.styl # OKLCH 色系定義├── config/│ ├── backgroundWallpaper.ts # Banner 背景配置│ └── siteConfig.ts # 站點主色 (hue: 205)└── content/posts/visual-design/ ├── original-style-guide.md # 原始規範 ├── ai-prompt-modular-guide.md # AI 提示詞指南 (本篇新增) ├── visual-style-reference.md # 快速參考 (本篇新增) └── visual-design-index.md # 本索引檔
public/assets/├── desktop-banner/ # Desktop 背景 4 張├── mobile-banner/ # Mobile 背景 4 張└── ...
docs/rule/└── 04-css-style-guide.md # CSS 樣式規範風格參數一覽表
色系參數
| 參數 | 值 | 說明 |
|---|---|---|
| 主色調 | --hue: 205 | 冰藍色系 |
| 色彩空間 | OKLCH | 現代化、亮暗模式友善 |
| 飽和度 | 0.14 (一般), 0.10 (淡色) | 低飽和，柔和感 |
| Light 亮度 | 0.70-0.95 | 亮模式使用 |
| Dark 亮度 | 0.16-0.75 | 暗模式使用 |
背景資源參數
| 資源 | 尺寸 | 數量 | 更新間隔 | 路徑 |
|---|---|---|---|---|
| Desktop Banner | 2400 × 1000 | 4 張 | 5 秒旋轉 | /public/assets/desktop-banner/ |
| Mobile Banner | 1200 × 1800 | 4 張 | 5 秒旋轉 | /public/assets/mobile-banner/ |
| 檔案格式 | WebP | - | - | - |
新增內容說明
為什麼增加 AI 提示詞指南？
本站既有的 original-style-guide.md 是很好的設計方向，但缺少：
- 具體的 AI 工具使用教學
- 不同平台（Midjourney/SD/NovelAI）的差異
- 結構化的提示詞模塊
新增文檔填補這些空缺，讓設計師能夠： 快速生成符合站點風格的素材 理解為何這樣組合提示詞 在不同工具間靈活切換
新增文檔的關係
original-style-guide.md ├─ 是什麼？站點的美術方向性文檔 └─ 用途：定義整體視覺語言
ai-prompt-modular-guide.md ├─ 是什麼？深度教學文檔 ├─ 用途：教會人們如何用 AI 工具執行風格 └─ 基礎：建立在 original-style-guide 之上
visual-style-reference.md ├─ 是什麼？快速參考與速查表 ├─ 用途：工作中隨時查閱（不需要讀完整文檔） └─ 包含：色值、規格、範例、除錯快速開始（3 分鐘）
第一次生成素材？
-
決定尺寸 → Desktop Banner (2400×1000)、Mobile (1200×1800)、頭像 (800×800)
-
打開 快速參考表 → 找到對應尺寸的「快速組合」章節
-
複製對應的提示詞模板
例如頭像就複製「快速組合 #1：標準頭像」 -
在 Midjourney/Stable Diffusion 中執行
/imagine [複製的提示詞] --ar 1:1 --quality 2 -
生成完成後檢查
- 色系是否符合「冰藍 + 粉白 + 薄紫」？
- 尺寸是否正確？
- 是否符合「柔和、透明、低飽和」？
進階工作流
對於需要細調的工作
- 完整閱讀 AI 繪圖提示詞指南
- 理解五個核心模塊：品質、風格、色系、角色、背景
- 根據需求自由組合
- 使用進階技巧 改進結果
對於設計主管
- 統一所有資源 → 使用本索引檔確保團隊用統一的提示詞與色系
- 定期回顧 → 檢查新生成素材是否符合 OKLCH 色板
- 持續迭代 → 根據反饋更新提示詞模塊
統一美術風格檢查清單
在提交任何新素材前，確保符合以下條件：
- 色系 - 主色符合冰藍 (hue: 205) 或既有配色
- 飽和度 - 是否保持「低飽和、柔和」的感覺
- 光線 - 是否帶有軟光、透明感
- 尺寸 - 解析度與長寬比符合規格表
- 風格 - 是否體現「日系軟萌、美少女、可愛」
- 文字可讀性 - 背景是否不會干擾文字顯示
- 格式 - 是否為 WebP 格式，檔案大小在目標內
常見問題
Q: 我完全不懂 AI 提示詞，怎麼開始？ A: 先看 快速參考表，複製「快速組合範例」直接用。都是現成的。
Q: Midjourney、Stable Diffusion、NovelAI 應該用哪個？ A: 查看 AI 繪圖指南 - 工具差異。一般推薦 Midjourney 最穩定快速。
Q: 生成的色彩不符合站點色系怎麼辦？ A: 用 Photoshop 的「色彩平衡」或「色相飽和度」微調，目標是靠近 OKLCH 冰藍色。
Q: 我想自訂風格，但保持統一性怎麼做？
A: 修改 快速參考表 的模塊，例如改變風格致敬對象（從 shiratama style 改為 miyase mahiro style），但保持色系、光線、飽和度不變。
推薦閱讀順序
對於專案管理者
- 本索引檔（ 你正在讀 ）
- 原始視覺規範 (5 分鐘)
- 快速參考表 - 核心模塊章節 (3 分鐘)
對於設計師 / 內容創作者
- 本索引檔
- 快速參考表 (完整讀取, 10 分鐘)
- AI 繪圖提示詞指南 (30 分鐘深入學習)
- 原始視覺規範 (5 分鐘背景知識)
對於開發人員 / 技術美術
- 原始視覺規範
- 快速參考表 - 色系與配置
- 查看
src/styles/variables.styl與src/config/中的實際配置
最後提醒： 這三份文檔相輔相成，不必全部精讀。根據自己的角色挑選最相關的部分即可。
分享
如果這篇文章對你有幫助，歡迎分享給更多人！
部分資訊可能已經過時
相關文章 智能推薦
1
視覺設計 — 我們一起創作
視覺設計 夕桜白雪美術風格的所有資源導引，從色系、尺寸到提示詞，找到妳需要的
2
原創視覺規範：透明感、柔光與低飽和色
視覺設計 建立站點統一美術方向，用原創語彙描述日系透明感。
3
美術風格統一參考表（項目色系 & AI 提示詞速查）
視覺設計 Mizuki 項目視覺風格速查表，包含 OKLCH 色系數值、AI 提示詞模塊和資源規格
4
AI 繪圖提示詞模組化指南（日系軟萌美術風格）
視覺設計 將白玉、宮瀬まひろ、なつめえり等風格整合成結構化 AI 繪圖提示詞，含 Midjourney、Stable Diffusion、NovelAI 最佳實踐
5
用 AI 創作夕桜白雪的風格
視覺設計 把白玉、宮瀬まひろ、なつめえり 的柔和美感融入 AI 繪圖提示詞，一起創作心中理想的視覺素材