Part 7：進階擴展與客製化

📝 自訂提示詞模板

# 在 prompt_builder.py 新增專案類型
PROJECT_TYPES = {
    # ... 現有類型 ...
    'mobile_app': {
        'name': '行動應用程式',
        'tech_stack': ['React Native/Flutter', 'Native APIs', 'Backend Integration'],
        'sections': ['UI/UX 設計', '功能開發', '平台整合', '測試部署']
    }
}

<!-- 在 generator.html 新增選項 -->
<select class="form-select" id="project-type">
    <!-- 現有選項 -->
    <option value="mobile_app">行動應用程式</option>
</select>

🤖 整合其他 AI 服務

以整合 Anthropic Claude 為例：

# 1. 在 config.py 添加配置
ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
CLAUDE_MODEL = os.getenv('CLAUDE_MODEL', 'claude-3-opus-20240229')

# 2. 在 AIService 初始化 Anthropic 客戶端
if config.ANTHROPIC_API_KEY:
    import anthropic
    self.anthropic_client = anthropic.Anthropic(api_key=config.ANTHROPIC_API_KEY)

# 3. 新增 Claude 呼叫方法
def _generate_with_claude(self, prompt: str) -> str:
    message = self.anthropic_client.messages.create(
        model=config.CLAUDE_MODEL,
        max_tokens=4096,
        messages=[{"role": "user", "content": prompt}]
    )
    return message.content[0].text

🎨 UI 主題客製化

/* 修改 static/css/main.css 中的 CSS 變數 */
:root {
    --primary-color: #4285f4;   /* 主色調 */
    --secondary-color: #34a853;
    --danger-color: #ea4335;
    --warning-color: #fbbc04;
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
    .card {
        background-color: #2a2a2a;
        border-color: #3a3a3a;
    }
}

🎉 CH5 課程總結