Kimi可自动优化前端CSS样式，需提供结构清晰的原始CSS片段并使用约束型、对比迁移或缺陷修复类精准指令，再经实时渲染、响应式测试和Git diff三步验证确保安全。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让Kimi自动优化前端CSS样式，而不是手动逐行修改代码，避免因字体、间距、响应式断点等细节反复调试浪费时间。
准备可被AI理解的CSS上下文
在向Kimi提交优化请求前，必须提供结构清晰、语义明确的原始CSS片段。不要直接粘贴压缩后的单行CSS或混杂了JS逻辑的style标签内容。
打开你的项目中待优化的CSS文件（如src/styles/main.css），复制其中需要调整的模块——例如导航栏、卡片组件或表单区域——确保包含选择器名称、关键声明及注释（如有）。
将这段CSS粘贴进Kimi对话框时，在其上方添加一行说明：【请基于以下CSS代码，按指定要求进行样式优化，仅输出修改后的纯CSS代码块，不解释、不新增类名、不改动HTML结构】。这能强制Kimi进入“精准改写”模式，避免它擅自重写DOM或引入新框架。
立即学习“前端免费学习笔记（深入）”；
编写高精度CSS优化Prompt
用自然语言描述视觉目标，但必须绑定具体CSS属性和数值范围。模糊指令如“让按钮看起来更现代”会导致结果不可控。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
方法一：约束型指令（推荐用于生产环境）
“将所有.btn-primary选择器的padding值统一改为0.75rem 1.5rem；border-radius设为6px；hover状态下的background-color必须使用HSL色值，主色相保持210°，饱和度提升至85%，亮度降至60%；禁用box-shadow”
方法二：对比迁移指令（适用于品牌升级）
“参照Ant Design v5.12.3中Button组件的默认尺寸与圆角规范，将当前项目中所有.button-*类的line-height、font-size、border-radius映射调整，但保留现有#3b82f6主色调不变”
方法三：缺陷修复指令（适合紧急上线前）
“检测以下CSS中导致移动端列表项文字溢出容器的属性组合，并只修正该问题：.list-item { display: flex; width: 100%; overflow: hidden; text-overflow: ellipsis; } —— 注意：不得删除overflow或text-overflow声明，仅调整width或添加white-space: nowrap”
执行三步验证闭环
第一步：运行Kimi生成结果后，立即将输出粘贴进浏览器开发者工具的Styles面板对应规则处，观察实时渲染变化。
第二步：在Chrome DevTools中启用Rendering → Emulate CSS media features，切换到max-width: 480px视口，确认响应式断点未被破坏。若出现布局坍塌，说明Kimi误删了@media规则或flex-wrap属性。
第三步：用Prettier格式化Kimi返回的CSS代码，再与Git历史版本diff比对——重点检查是否意外修改了【:root中定义的CSS变量值】。这类全局变更极易引发跨组件样式污染，必须人工复核。
