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月