KimiCode 进阶技巧：让 AI 更懂你的需求

同样的工具，不同的人用，效果天差地别。这里有几个让 KimiCode 产出质量翻倍的方法。

技巧一：给 AI 一个「角色」

不要只说”帮我写代码”，告诉它你是谁、要做什么。

❌ 普通写法：

写一个登录页面

✅ 进阶写法：

你是一位有 10 年经验的前端工程师，擅长用户体验设计。

请为一个 B2B 管理后台设计登录页面，要求：
- 专业、简洁的风格，符合企业级产品调性
- 包含邮箱、密码输入，记住登录状态选项
- 错误提示要明显但不突兀
- 支持响应式布局

差异： 角色设定让 AI 自动带入专业视角，输出更符合场景。

技巧二：用「结构」代替「描述」

人类喜欢形容词，AI 更喜欢结构化信息。

❌ 模糊描述：

做一个好看的仪表盘，有很多数据图表

✅ 结构化描述：

做一个数据仪表盘页面，布局如下：

【顶部区域】
- 标题：运营数据概览
- 时间筛选器：今日/本周/本月

【KPI 卡片区域 - 横向 4 列】
- 总用户数 | 数字 | 环比 +12%
- 日活跃用户 | 数字 | 环比 -3%
- 平均使用时长 | 数字 | 环比 +5%
- 转化率 | 百分比 | 环比 +8%

【图表区域 - 左右分栏】
- 左侧（60%）：近 30 天用户趋势折线图
- 右侧（40%）：用户来源分布饼图

【底部区域】
- 最近 10 条用户操作记录表格

差异： 结构清晰，AI 能准确还原布局意图。

技巧三：提供「参考」和「约束」

参考（Reference）：

设计风格参考 Notion 的简洁白色系，或者参考 https://example.com 的布局

约束（Constraint）：

技术约束：
- 只能用原生 HTML/CSS/JS，不引入外部框架
- 总代码量控制在 300 行以内
- 兼容 Chrome 和 Safari 最新两版

两者结合，AI 在有限空间里发挥，结果更可控。

技巧四：迭代时「定位问题」而非「全盘否定」

❌ 低效反馈：

不对，重新写

✅ 高效反馈：

功能没问题，但有两个细节要调：
1. 按钮颜色太深了，换成 #4A90D9 这种蓝色
2. 表格在手机上会溢出，需要横向滚动

进阶 —— 用行号定位：

第 45 行的函数逻辑有问题，当输入为空字符串时应该返回 0 而不是 NaN

技巧五：让 AI 「解释」再 「修改」

遇到复杂逻辑，先让 AI 解释清楚，再动手改。

输入：

请解释一下这段代码的逻辑，特别是第 23-30 行的数据处理部分

理解后再说：

明白了。那能不能改成用 Map 而不是对象来存储，提高查找效率？

实战：用进阶技巧重构一个组件

场景： 做一个文件上传组件

第一轮（基础）：

你是一位前端专家。请写一个文件上传组件，要求：

【功能】
- 支持拖拽上传和点击上传
- 显示上传进度条
- 支持多文件同时上传
- 上传完成后显示文件列表，可删除

【样式】
- 参考 Dropbox 的简洁风格
- 拖拽区域要有明显的视觉反馈
- 进度条用渐变色

【约束】
- 用原生 JS 实现，不依赖第三方库
- 代码模块化，方便复用

第二轮（优化）：

整体不错，优化几点：

1. 拖拽区域（第 15-25 行）：
   - 拖拽进入时边框变蓝 + 背景轻微变灰
   - 加一句提示文字"释放以上传文件"

2. 文件列表（第 40-60 行）：
   - 每个文件项显示文件大小（自动转换 KB/MB）
   - 上传失败的文件用红色边框标识

3. 添加一个"清空已完成"按钮

第三轮（完善）：

最后加几个细节：
- 文件大小限制 10MB，超限给出友好提示
- 图片文件上传前显示缩略图
- 添加键盘快捷键：Ctrl+U 触发上传，Delete 删除选中文件

常见错误描述 vs 正确描述

❌ 错误	✅ 正确
“界面好看点”	“用卡片式布局，圆角 8px，阴影 0 2px 8px rgba(0,0,0,0.1)”
“响应式设计”	“桌面端三列布局，平板端两列，手机端单列”
“加载快一点”	“首屏加载控制在 1s 内，图片懒加载，JS 异步加载”
“兼容性好”	“支持 Chrome 90+、Firefox 88+、Safari 14+”
“代码规范”	“使用 ES6+ 语法，变量用 camelCase，注释说明函数用途”

建立自己的「Prompt 模板」

把常用的描述结构整理成模板，下次直接用：

【角色】你是一位______专家
【场景】为______设计/开发______
【功能需求】
1. 
2. 
3. 
【样式要求】
- 参考风格：
- 主色调：
- 布局：
【技术约束】
- 
- 
【其他】
- 

总结

技巧	核心
角色设定	让 AI 带入专业视角
结构描述	用格式代替形容词
参考 + 约束	给方向，也画边界
精准反馈	定位问题，具体修改
先解释后修改	确保理解再动手

这些技巧不仅适用于 KimiCode，和任何 AI 工具对话都有效。

---

系列文章：

• KimiCode 快速上手：5 分钟写出第一个项目
• KimiCode 实战：从零搭建一个待办清单应用

---

有问题或想分享你的 KimiCode 使用心得？欢迎留言。