Vibe Coding 魔法提示詞庫

🎯 掌握Vibe Coding的核心框架

S.C.A.F.F. 提示詞結構

掌握與AI對話的藝術，讓程式設計變得簡單而有趣。使用以下框架構建高質量的提示詞：

S (Situation) - 定義上下文環境：你在做什麼專案？
C (Challenge) - 明確指定任務：具體要實現什麼功能？
A (Audience) - 識別使用者：誰會使用這個功能？
F (Format) - 指定程式碼結構：用什麼技術棧和模式？
F (Final) - 最終期望：期待什麼樣的結果？

📝 精選提示詞模板

1. 生成優質設計網站

# 1. 你的任务
## 1.1 目标描述
- 根据我的描述，帮我创建一个设计出色，内容丰富，用户体验友好的网站。
- 网站主题：{把你的需求写在这里}

# 2. 工作流程
## 2.1. 基础设计理念
- 响应式设计适配各种设备
- 精心设计的导航与信息架构
- 恰当的留白与视觉层次

## 2.2. 技术架构
- 使用现代化前端框架（React/Vue/Next.js）
- 实施移动优先设计策略
- 确保优秀的性能与加载速度

## 2.3. 视觉设计要求
### 2.3.1. 布局与结构
- 清晰的视觉层级
- 合理的内容分组
- 流畅的用户引导

### 2.3.2. 交互设计
- 平滑的动画过渡
- 直观的用户反馈
- 精心设计的微交互

### 2.3.3. 内容呈现
- 高质量的文案撰写
- 恰当的多媒体元素
- 数据可视化（如需要）

### 2.3.4. 主题与风格偏好
- 色彩与可读性：避免常见的千篇一律紫色或纯蓝主色，优先选择更具辨识度的中性色或高品质品牌色方案，并保持对比度与可读性达标。
- 内容表现：避免使用 emoji！！！当需要图标时，可以生成独特设计的svg图表，或者从引入以下图标库：Lucide、Heroicons、Tabler Icons
- 避免留下任何空白的占位符，该出现图片的地方都应引入开源图片资源

2. 修改網站設計

# 0. 目标与方法
## 0.1 任务说明
- 我们当前的网站设计质量不佳。请**借鉴艺术家/建筑师/工业设计师**的"风格与感觉"，进行**提炼与融合**后改造网站视觉与交互。
- 仅**借鉴气质与方法**，禁止临摹或再现具体作品。
- 新建一个文件存放优化后的代码以方便我们对比前后设计

## 1. 灵感来源
### 1.1 选择3位设计师/艺术家
- 选择在色彩、形式或概念上与网站主题有潜在关联的创作者
- 跨领域选择（如：建筑×工业设计×数字艺术）
- 避免选择同一风格流派或时期的创作者

### 1.2 提炼设计语言
- 从每位创作者提取1-2个核心设计原则
- 将这些原则转化为可应用的设计规则
- 构建融合后的新设计系统

## 2. 设计改造规则
### 2.1 必须遵守
- 保持原网站的核心功能完整
- 确保可访问性和响应式设计
- 维持或提升加载性能

### 2.2 严格禁止
- 不复刻具体作品的构图、配色、字体组合、标语或品牌元素
- 不生成与原作高度相似的页面布局或元素组合

## 2.3 交付写法
- "来自 {姓名} 的启发 → 页面实现：{具体可编码做法}；

3. App原型設計

我想开发一个{在这里描述想开发的应用名称和功能需求}。现在需要输出高保真的原型图，请通过以下方式帮我完成app主页界面的原型设计，并确保该原型界面可以直接用于开发：

1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。

2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。

3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。

4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。

拆分代码文件，保持结构清晰：
- index.html（主页）
- styles.css（样式文件）
- app.js（交互逻辑）

设计要求：
- 配色方案：采用现代化的设计系统（如 Material Design 或 Human Interface Guidelines）。
- 图标选择：使用高质量的开源图标库，让界面更加精致。
- 字体设计：选择适合移动端的字体，确保良好的可读性。
- 真实感增强：
  - 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
  - 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
  - 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。

请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。

4. iOS App開發助手

# Role
你是一名精通iOS开发的高级工程师，拥有20年的移动应用开发经验。你的任务是帮助一位不太懂技术的初中生用户完成iOS应用的开发。你的工作对用户来说非常重要，完成后将获得10000美元奖励。

# Goal
你的目标是以用户容易理解的方式帮助他们完成iOS应用的设计和开发工作。你应该主动完成所有工作，而不是等待用户多次推动你。

# Workflow
1. **需求分析**
   - 深入理解用户的应用想法
   - 提炼核心功能和用户故事
   - 确定目标用户群体

2. **技术方案**
   - 选择合适的iOS开发框架（SwiftUI或UIKit）
   - 设计数据模型和应用架构
   - 规划第三方库的使用

3. **UI/UX设计**
   - 遵循Apple Human Interface Guidelines
   - 创建直观的导航流程
   - 设计美观的界面布局

4. **代码实现**
   - 编写清晰、注释完整的Swift代码
   - 实现所有核心功能
   - 处理边缘情况和错误

5. **测试优化**
   - 编写单元测试和UI测试
   - 优化应用性能
   - 确保在不同设备上的兼容性

# Additional Guidelines
- 使用简单易懂的语言解释技术概念
- 提供详细的代码注释
- 创建完整的项目文件结构
- 更新README.md文件，包括新增功能说明和优化建议
- 考虑使用iOS的高级特性，如ARKit、Core ML等来增强应用功能
- 优化应用性能，包括启动时间、内存使用和电池消耗

在整个过程中，始终参考[Apple开发者文档](https://developer.apple.com/documentation/)，确保使用最新的iOS开发最佳实践。

🚀 使用技巧

如何使用這些提示詞

選擇合適的模板：根據你的具體需求選擇相應的提示詞模板
自定義內容：將花括號 {} 中的內容替換為你的實際需求
迭代最佳化：根據AI的回覆，逐步細化你的要求
保持對話：與AI保持連續對話，不斷最佳化結果

提示詞最佳化建議

具體明確：越詳細的描述越容易得到滿意的結果
分步進行：複雜任務可以分解成多個小步驟
提供示例：如果可能，提供參考示例或期望的輸出格式
反饋迴圈：及時告訴AI哪些部分需要調整

常見問題

Q: AI生成的程式碼有bug怎麼辦？ A: 直接將錯誤資訊複製給AI，讓它幫你除錯和修復。

Q: 如何讓AI生成更專業的程式碼？ A: 在提示詞中明確指定編碼規範、設計模式和最佳實踐。

Q: AI理解錯了我的需求怎麼辦？ A: 重新組織語言，使用更具體的描述，或提供類似的參考案例。

📚 學習資源

💡 貢獻與反饋

如果你有更好的提示詞模板，歡迎透過以下方式貢獻：

在GitHub上提交Pull Request
在YouTube影片下方留言
加入我們的社羣討論

最後更新時間：2025年1月

🎯 掌握Vibe Coding的核心框架​

S.C.A.F.F. 提示詞結構​

📝 精選提示詞模板​

1. 生成優質設計網站​

2. 修改網站設計​

3. App原型設計​

4. iOS App開發助手​

🚀 使用技巧​

如何使用這些提示詞​

提示詞最佳化建議​

常見問題​

📚 學習資源​

💡 貢獻與反饋​