CCClaude Code中文喂饭教程

实战：用截图反馈修 UI

UI 问题只靠文字很容易说不清。截图反馈能让 CC 明确看到错位、溢出、间距和视觉层级问题。

截图反馈怎么写

截图不是越多越好，而是要让 CC 看懂“哪里不对、期望是什么、不能动哪里”。截图配文字，效果最好。

这是修改后的页面截图。

请根据截图继续修 UI。

问题说明：
1. 【指出截图里哪里不对】
2. 【期望变成什么样】
3. 【哪些地方不能动】

限制：
1. 只修改和截图问题直接相关的样式。
2. 不要重构页面结构。
3. 不要引入新依赖。
4. 修改后请用 /verify 或重新查看页面确认。

截图前先准备

截图反馈最好包含三种信息：

信息示例
位置首页 Hero 右侧卡片、文档页左侧目录
现象空隙太大、标题太大、按钮溢出
期望更紧凑、宽度对齐、移动端换行

没有期望时，CC 可能会按自己的审美重做，结果越改越偏。

描述截图时要具体

截图反馈最好一次只解决一类问题。比如间距、字号、遮挡、响应式不要全部混在一句话里，否则 CC 可能重做整块布局。

标注截图问题

请根据这张截图修 UI。

截图信息：
- 页面：
- 宽度：
- 浏览器：
- 当前状态：

问题标注：
1. 左上区域：【问题】
2. 中间区域：【问题】
3. 右侧区域：【问题】

期望：
1. 【具体期望】
2. 【具体期望】

不要改：
1. 【不能动的区域】
2. 【不能动的样式】

多张截图怎么发

如果有桌面端和移动端两张截图，不要混在一起说：

这是两张截图，请分别分析。

截图 A：
- 页面：
- 宽度：
- 问题：
- 期望：

截图 B：
- 页面：
- 宽度：
- 问题：
- 期望：

请先判断两个问题是否同源。
如果不是同源，请分两步修，不要一次性重构。

二次反馈模板

还有一个问题没有修好。

新截图说明：
【描述新截图里仍然不对的地方】

请继续收窄修复：
1. 只处理这个截图问题。
2. 不要修改已经正常的区域。
3. 修改后说明具体改了哪些样式。
4. 再次验证移动端和桌面端。

如果 CC 看偏了

你理解错了截图问题。

请重新聚焦：
1. 问题只在【具体区域】。
2. 不是要改【它误改的方向】。
3. 期望是【具体结果】。
4. 只修改相关样式。
5. 已经正常的区域不要再动。

UI 修改验收

请验收这次截图反馈修复。

要求：
1. 原截图问题是否消失。
2. 桌面端是否正常。
3. 移动端是否正常。
4. 是否引入新的遮挡、溢出、错位。
5. 是否只修改了相关区域。
6. 如果需要我重新截图，请告诉我截哪个宽度和区域。

让 CC 对比前后变化

如果连续改了几轮，可以让 CC 总结前后变化：

请对比本次 UI 修改前后的变化。

要求：
1. 原截图问题是否解决。
2. 哪些样式被修改。
3. 是否影响其他断点或页面。
4. 是否有新的溢出、遮挡、错位。
5. 下一次截图应该截哪里。

这样能防止越修越散。

常见截图问题词典

截图反馈的边界

截图能解决视觉问题，但不能替代功能验收：

截图能看出截图看不出
溢出、遮挡、错位表单提交是否成功
间距、字号、层级接口是否返回正确数据
移动端布局权限逻辑是否正确
按钮是否可见点击后状态是否完整

所以 UI 修完后，还要让 CC 检查交互和 /verify。

修截图问题时不要扩大

请只修截图中标注的问题。

要求：
1. 不重做整页设计。
2. 不改品牌色和导航结构。
3. 不改没有问题的区域。
4. 如果需要改全局样式，请先说明为什么局部修不了。
5. 修改后说明是否影响其他页面。

常见错误反馈

这些说法容易让 CC 改偏：

不建议这样说更好的说法
这里不好看标题和按钮间距太小，希望增加 12px 左右
右边怪怪的右侧卡片宽度太窄，希望和左侧内容更接近
移动端乱了390px 宽度下按钮换行后高度溢出
参考图二参考图二的左右比例，但保留当前颜色和导航
整体优化一下只处理截图中标注的三个问题

截图越具体，CC 越不容易“发挥审美”。

验收结果

下一篇：移动端响应式检查