今天用 Claude Code 完成了前台页面视觉升级，顺带把 Git 工程化提交全跑通了。学了 16 个知识点，踩了 6 个坑，最离谱的是改完样式刷新页面没变化，折腾了半天发现是浏览器缓存问题。全程记录，省得以后再踩。

坑1：卡片图片高度不一致，aspect-ratio 没效果

商品卡片每张高度不一样，页面视觉混乱。

一开始怎么做的：

aspect-ratio: 3/4;object-fit: cover;

图片仍按原始比例撑高，各卡片高度不一致。

正确做法：

图片容器：- height: 220px（固定高度，不是 aspect-ratio）- width: 100%- overflow: hidden- background-color: #FAF6F3图片本身：- width: 100%- height: 100%- object-fit: contain- object-position: center center- padding: 12px- box-sizing: border-box

踩坑原因： aspect-ratio 是比例约束不是高度约束，容器实际高度仍由内容撑开。

记住： 固定卡片图片高度必须用 height + overflow: hidden，aspect-ratio 不够用。

技巧1：object-fit: contain vs cover 怎么选

美妆产品图用 cover 会裁掉瓶身文字，选 contain 才对。

.product-image {  object-fit: contain;  object-position: center center;  padding: 12px;  box-sizing: border-box;}

效果： 配合 background-color: #FAF6F3 填充留白，视觉干净，产品信息完整。

坑2：样式改完刷新，页面没有任何变化

CC 说修改完成，刷新后页面没变化。

一开始怎么做的： 按 F5 普通刷新，浏览器加载了缓存的旧 CSS，新样式完全未生效。

正确做法：

# Windows / Linux：强制刷新，跳过缓存Ctrl + Shift + R# Mac：Cmd + Shift + R# 或者：F12 → Network → 勾选 Disable cache → 再刷新

踩坑原因： 浏览器默认缓存静态资源，F5 不会重新请求未修改的 CSS 文件。

记住： 改完前端样式第一反应是 Ctrl+Shift+R 强制刷新，不是重启后端服务。

下面几个是今天用 Claude Code 做 UI 改版的技巧，实测有效。

技巧2：用角色扮演让 Claude Code 做 UI/UX 审查

想系统性找页面问题，不靠自己凭感觉。

用法：

你扮演一个UI/UX的高级设计师，对这个页面提出最致命的UI问题和修改建议

配合页面截图一起发送。

效果： 输出分级问题清单（致命 / 严重 / 体验），有明确优先级排序，比自己逐项检查更系统。

技巧3：截图诊断法——样式不生效最快定位方式

不确定哪些设计规范没有生效时，截图发给 CC：

我截了当前浏览器页面截图，请对比 frontend/design-system.md，逐项检查哪些设计规范没有正确应用：每项输出 ✅已应用 或 ❌未应用 + 原因判断发现 ❌ 的项目直接定位文件修复，修复完告诉我改了哪里。

效果： 实际诊断出背景色用了 #FFFFFF 而非 #FDFAF8，CC 直接定位并修复。比文字描述问题准确 10 倍。

技巧4：多工具协作诊断（Claude Code + Gemini）

多个页面之间视觉不一致，这类问题用文字极难精确表达。

用法：

1. 截图发给 Gemini 侧边栏，要求提炼精确的错误描述（例："A页面 Logo 高度 64px，B页面 48px"）
2. 把 Gemini 提炼好的精确描述发给 CC 修复
3. 验证结果

效果： 视觉对比类问题，Gemini 分析截图的精确度高于文字描述，两者结合是当前最高效的诊断路径。

技巧5：安装并使用 ui-ux-pro-max Skill

frontend-design Skill 改出来的页面仍有"AI 味"，需要针对行业的专属设计建议。

安装：

npm install -g uipro-clicd my-shopuipro init --ai claude

验证安装：

ls .claude/skills/ui-ux-pro-max/# 看到 SKILL.md 和 scripts/ 目录 = 安装成功

在 CC 中让 Skill 先搜索再改页面：

请使用已安装的 ui-ux-pro-max skill，先运行以下命令获取美妆电商设计建议：python3 .claude/skills/ui-ux-pro-max/scripts/search.py \\\\  "beauty cosmetics luxury e-commerce elegant minimalism" \\\\  --design-system --persist -p "美妆内部销售系统" --page "product-list"然后结合搜索结果和 frontend/design-system.md 的约束，改造 frontend/h5/index.html

效果： 内置 50+ 视觉风格、97 个配色方案可搜索，针对行业输出专属推荐，改版效果更有针对性。

概念：Skills 三层叠加模型

同时用了多个工具，弄清楚各自定位避免混用。

frontend-design Skill        → 教 CC 什么是好设计（通用审美基础，自动激活）        +design-system.md             → 告诉 CC 这个项目的具体规范（专属约束）        +ui-ux-pro-max Skill          → 让 CC 查询行业最佳实践（动态数据库）

三者不互相替代：

• 有 Skill 没有 design-system.md → CC 自由发挥，各页面风格漂移
• 有 design-system.md 没有 Skill → 有约束但上限低，仍有"AI 味"
• 有两者但没有 ui-ux-pro-max → 缺少行业针对性

什么时候会用到： 项目有特定行业调性要求时，三层叠加效果最好。

Git 部分才是今天踩坑最多的地方。

坑3：Git 提交用了公司账号

直接提交推送，没有单独配置账号，提交者显示为公司 GitLab 账号。

正确做法：

# 在项目目录内执行，不加 --global，只影响当前项目git config user.name "个人GitHub用户名"git config user.email "个人GitHub邮箱"# 确认配置是否生效git config user.namegit config user.email# 关联个人 GitHub 仓库git remote add origin # 确认关联git remote -v

