一觉醒来，Claude 重磅更新，不仅能够操作电脑，而且 AI 编程能力再进化！
可直接帮你做一个苹果 AppStore：
直接帮你做一个京东在线商城网站：
同样的价格，更快，更强！能力直逼 o1 的同时还比 o1 快好几倍！
在Claude支持下，现在我们还可以一句话让大模型帮我们制作精美的游戏，并直接开玩！
想知道怎么实现的吗？通过 AI 编程。
接下来告诉你怎么做。全程干货，建议先点赞收藏，关注「云中江树」公众号了解更多 AI 进阶知识。
在大模型中直接玩游戏
除了象棋，别的游戏行不行？Yes，当然可以！
先来一个经典的贪吃蛇游戏
再来一个可爱的打地鼠游戏
再看看飞翔小鸟游戏
围棋游戏也可以！
现在，你可以直接在大模型中玩转许多经典的游戏！
还有更多精彩游戏，等你来探索！
提示词和方法都开源在 LangGPT 社区了，可以通过社区知识库获取最新内容！
https://langgptai.feishu.cn/wiki/RXdbwRyASiShtDky381ciwFEnpe
怎么做到的？
通过使用 Claude 提供的 Projects 功能，让大模型帮我们 AI 编程即可实现！
注意，你需要开通 Claude Pro 账号!
最近大家关注 Claude 的 Artifacts 功能很多，因为能生成好看的卡片，但是Claude 的 Projects 功能却被明显忽略了！！！
Claude 的 Projects （项目）功能也十分强大，尤其是使用 AI 编程的方法和 Artifacts 功能相结合，能做非常多有意思的事情！
我们来看怎样通过 Projects 功能让我们可以一句话生成精美的游戏，并直接在 Claude 上玩起来！
新建一个 Claude Project，叫 AiGames ，填入描述：“AI 游戏”
添加项目自定义指令（custom instructions）。
填入下面的「结构化提示词」
<role>
<name>游戏设计专家</name>
<profile>
作者：云中江树
版本：6.0
语言：中文
描述：专注于创造视觉震撼、体验卓越、难度均衡、UI美观精致的小游戏，擅长在500行代码内实现游戏。
技术栈：React, Tailwind CSS, Three.js, WebGL (备选：HTML+CSS)，你只会使用 Claude Artifacts中支持的库
</profile>
<skills>
1. 前沿UI设计：圆角，微动效, 玻璃拟态, 新拟物化设计
2. 高级交互设计：手势控制, 视差滚动, 沉浸式体验
3. 性能艺术：代码优化, 按需渲染, 资源管理
4. 响应式游戏：流体布局, 组件复用, 设备适配
5. 平衡性调教：难度曲线设计, 进度感知, 奖惩机制
6. SVG绘制：尽可能使用 emoji 表情绘制游戏素材，如果需要，使用 SVG绘制游戏素材.由于 SVG 太复杂，尽量不使用。
</skills>
<ui_design_methodologies>
1. 原子设计：构建高度可复用的最小化UI组件
2. 情感化设计：通过最小化代码实现微动效和情感反馈
3. 网格系统：使用Tailwind实现响应式网格布局
4. 色彩心理学：通过精简的调色板激发特定情绪
5. 视觉精细化：利用CSS技巧实现精细视觉效果
6. 维度设计：巧用CSS 3D变换创造深度感
7. 字体优化：选用优质web字体，减少自定义字体使用
8. 空间叙事：通过布局和简单动画传达游戏故事
</ui_design_methodologies>
<visual_aesthetics>
1. 配色方案：你是世界上最棒的色彩大师和产品经理，配色精致、优雅、高级，符合美学原则，符合常识
2. 字体设计：清晰可读、风格搭配、字体层级
3. 视觉层次：焦点引导、信息分组、留白运用、一致性
4. 视觉舒适度：柔和过渡、适度饱和度
5. 页面布局：背景，游戏区，标题区，按钮区，层次分明
</visual_aesthetics>
<workflow>
- 功能设计：确定功能，评估 React + Tailwind CSS 代码实现
- 游戏界面：利用 React + Tailwind CSS构建响应式界面
- 功能研发：实现游戏全部功能，全部代码在一个代码文件中实现
- 请重新设计并确保游戏的核心功能得到正确实现
</workflow>
<output_requirements>
1. 优先使用库提供的现有功能，避免重复造轮子
2. 代码可读性和效率的平衡，确保易于理解和维护
3. 最大化Tailwind CSS的使用，减少自定义CSS
4. 配色方案确保游戏元素之间有更好的视觉区分，游戏区域与背景形成层次感
5. 确保游戏初始难度低，确保游戏难度进行合理的动态变化
6. 确保游戏操作和键盘绑定，能通过键盘操控
7. 如果需要修改游戏，总是给出修改后的完整代码
</output_requirements>
<example>
参考 AiSnakeGame txt 代码文件撰写游戏
</example>
</role>
添加项目知识。点击添加 Add Content，然后填入标题和正文内容，参照下图。
正文内容填入下面的代码
import React, { useState, useEffect, useCallback } from 'react';
import { motion } from 'framer-motion';
import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Play, Pause } from 'lucide-react';
const GRID_SIZE = 20;
const CELL_SIZE = 20;
const INITIAL_SNAKE = [{ x: 10, y: 10 }];
const INITIAL_DIRECTION = { x: 1, y: 0 };
const INITIAL_FOOD = { x: 15, y: 15 };
const SnakeGame = () => {
const [snake, setSnake] = useState(INITIAL_SNAKE);
const [direction, setDirection] = useState(INITIAL_DIRECTION);
const [food, setFood] = useState(INITIAL_FOOD);
const [isGameOver, setIsGameOver] = useState(false);
const [isPaused, setIsPaused] = useState(false);
const [score, setScore] = useState(0);
const moveSnake = useCallback(() => {
if (isPaused || isGameOver) return;
setSnake((prevSnake) => {
const newSnake = [...prevSnake];
const head = { ...newSnake[0] };
head.x += direction.x;
head.y += direction.y;
if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
setIsGameOver(true);
return prevSnake;
}
if (newSnake.some((segment) => segment.x === head.x && segment.y === head.y)) {
setIsGameOver(true);
return prevSnake;
}
newSnake.unshift(head);
if (head.x === food.x && head.y === food.y) {
setScore((prevScore) => prevScore + 1);
setFood(getRandomFood());
} else {
newSnake.pop();
}
return newSnake;
});
}, [direction, food, isPaused, isGameOver]);
useEffect(() => {
const gameLoop = setInterval(moveSnake, 150);
return () => clearInterval(gameLoop);
}, [moveSnake]);
const getRandomFood = () => ({
x: Math.floor(Math.random() * GRID_SIZE),
y: Math.floor(Math.random() * GRID_SIZE),
});
const handleKeyPress = useCallback((event) => {
if (isGameOver) return;
switch (event.key) {
case 'ArrowUp':
setDirection({ x: 0, y: -1 });
break;
case 'ArrowDown':
setDirection({ x: 0, y: 1 });
break;
case 'ArrowLeft':
setDirection({ x: -1, y: 0 });
break;
case 'ArrowRight':
setDirection({ x: 1, y: 0 });
break;
case ' ':
setIsPaused((prev) => !prev);
break;
default:
break;
}
}, [isGameOver]);
useEffect(() => {
window.addEventListener('keydown', handleKeyPress);
return () => window.removeEventListener('keydown', handleKeyPress);
}, [handleKeyPress]);
const resetGame = () => {
setSnake(INITIAL_SNAKE);
setDirection(INITIAL_DIRECTION);
setFood(INITIAL_FOOD);
setIsGameOver(false);
setIsPaused(false);
setScore(0);
};
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 p-4">
<motion.div
className="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-xl"
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5 }}
>
<h1 className="text-4xl font-bold text-white mb-4 text-center">贪吃蛇</h1>
<div className="relative" style={{ width: GRID_SIZE * CELL_SIZE, height: GRID_SIZE * CELL_SIZE }}>
<div className="absolute inset-0 bg-gray-800 bg-opacity-50 rounded-lg"></div>
{snake.map((segment, index) => (
<motion.div
key={index}
className="absolute bg-green-500 rounded-sm"
style={{
width: CELL_SIZE,
height: CELL_SIZE,
left: segment.x * CELL_SIZE,
top: segment.y * CELL_SIZE,
}}
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.2 }}
/>
))}
<motion.div
className="absolute bg-red-500 rounded-full"
style={{
width: CELL_SIZE,
height: CELL_SIZE,
left: food.x * CELL_SIZE,
top: food.y * CELL_SIZE,
}}
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.2 }}
/>
</div>
<div className="mt-4 text-white text-xl font-semibold">分数: {score}</div>
<div className="mt-4 flex justify-center space-x-4">
<button
onClick={() => setDirection({ x: 0, y: -1 })}
className="p-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition-colors"
>
<ChevronUp className="text-white" />
</button>
<button
onClick={() => setDirection({ x: 0, y: 1 })}
className="p-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition-colors"
>
<ChevronDown className="text-white" />
</button>
<button
onClick={() => setDirection({ x: -1, y: 0 })}
className="p-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition-colors"
>
<ChevronLeft className="text-white" />
</button>
<button
onClick={() => setDirection({ x: 1, y: 0 })}
className="p-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition-colors"
>
<ChevronRight className="text-white" />
</button>
</div>
<div className="mt-4 flex justify-center space-x-4">
<button
onClick={() => setIsPaused((prev) => !prev)}
className="px-4 py-2 bg-white bg-opacity-20 rounded-md hover:bg-opacity-30 transition-colors text-white font-semibold"
>
{isPaused ? <Play className="inline-block mr-2" /> : <Pause className="inline-block mr-2" />}
{isPaused ? '继续' : '暂停'}
</button>
<button
onClick={resetGame}
className="px-4 py-2 bg-white bg-opacity-20 rounded-md hover:bg-opacity-30 transition-colors text-white font-semibold"
>
重新开始
</button>
</div>
{isGameOver && (
<motion.div
className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
>
<div className="text-white text-center">
<h2 className="text-3xl font-bold mb-4">游戏结束</h2>
<p className="text-xl mb-4">你的得分: {score}</p>
<button
onClick={resetGame}
className="px-6 py-3 bg-white text-purple-600 rounded-md hover:bg-opacity-90 transition-colors font-semibold"
>
再玩一次
</button>
</div>
</motion.div>
)}
</motion.div>
</div>
);
};
export default SnakeGame;
现在，你已经配好了你的 Claude Projects。
3. 接下来你只需要像下图中一样，向 Claude 下达指令“帮我制作一个象棋游戏”， Claude 就会帮你一键生成精美的游戏！
如果有不满意的地方，向 Claude 说明让其反思修改即可。
如果你看不懂上面填入的提示词和代码，没有关系，只需要复制粘贴就能实现和江树一样的效果。
如果你想看懂并且理解背后的逻辑，那么你需要学习一些 AI 编程知识。
AI 编程
提到 AI 编程，有一个常见的误解：AI 编程就是写代码?
真相: 不需要！在AI编程中，真正干活的是AI。
我们只需要做一个聪明的"指挥官"，告诉AI该如何工作。这不是在培养传统的程序员，而是在培养一种用AI解决问题的创新思维。
AI 编程的本质：指挥官，而非码农
通过AI编程，我们可以极大的释放AI能力:
将AI与各种工具相结合 运用创新的解决方案 赋能自身，实现更多可能
就像前面列举的许多「中国象棋」游戏一样~
通过 AI 编程，我们可以深度释放大模型能力，Claude 能操作电脑，很大程度上就是依赖于其强大的AI编程能力。
现在我们通过 AI 编程，也可以一句话让大模型生成精美现代的小游戏！
通过 AI 编程，江树将只能在 Claude 上体验到的制卡能力带到了国产 AI 上。
这是也是首个提示词和 AI 编程相结合的案例，让大家使用国产大模型也能轻松体验汉语新解，效果不输国外大模型。
也是通过 AI 编程，江树将让大家使用国产大模型也能轻松体验 AI 生成名片。
看到这里，如果你也对 AI 编程感兴趣，欢迎来听江树主讲的 豆包 Marscode AI 编程课程。
在这里江树会给大家分享如何指挥 AI ，让 AI 通过编程的方式解决我们的实际问题。
应用篇我会用5节课的时间分享更多更详细的 AI 编程案例，带着大家手把手实操，相信定能对大家有启发！
这是掘金花钱为大家打造的研习社精品课程，现在报名是免费的！
扫描下方二维码报名：
结语
在这个AI驱动的新时代，游戏创作、软件开发不再是程序员的专利。
每个人都可以成为软件设计师，用一句话就能创造出精彩纷呈的数字世界。
让我们一起探索、创造，在AI的魔法中找到无限的乐趣!
喜欢本期内容请点赞、收藏、在看，拿提示词前先一键三连啊啊啊！！
欢迎评论区留言分享更多有趣玩法！
