目录
前言——回顾我们的“初阶武林秘籍”
相信大家已经领会到了 写好提示词，借助AI力量 的重要性，这就是我们想传授给你的 初阶武林秘籍 ，此时你已经拥有了和 AI对话创作 的能力。
我该如何确定我的需求属于前端开发，还是后端开发，还是两者都要涉及呢？
接下来，就让我们传授大家AI辅助编程的 高阶心法——构建自己应用的方法论 ！接下来的内容中：你将学会：
-
如何用AI辅助自己发散灵感，进行头脑风暴
-
如何用AI辅助自己明确“风暴”之上的需求
-
如何用AI辅助自己实现和完善需求基础之上的功能
开始高阶心法——构建自己应用的方法论
也许大家会问， 为什么不直接讲构建应用的方法论，而是让我们先学习提示词工程，学会借助AI的力量呢？
有一句古话说的好， “合抱之木，生于毫末” 。既然是 方法论 ，必然有 底层原理 支撑，我们要想构建自己的应用，就必然遵循一定的 章法或程序 ，而我们所遵循的 章法或程序 ， 底层原理来自于我们对于“提示词工程”的掌握。
-
只有掌握了 “提示词工程” ，我们才能 “借助AI的力量，与AI对话”
-
只有 掌握了与“与AI对话”的能力 ，我们才能 “让AI辅助我们” ：
-
发散我们的灵感
-
明确灵感之上的需求
-
实现和完善需求基础上的功能
-
发散灵感
通过AI辅助，得到了能够落地实现的“灵感”—— 专注于隐私保护和基于时间的个人成长记录 。接下来，我需要通过AI辅助，明确灵感之上的需求。
实现和完善需求基础上的功能
开发需要遵循 前后端分离 的原则，AI辅助编程也不例外，这里以前端单页设计作为演示，由于上述AI回应的前端框架“react和vue”涉及到的前置知识较多也较为复杂，因此实际提示词演示仍为html、tailwind css和javascript为主：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>情绪游戏</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f7fafc;
}
.story-container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="story-container">
<h1 class="text-2xl font-bold mb-4">情绪之旅</h1>
<p id="story-text" class="mb-4"></p>
<button id="next-btn" class="px-4 py-2 bg-blue-500 text-white rounded">下一步</button>
<button id="continue-btn" class="px-4 py-2 bg-green-500 text-white rounded mt-2 hidden">继续玩</button>
<div class="mt-6">
<h2 class="text-xl font-semibold mb-2">情绪控制</h2>
<div class="flex items-center">
<span class="mr-2">焦虑:</span>
<input type="range" id="anxiety-slider" min="0" max="100" value="50">
</div>
<div class="flex items-center mt-2">
<span class="mr-2">困惑:</span>
<input type="range" id="confusion-slider" min="0" max="100" value="50">
</div>
</div>
<div class="mt-6">
<h2 class="text-xl font-semibold mb-2">剧情记录</h2>
<textarea id="story-log" rows="10" class="w-full p-2 border rounded" readonly></textarea>
</div>
</div>
<div id="story-section">
<p id="story-text"></p>
<textarea id="story-log" readonly></textarea>
<button id="continue-btn" class="hidden">继续玩</button>
</div>
<div id="hint-section" class="hidden"></div>
<script src="game.js"></script>
</body>
</html>HTML结构
- 头部（
<head>）部分：- 设置了字符编码为UTF-8。
- 设置了视口，以确保页面在移动设备上有良好的显示效果。
- 引入了Tailwind CSS库（版本2.2.19），用于快速实现样式设计。
- 定义了一些自定义样式，主要用于设置页面的字体、背景色以及故事容器的样式。
- 主体（
<body>）部分：- 包含一个主要的故事容器（
<div class="story-container">），其中包含了游戏的标题、故事文本、按钮、情绪控制滑块和剧情记录文本框。- 标题：使用
<h1>标签显示“情绪之旅”。 - 故事文本：使用
<p id="story-text">标签来动态显示故事内容（初始为空）。 - 按钮：
- “下一步”按钮（
<button id="next-btn">），用于推进故事。 - “继续玩”按钮（
<button id="continue-btn">），初始状态为隐藏，可能在某些情况下显示以允许用户继续游戏。
- “下一步”按钮（
- 情绪控制：包含两个滑块，分别用于控制“焦虑”和“困惑”的情绪值。
- 剧情记录：使用
<textarea id="story-log" readonly>来显示游戏的剧情记录，用户不能编辑。
- 标题：使用
- 包含一个主要的故事容器（
总的来说，这个HTML页面是一个情绪管理或互动故事游戏的基础框架，通过JavaScript可以实现丰富的游戏逻辑和交互效果。
document.addEventListener('DOMContentLoaded', () => {
const storyText = document.getElementById('story-text');
const nextBtn = document.getElementById('next-btn');
const continueBtn = document.getElementById('continue-btn');
const storyLog = document.getElementById('story-log');
const anxietySlider = document.getElementById('anxiety-slider');
const confusionSlider = document.getElementById('confusion-slider');
const hintSection = document.getElementById('hint-section'); // 假设页面上有一个用于显示提示的section
const story = [
"主角发现自己只有20岁的生命，感到无比焦虑。",
"他开始思考自己的未来，困惑于时间的短暂。",
"在一次散步中，他遇到了一个智者，智者给了他一些建议。",
"智者说：'珍惜当下，活出精彩。' 主角若有所思。",
"主角决定用剩下的时间去做自己热爱的事情，不再焦虑。"
];
let currentStep = 0;
function updateStory() {
storyText.textContent = story[currentStep];
storyLog.value = `${currentStep + 1}. ${story[currentStep]}\n` + storyLog.value.split('\n').slice(0, -1).join('\n') + '\n'; // 更新日志，保持最新在上
console.log(`焦虑: ${anxietySlider.value}, 困惑: ${confusionSlider.value}`);
}
nextBtn.addEventListener('click', () => {
if (currentStep < story.length - 1) {
currentStep++;
updateStory();
} else {
nextBtn.classList.add('hidden');
continueBtn.classList.remove('hidden');
}
});
continueBtn.addEventListener('click', () => {
// 重置故事，并添加新元素
currentStep = 0;
storyLog.value = '欢迎再次游玩！新的旅程即将开始...\n'; // 添加欢迎消息到日志
updateStory();
// 显示一个新的提示
const hintElement = document.createElement('div');
hintElement.textContent = "提示：在故事中做出选择时，请仔细考虑你的情感反应。";
hintSection.innerHTML = ''; // 清空之前的提示
hintSection.appendChild(hintElement);
nextBtn.classList.remove('hidden');
continueBtn.classList.add('hidden');
});
// 初始化故事
updateStory();
// 初始隐藏提示部分（如果页面加载时没有提示）
hintSection.classList.add('hidden');
// 假设我们想在游戏开始时显示一个初始提示
const initialHint = document.createElement('div');
initialHint.textContent = "提示：点击‘下一步’继续故事。";
hintSection.classList.remove('hidden'); // 如果需要初始提示，则移除隐藏类
hintSection.appendChild(initialHint);
});代码结构
- 事件监听器：
document.addEventListener('DOMContentLoaded', () => {...})：确保在DOM完全加载后执行代码，防止在元素未加载时尝试访问它们。
- 元素获取：
- 使用
document.getElementById获取页面上的元素，包括故事文本、按钮、日志、滑块和提示部分。
- 使用
- 故事数组：
const story = [...]：定义了一个包含故事各个段落的数组。
- 状态管理：
let currentStep = 0：用于跟踪当前故事步骤。
- 函数定义：
function updateStory() {...}：- 更新
storyText以显示当前步骤的故事内容。 - 更新
storyLog，将当前步骤添加到日志的顶部。 - 在控制台打印当前的焦虑和困惑滑块值。
- 更新
- 事件处理程序：
nextBtn.addEventListener('click', () => {...})：- 如果当前步骤不是最后一个，则递增
currentStep并调用updateStory。 - 如果是最后一个步骤，隐藏“下一步”按钮，显示“继续玩”按钮。
- 如果当前步骤不是最后一个，则递增
continueBtn.addEventListener('click', () => {...})：- 重置故事到第一步，更新日志以显示欢迎消息。
- 创建一个新的提示元素并添加到
hintSection。 - 显示“下一步”按钮，隐藏“继续玩”按钮。
- 初始化：
updateStory()：初始化时显示第一个故事步骤。hintSection的初始状态设置：- 初始隐藏提示部分。
- 如果需要，添加一个初始提示并显示
hintSection。
代码亮点
- 互动性：通过按钮点击来推进故事，增加了用户的参与度。
- 日志记录：
storyLog记录了用户经历的故事步骤，方便回顾。 - 情感反馈：通过滑块和控制台输出，可以追踪用户的情感状态（焦虑和困惑）。
- 提示系统：通过
hintSection提供游戏提示，增强用户体验。
效果图二