踩坑原因： git config --global 设置的是所有项目默认账号，不单独配置就继承全局。

记住： 多账号场景，每个新项目进目录后第一件事是执行不带 --global 的 git config。

坑4：Git 第一次提交撤回，reset HEAD~N 直接报错

发现账号配错，需要撤回全部 4 条提交重来。

一开始怎么做的：

git reset --soft HEAD~4

错误信息：

fatal: ambiguous argument 'HEAD~4': unknown revision or path not in the working tree.

正确做法：

# 项目第一次提交（无父提交）时唯一正确的撤回方式git update-ref -d HEAD# 验证git status# 预期：No commits yet，所有文件仍在 staged 状态，代码完整保留

踩坑原因： HEAD~N 需要向前追溯 N 个父提交，第一次提交没有父提交，HEAD~4 找不到引用直接报错。

记住： 第一次提交想撤回用 git update-ref -d HEAD，不是 reset HEAD~N。

坑5：已 push 文件加 .gitignore 无效

pic/ 和 backend/uploads/ 已经 push 到 GitHub，直接在 .gitignore 里加上路径，Git 继续追踪这些文件。

正确做法：

# 取消 Git 追踪，本地文件保留git rm -r --cached pic/git rm -r --cached backend/uploads/# 更新 .gitignore（加入以下两行）# pic/# backend/uploads/git add .gitignoregit commit -m "chore: 从版本控制中移除图片目录"git push origin master

踩坑原因： .gitignore 只对"从未被 Git 追踪过的文件"生效，已提交文件必须先手动取消追踪。

记住： 想忽略已提交的文件：先 git rm --cached，再加 .gitignore，顺序不能反。

坑6：uploads 目录要保留但图片不提交

移除追踪后，整个 backend/uploads/ 目录在 GitHub 上消失了，但程序依赖这个路径存图片。

正确做法：

# 在需要保留的目录内放一个空占位文件echo $null > backend/uploads/.gitkeep

.gitignore 配置：

# 忽略 uploads 内所有文件，但保留目录本身（通过 .gitkeep 占位）backend/uploads/*!backend/uploads/.gitkeep# 忽略临时图片目录pic/

效果： GitHub 上目录存在但只有 .gitkeep；本地图片完整保留；后续新上传图片自动被忽略。

技巧6：Git 分批提交工作流

多个模块同时有改动，分批提交方便后续精确回退。

git add frontend/design-system.mdgit commit -m "docs: 建立美妆系统设计系统 v1.0"git add frontend/h5/git commit -m "feat(h5): 按设计系统重构前台页面，应用 ui-ux-pro-max 优化"git add frontend/admin/git commit -m "feat(admin): 按设计系统重构后台六个页面，统一视觉风格"git add .claude/ .gitignoregit commit -m "chore: 添加 Skills、自定义命令和 gitignore"

Commit Message 类型规范：

feat     → 新功能fix      → 修复问题docs     → 文档/设计规范chore    → 工具/配置类改动style    → 纯样式改动refactor → 重构（不影响功能）

效果： 5 条提交成功推送 GitHub，出问题可精确回退某一个模块。

技巧7：创建 Slash Commands，固化高频工作流

截图诊断和设计系统合规检查每次都要重写 Prompt，效率低。

mkdir -p .claude/commands

.claude/commands/diagnose.md：

---description: 截图诊断页面样式问题，对比设计系统逐项检查---我提供了当前页面的截图，请对比 frontend/design-system.md，逐项检查以下内容是否正确应用：1. 背景色是否为 #FDFAF82. 字体是否为 Cormorant Garamond + Noto Sans SC3. 主色按钮是否为 #C4845A4. 卡片是否有圆角8px + 轻阴影5. 导航栏是否有毛玻璃效果6. 间距是否符合设计系统规范每项输出 ✅已应用 或 ❌未应用 + 原因判断发现 ❌ 的项目直接定位文件修复，修复完告诉我改了哪里。

.claude/commands/review-page.md：

---description: 检查指定页面是否完整符合设计系统规范---请读取 frontend/design-system.md，对 $ARGUMENTS 这个文件做完整的设计系统合规检查：色彩合规：所有颜色是否使用 CSS 变量，无硬编码色值字体合规：标题/价格是否用 --font-display，正文是否用 --font-body组件合规：按钮/卡片/输入框是否符合对应规范动效合规：是否有 fadeInUp 和 hover 反馈输出合规报告，格式：✅ 合规 / ❌ 不合规 + 具体问题最后给出合规评分：XX/100

重启 CC 后生效：/exit 然后重新 claude

使用方式：

/diagnose                               # 配合截图使用/review-page frontend/h5/index.html     # $ARGUMENTS 替换为文件路径/review-page frontend/h5/cart.html

效果： 命令创建后已实际执行，CC 输出了完整合规报告。

概念：$ARGUMENTS 占位符——让命令变成通用工具

在命令文件内容中写 $ARGUMENTS，使用命令时它被替换为命令后面跟的内容：

/review-page frontend/h5/index.html# 执行时：$ARGUMENTS = "frontend/h5/index.html"

什么时候会用到： 需要同一个命令处理不同文件或参数时，用 $ARGUMENTS 代替硬编码路径。

概念：Slash Commands vs Skills，什么时候用哪个

今天同时用了 Skills 和 Slash Commands，搞清楚各自定位。

什么时候会用到： "提升 CC 整体设计能力"用 Skills；"固化有明确步骤的重复任务"用 Commands。

今日踩坑清单

备忘：Prompt 技巧速查

给 CC 精确的指令，比给它"大致方向"省的时间多 10 倍。

用过 Claude Code 做前端改版的，Prompt 一般写多长？我发现超过 5 句话效果就开始变差，你们呢？

#AI编程# #ClaudeCode# #GIT# #前端开发#