用 Codex 给项目加一个“随机小宠物”：从一句需求到可落地任务拆解
有时候，产品不需要多复杂。
页面角落多一只会随机出现的小宠物，用户可能就会多停留几秒。
如果你正在用 Codex、Cursor、Claude Code 这类 AI 编程工具，千万别只输入一句：
加点小宠物，随机一点。
然后关电脑睡觉。
醒来之后，大概率不是惊喜，而是惊吓：
- 宠物样式乱飞
- 代码塞得到处都是
- 随机逻辑不可控
- 每次刷新状态都丢
- 移动端直接挡住按钮
咱们要的是“让 AI 干活”，不是“让 AI 自由发挥到失控”。
这篇教程就用一个很轻的小需求：给项目加一个随机小宠物，讲清楚怎么把想法交给 Codex，让它更稳、更准、更像一个靠谱同事。
目标效果：页面里出现一只随机小宠物 🐱
咱们先把需求说人话。
你希望用户打开页面时，角落里出现一只小宠物。它可能是猫、狗、兔子、小鸭子，也可能是一只像素风小怪兽。
它不抢主功能的戏。
它只是安安静静待在页面角落，偶尔动一下，点它还能有点反馈。
比如：
- 页面右下角随机出现一只宠物
- 每次进入页面，宠物形象随机
- 点击宠物，会弹出一句随机文案
- 宠物不能挡住主要按钮
- 移动端也要正常显示
- 代码要能维护，别写成一坨
这才是一个能交给 AI 的需求。
别直接说“变量 +1”，要告诉 AI 加在哪里
很多人用 AI 写代码时，会犯一个问题：需求太短。
比如：
变量+1
加点小宠物
随机
这对人来说能猜。
对 AI 来说，它会开始脑补。
它不知道你说的“变量”是哪个变量，也不知道“小宠物”是组件、贴图、动画，还是一个游戏实体。
所以，你要把需求改成这种格式：
请在当前项目中新增一个随机小宠物功能。
要求：
- 在页面右下角展示一个 Pet 组件
- 宠物类型从 cat、dog、rabbit、duck 中随机选择
- 每次页面刷新时随机一次
- 点击宠物时，随机展示一句短文案
- 不要影响现有页面布局
- 移动端需要适配
- 请尽量复用现有组件风格
- 完成后说明修改了哪些文件
你看，AI 立刻就知道怎么下手了。
它不用猜。
你也不用半夜爬起来改 bug。
一条好用的 Codex 提示词模板
如果你想直接复制用，可以用这个版本。
你是当前项目的开发助手。请帮我实现一个“随机小宠物”功能。
功能目标：
用户打开页面后，在右下角看到一只随机宠物。宠物不会影响主要操作，只作为轻量装饰和互动元素。
具体要求：
1. 新增一个 Pet 组件，用于展示宠物。
2. 宠物类型从以下列表中随机选择：cat、dog、rabbit、duck。
3. 页面加载时随机确定一个宠物，本次页面生命周期内保持不变。
4. 点击宠物时，从预设文案中随机显示一句提示语。
5. 宠物固定在右下角，距离底部和右侧保持合适间距。
6. 在移动端不要遮挡核心按钮，可适当缩小尺寸。
7. 样式要和现有项目风格一致。
8. 不要引入重量级依赖。
9. 请补充必要的类型定义或注释。
10. 完成后列出修改文件，并说明核心实现逻辑。
验收标准：
- 本地运行无报错
- 刷新页面后宠物可能变化
- 点击宠物会显示随机文案
- 桌面端和移动端布局正常
- 不影响现有功能
这个提示词够清楚，也留了一点发挥空间。
AI 可以选实现方式，你保留控制权。
推荐实现思路：小功能也要写得像样
别小看这个宠物组件。
写烂了，它会变成项目里的“装饰性垃圾代码”。
更稳的结构是这样：
src/
components/
Pet/
Pet.tsx
Pet.css
pets.ts
每个文件各干各的事：
Pet.tsx：负责展示和点击交互Pet.css：负责位置、动画、响应式pets.ts：负责宠物配置和随机文案
这样以后你想加一只小狐狸，只需要改配置。
不用到组件逻辑里乱翻。
示例：React 版随机宠物组件
下面给一个简化版本。
你可以让 Codex 参考这个结构来写，也可以自己直接改。
pets.ts
export type PetType = 'cat' | 'dog' | 'rabbit' | 'duck'
export interface PetConfig {
type: PetType
emoji: string
name: string
}
export const pets: PetConfig[] = [
{ type: 'cat', emoji: '🐱', name: '小猫' },
{ type: 'dog', emoji: '🐶', name: '小狗' },
{ type: 'rabbit', emoji: '🐰', name: '兔子' },
{ type: 'duck', emoji: '🦆', name: '小鸭' }
]
export const petMessages = [
'今天也要好好写代码呀。',
'别忘了保存！真的。',
'我刚刚看见一个 bug 跑过去了。',
'喝口水，再继续。',
'这个按钮看起来可以点一下。'
]
export function getRandomItem<T>(list: T[]): T {
return list[Math.floor(Math.random() * list.length)]
}
Pet.tsx
import { useMemo, useState } from 'react'
import { getRandomItem, petMessages, pets } from './pets'
import './Pet.css'
export function Pet() {
const pet = useMemo(() => getRandomItem(pets), [])
const [message, setMessage] = useState('')
const handleClick = () => {
setMessage(getRandomItem(petMessages))
}
return (
<div className="pet-wrapper" aria-label={`随机宠物：${pet.name}`}>
{message && <div className="pet-bubble">{message}</div>}
<button className="pet-button" onClick={handleClick} type="button">
<span className="pet-emoji" role="img" aria-label={pet.name}>
{pet.emoji}
</span>
</button>
</div>
)
}
Pet.css
.pet-wrapper {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 50;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.pet-button {
width: 56px;
height: 56px;
border: none;
border-radius: 999px;
cursor: pointer;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pet-button:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.pet-emoji {
font-size: 30px;
}
.pet-bubble {
max-width: 220px;
padding: 8px 12px;
border-radius: 12px;
background: #111827;
color: #fff;
font-size: 14px;
line-height: 1.4;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
@media (max-width: 640px) {
.pet-wrapper {
right: 12px;
bottom: 12px;
}
.pet-button {
width: 46px;
height: 46px;
}
.pet-emoji {
font-size: 24px;
}
.pet-bubble {
max-width: 180px;
font-size: 12px;
}
}
在页面里使用
import { Pet } from './components/Pet/Pet'
export default function App() {
return (
<>
<main>
{/* 你的页面内容 */}
</main>
<Pet />
</>
)
}
这样，一个随机宠物功能就完整了。
不是很重，却挺有存在感。
随机逻辑要注意：别让宠物疯狂变身
这里有个小坑。
如果你直接在组件渲染时写：
const pet = getRandomItem(pets)
每次组件重新渲染，宠物都可能变。
用户点一下按钮，猫变狗。
输入框打个字，狗变鸭。
这就很怪。
更好的写法是：
const pet = useMemo(() => getRandomItem(pets), [])
它会在组件挂载时随机一次。
本次页面生命周期里保持稳定。
用户刷新页面，再重新随机。
体验就顺了。
如果想“睡一觉看惊喜”，要给 Codex 留验收清单
很多人喜欢把任务丢给 AI，然后去睡觉。
没问题。
但你要让它知道什么叫“做完”。
可以在提示词末尾加这一段：
完成后请自检：
- 是否能成功构建
- 是否有 TypeScript 报错
- 是否有未使用变量
- 是否影响原有页面布局
- 是否存在移动端遮挡问题
- 是否把随机逻辑写在了合理位置
- 是否有必要的无障碍属性
请在回复中给出：
- 修改文件列表
- 核心实现说明
- 测试方式
- 可能的后续优化建议
这段非常关键。
它会逼 AI 自己检查一遍。
别指望它天生严谨。
你要把“严谨”写进任务里。
可以继续加的玩法
小宠物这个功能很适合一点点加。
不要一口气让 AI 写十个效果。
容易翻车。
建议按阶段来。
玩法一：记住用户上次的宠物
用户第一次随机到小猫。
下次打开还是小猫。
可以用 localStorage：
请为 Pet 组件增加本地记忆功能：
- 如果 localStorage 中已有 petType，则优先使用
- 如果没有，则随机一个并保存
- 提供一个“换一只”按钮，点击后重新随机并更新 localStorage
这个适合做轻量个性化。
用户会觉得：“哦？这是我的猫？”
玩法二：不同时间出现不同文案
早上提醒工作。
晚上提醒休息。
请根据当前时间段调整宠物文案：
- 6:00-11:59 使用早安类文案
- 12:00-17:59 使用工作陪伴类文案
- 18:00-23:59 使用休息提醒类文案
- 0:00-5:59 使用熬夜提醒类文案
这个比纯随机更有温度。
凌晨两点弹一句“别卷了，去睡”，杀伤力很强。
玩法三：给宠物加轻微动画
注意，是轻微。
别让它像广告弹窗一样抽搐。
请为 Pet 组件增加轻微 idle 动画：
- 每隔几秒上下浮动一次
- 动画幅度不要超过 6px
- 尊重 prefers-reduced-motion 设置
这里提到 prefers-reduced-motion 很重要。
有些用户不喜欢动画。
别强迫所有人看宠物蹦迪。
避坑清单：这些问题最容易翻车 ⚠️
1. 宠物挡住核心按钮
右下角很危险。
很多网站的“提交”“联系客服”“下一步”也在右下角。
解决办法：
- 移动端缩小宠物
- 给关键页面隐藏宠物
- 允许通过参数控制位置
- 提供关闭按钮
2. 随机写得不可测试
纯随机功能很难测。
可以让随机函数独立出来。
export function getRandomItem<T>(list: T[]): T {
return list[Math.floor(Math.random() * list.length)]
}
后面写测试也方便。
3. 样式污染全局
别写这种选择器：
button {
border-radius: 999px;
}
这会让全站按钮一起变圆。
宠物是可爱了，页面毁了。
用明确 class：
.pet-button {}
4. 动画太夸张
宠物是陪伴，不是蹦迪队长。
动画建议：
- 幅度小
- 频率低
- 不影响阅读
- 可关闭或尊重系统设置
5. 把图片资源塞太大
如果你用图片宠物，别随便丢 2MB 的 PNG。
建议：
- 用 SVG
- 用 WebP
- 控制尺寸
- 做懒加载
一个装饰功能把首页加载拖慢，那就尴尬了。
更适合交给 Codex 的任务拆分方式
不要一次说：
帮我加一个随机宠物，要好看，要有动画，要能互动，要能保存，还要适配移动端。
AI 听完也头大。
拆成三步更稳。
第一步：只做基础展示
新增 Pet 组件，随机展示一种宠物，固定在右下角。不要加复杂动画。
第二步：加点击文案
在 Pet 组件中增加点击交互，点击后展示随机文案气泡。
第三步：优化体验
适配移动端，避免遮挡核心按钮，并增加轻微动画。请尊重 prefers-reduced-motion。
每一步都能验收。
出问题也好回滚。
这比“梭哈式编程”靠谱多了。
给 Codex 的最终版任务卡片
你可以直接复制这一段。
任务：为当前项目添加一个随机小宠物功能。
背景：
我希望页面右下角出现一个轻量、有趣、不打扰用户的小宠物。它作为装饰和互动元素存在，不影响原有业务功能。
需求：
- 新增 Pet 组件
- 宠物从 cat、dog、rabbit、duck 中随机选择
- 页面加载时随机一次，本次页面生命周期保持不变
- 点击宠物时展示一句随机文案
- 宠物固定在右下角
- 移动端缩小尺寸，避免遮挡主要操作区
- 不引入重量级依赖
- 样式与项目现有风格保持一致
- 代码结构清晰，配置和组件逻辑分离
建议结构：
- components/Pet/Pet.tsx
- components/Pet/Pet.css
- components/Pet/pets.ts
验收：
- 本地运行无报错
- 刷新页面后宠物可能变化
- 点击宠物能出现随机文案
- 移动端布局正常
- 不影响原有页面功能
完成后请输出：
- 修改文件列表
- 核心实现说明
- 自测步骤
- 可能风险和后续优化建议
把这段丢给 Codex，再去睡觉。
醒来看到惊喜的概率，会高很多。
结语
AI 编程工具很强，但它不是读心术。
你给一句“加点小宠物”，它只能猜。
你给清楚目标、边界、验收标准，它就能像一个靠谱开发一样推进。
小功能也值得认真写。
因为用户记住一个产品，常常不是因为某个宏大的架构，而是某个细节刚好戳中了他。
比如页面角落那只，点一下会提醒你喝水的小鸭子。🦆
