美術風格統一參考表（項目色系 & AI 提示詞速查）

夕桜白雪

站點建設中

第一階段先固定內容結構、分類與部署流程；線上後台暫不加入，保持純靜態與 Git 可追蹤。

查看規劃

標籤

夕桜白雪

站點建設中

第一階段先固定內容結構、分類與部署流程；線上後台暫不加入，保持純靜態與 Git 可追蹤。

查看規劃

標籤

夕桜白雪

站點建設中

第一階段先固定內容結構、分類與部署流程；線上後台暫不加入，保持純靜態與 Git 可追蹤。

查看規劃

標籤

915 字

3 分鐘

美術風格統一參考表（項目色系 & AI 提示詞速查）

2026-06-11

視覺設計

/

參考表

/

色系

/

規格

專案色系統 (OKLCH 色值)#

本項目採用現代化的 OKLCH 色彩空間，適應亮暗模式自動切換。

主色板（動態根據 `--hue` 變數調整）#

1
--primary:
2
  Light:  oklch(0.70 0.14 var(--hue))
3
  Dark:   oklch(0.75 0.14 var(--hue))
4

5
--page-bg:
6
  Light:  oklch(0.95 0.01 var(--hue))  # 接近白色
7
  Dark:   oklch(0.16 0.014 var(--hue)) # 深色背景
8

9
--card-bg:
10
  Light:  white
11
  Dark:   oklch(0.23 0.015 var(--hue))

建議色調組合#

名稱	Hue 值	Light 示例	Dark 示例	用途
冰藍（Ice Blue）	205°	oklch(0.70 0.14 205)	oklch(0.75 0.14 205)	主色
薄紫（Lavender）	250°	oklch(0.70 0.14 250)	oklch(0.75 0.14 250)	強調色
薄荷綠（Mint）	160°	oklch(0.70 0.14 160)	oklch(0.75 0.14 160)	補色
粉紅（Pale Pink）	10°	oklch(0.70 0.14 10)	oklch(0.75 0.14 10)	暖色調

當前項目設定（查看 siteConfig.ts）：

1
themeColor: {
2
  hue: 205,  // 冰藍色系
3
  fixed: false  // 允許動態切換
4
}

資源規格與尺寸對應#

1. Desktop Banner（2400 × 1000）#

1
用途：首頁寬螢幕背景，需留邊安全區
2
寬高比：12:5 (2.4:1)
3
位置：/public/assets/desktop-banner/
4
檔案數：4 張 (1-4.webp)
5
目標檔案大小：300-400 KB

AI 提示詞優化：

1
masterwork, best quality, 8k, anime wallpaper, detailed background,
2
cozy pastel bedroom, plushies, fairy lights, soft cinematic lighting,
3
warm atmosphere, shiratama style, moe aesthetic, panoramic view,
4
pastel pink and lavender and cream palette, translucent effect,
5
bokeh, high readability composition for text overlay
6
--ar 16:9 --quality 2

安全區提示：

1
左側預留 10% | 中央 80% | 右側預留 10%
2
上方預留 15% | 中央 70% | 下方預留 15%
3
（主體應避免壓在中央文字重疊區）

2. Mobile Banner（1200 × 1800）#

1
用途：手機版首頁背景，保持縱向構圖
2
寬高比：2:3
3
位置：/public/assets/mobile-banner/
4
檔案數：4 張 (1-4.webp)
5
目標檔案大小：200-300 KB

AI 提示詞優化：

1
masterwork, best quality, 8k, cute anime girl, soft pastel aesthetic,
2
standing pose, full body, looking downward, gentle expression,
3
soft lighting, dreamy atmosphere, pastel pink and white palette,
4
vertical composition, portrait-friendly, cozy interior,
5
shiratama style, translucent feel, bokeh background
6
--ar 2:3 --quality 2

構圖建議：

1
安全區上方：主要焦點（頭部、上身）- 避免被導航欄遮蓋
2
中間：次要內容 - 留白以容納內容
3
下方：可忽略細節 - 會被應用欄遮蓋

3. 文章封面（1600 × 900）#

1
用途：文章卡片、OG 圖片、首頁特色文章
2
寬高比：16:9
3
檔案大小目標：250-350 KB
4
格式：WebP

AI 提示詞優化：

1
masterwork, best quality, anime visual novel key visual,
2
1girl, cute girl character, sparkling eyes, gentle expression,
3
pastel pink and blue palette, soft lighting, dreamy atmosphere,
4
single subject focus, clean composition, minimal clutter,
5
shiratama style, moe aesthetic, readable text area preserved
6
--ar 16:9 --quality 2

4. 頭像 / Profile（800 × 800）#

1
用途：頁面角色卡片、作者信息頭像、社群分享
2
寬高比：1:1（方形）
3
檔案大小目標：100-150 KB
4
位置：/src/assets/images/ 或相關目錄

AI 提示詞優化：

1
masterwork, best quality, 1girl, cute anime girl,
2
sparkling big eyes, soft blush, gentle smile,
3
soft pastel pink hair, twintails, fluffy fox ears,
4
wearing cute lolita-inspired dress with ribbons,
5
upper body, portrait, looking at viewer,
6
soft lighting, pastel palette, delicate linework,
7
shiratama style, moe aesthetic, clean white background
8
--ar 1:1 --quality 2

最佳實踐：

臉部占據至少 50% 的畫面
背景簡潔（純白或低對比）
表情溫柔、眼神清晰
避免過多細節背景

AI 繪圖提示詞核心模塊（快速組合）#

模塊 A：品質與基調#

1
masterwork, best quality, 8k resolution, anime art

模塊 B：風格致敬#

1
shiratama style  OR  miyase mahiro style  OR  cute anime visual novel

模塊 C：色調與光影#

1
soft pastel pink and lavender and cream palette,
2
soft lighting, dreamy atmosphere, volumetric lighting

模塊 D：角色特徵（任選 3-5 項）#

1
1girl, sparkling big eyes, soft wavy hair, twintails,
2
innocent smile, white fluffy fox ears, delicate face,
3
gentle expression

模塊 E：服裝配件#

1
cute lolita-inspired dress, delicate lace, ribbons,
2
elegant aesthetic, pastel colors

模塊 F：背景與場景#

1
# 背景簡潔型
2
simple white background, bokeh
3

4
# 環境型
5
cozy cafe interior, soft bokeh, warm lighting
6

7
# 自然型
8
pastel sky with fluffy clouds, ethereal, minimalist

模塊 G：技術參數與尺寸#

1
--ar 16:9      # 寬景用
2
--ar 1:1       # 頭像用
3
--ar 2:3       # 手機豎向用
4
--quality 2    # 高品質（Midjourney）
5
--style raw    # 保持原始風格

負面提示詞（必填）#

1
lowres, bad anatomy, bad hands, text, error, missing fingers,
2
extra digits, cropped, worst quality, low quality, jpeg artifacts,
3
signature, watermark, blurry, realistic, 3d, harsh lighting,
4
distorted, deformed, extra limbs, censored, mosaic

快速組合範例#

快速組合 #1：標準頭像#

1
masterwork, best quality, 1girl, cute anime girl,
2
sparkling big eyes, soft pastel pink hair, twintails, innocent smile,
3
fluffy fox ears, lolita dress, soft lighting, pastel palette,
4
shiratama style, upper body, portrait, looking at viewer
5
--ar 1:1 --quality 2
6

7
負面提示詞：lowres, bad anatomy, realistic, 3d, harsh lighting, distorted

快速組合 #2：寬景背景#

1
masterwork, best quality, 8k, anime wallpaper, cozy bedroom,
2
plushies, fairy lights, soft warm lighting, pastel colors,
3
dreamy atmosphere, shiratama style, moe aesthetic,
4
panoramic view, bokeh, translucent feel, high readability
5
--ar 16:9 --quality 2
6

7
負面提示詞：lowres, realistic, 3d, harsh lighting, dark colors, cluttered

快速組合 #3：文章封面#

1
masterwork, best quality, anime visual novel key visual,
2
1girl, gentle expression, sparkling eyes, cute aesthetic,
3
pastel pink and blue palette, soft lighting, dreamy,
4
single subject, clean composition, readable space,
5
shiratama style, delicate linework
6
--ar 16:9 --quality 2
7

8
負面提示詞：lowres, realistic, 3d, harsh lighting, cluttered, too many elements

專案配置檢查清單#

色系設定#

OKLCH 主色設定在 src/styles/variables.styl
--hue: 205 （冰藍色系）
亮暗模式自動切換
所有組件使用 CSS 變數

背景資源#

Desktop Banner: /public/assets/desktop-banner/ (4 張)
Mobile Banner: /public/assets/mobile-banner/ (4 張)
Wallpaper 配置：src/config/backgroundWallpaper.ts
旋轉間隔：5 秒

美術指南#

既有指南：original-style-guide.md
新 AI 提示詞指南：ai-prompt-modular-guide.md
本快速參考表

設計文檔#

CSS 樣式指南：docs/rule/04-css-style-guide.md
組件架構：docs/rule/01-component-architecture.md

內容創作流程#

當生成新素材時：#

選擇尺寸與用途
- Desktop Banner (2400×1000) → 模塊 A+B+C+F (寬景)
- Mobile Banner (1200×1800) → 模塊 A+B+C+E+F (人物)
- 文章封面 (1600×900) → 模塊 A+B+C+D+E
- 頭像 (800×800) → 模塊 A+B+C+D+E (上身)
選擇工具
- Midjourney：最快穩定，推薦用於快速迭代
- Stable Diffusion：本地化，適合微調
- NovelAI：二次元特化，效果優秀
使用對應模塊組合 提示詞
填入負面提示詞 以確保品質
生成後檢查
- 色彩是否符合 OKLCH 調性
- 解析度與尺寸是否正確
- 是否符合「柔和、透明、低飽和」的站點美學
必要時微調
- Photoshop 調色（Color Balance、Hue/Saturation）
- Figma 疊層與字體排版
- WebP 壓縮至目標大小

進階技巧#

提升生成質量#

1
增加 "masterwork", "best quality" 的重複
2
使用 "8k resolution" 強制高精度
3
加入 "detailed linework" 或 "intricate details"

改善角色一致性#

1
如果生成多個相同角色，可在提示詞中加入：
2
"consistent character design", "same girl", "character reference"

微調風格強度#

1
弱化風格：減少 "shiratama style" 等風格詞
2
強化風格：重複提及或使用 "in the style of..."

色彩精準化#

1
不要使用 "pink" (太寬泛)
2
改用 "soft pastel pink", "rose", "light pink", "pale pink"
3
同理：blue → ice blue, sky blue, pale blue

問題排除#

問題	原因	解決方案
色彩太鮮豔	飽和度設定過高	加入 `low saturation, pastel, soft colors`
五官畸形	模型不熟悉細節	加入 `detailed face, perfect anatomy` 到提示詞頭
過於寫實	風格詞不足	強化 `anime, moe aesthetic, visual novel`
背景太複雜	沒有簡化背景	加入 `simple background, bokeh, minimal`
尺寸不對	寬高比設定錯誤	檢查 `--ar` 參數（16<9>, 1<1>, 2<3>）
發色不對	顏色詞順序或優先級	將髮色放在提示詞前 20 個字內

相關檔案導引#

1
項目根目錄
2
├── src/
3
│   ├── styles/
4
│   │   └── variables.styl          # OKLCH 色系定義
5
│   ├── config/
6
│   │   ├── backgroundWallpaper.ts  # Banner 配置
7
│   │   └── siteConfig.ts           # 主色 hue 設定
8
│   └── content/posts/visual-design/
9
│       ├── original-style-guide.md          # 原始風格指南
10
│       ├── ai-prompt-modular-guide.md       # AI 提示詞模塊化指南（本篇新增）
11
│       └── visual-style-reference.md        # 本快速參考表
12
├── public/assets/
13
│   ├── desktop-banner/             # Desktop 背景 (4 張)
14
│   └── mobile-banner/              # Mobile 背景 (4 張)
15
└── docs/rule/
16
    └── 04-css-style-guide.md       # CSS 樣式規範