使用 MiniMax Agent 生成高质量 CSS，关键在于精准控制语义、层级、响应式断点与组件行为：先明确纯 CSS 的输出范围，再说明技术栈与设计约束，随后按功能分层结构化生成内容，绑定组件库语义，强制处理真实兼容性问题，最后完成验证并归档到项目目录。
想用 MiniMax Agent 生成高质量、易维护、支持响应式布局与动效的 CSS 样式，不能只是让它随意输出几行代码，而是要精确约束语义、结构层级、断点设置和组件行为。你不仅要明确告诉它“要写什么”，还要说明“为什么这样写”，这样生成的 CSS 才更适合真实项目落地。
明确告诉 Agent 你需要的 CSS 类型与项目上下文
第一步：在提示词开头就限定输出范围，避免 Agent 擅自补充 HTML 或 JS。可以直接写：“只生成纯 CSS 代码，不包含任何 HTML、JavaScript 或注释，输出格式为标准 CSS 文件内容。”
第二步：一定要声明项目所使用的技术栈。例如你使用 Tailwind，就可以写“基于 Tailwind CSS v3.4 的 utility-first 风格，使用 @layer 指令组织基础样式、组件、变体”；如果使用原生 CSS，则可以写“使用 CSS 自定义属性（CSS Variables）统一管理主题色、间距、圆角，所有尺寸单位统一为 rem，字体大小使用 clamp() 实现流式缩放”。【如果不说明技术栈，生成的 CSS 很容易与你当前项目环境冲突，比如使用了 rem 却没有设置根字体大小，或者调用了 :has() 但目标浏览器并不支持】
第三步：补充设计稿中的关键约束。例如：“主按钮使用 #3b82f6 蓝色填充，悬停时背景加深 20%，边框圆角为 0.5rem，禁用状态透明度降至 0.4，并设置 pointer-events: none”。Agent 不会主动判断颜色深浅、交互反馈强度等细节，如果这些约束缺失，最终生成的 CSS 往往只是“能运行”，而不是“能上线”。
让 Agent 输出结构清晰、可复用的 CSS 模块
方法一：按功能分层输出
要求 Agent 按照 CSS 架构模块化生成，且顺序不要打乱：
① 基础重置与变量（:root 定义、normalize.css 精简版）→
② 工具类（如 .sr-only、.visually-hidden、.flex-center）→
③ 组件原子类（.btn、.card、.input-field）→
④ 页面级布局类（.hero-section、.feature-grid）→
⑤ 媒体查询断点（min-width: 768px、1200px）中的覆盖规则。
方法二：绑定组件库语义
如果项目使用的是 Ant Design，表达可以更具体，例如这样描述：“按 Ant Design v5.20.0 的 CSS-in-JS 输出规范，生成对应 .ant-btn-primary 的纯 CSS 替代方案，保留其 :focus-visible 的 outline 偏移逻辑，并兼容 dark mode 下的 --ant-color-primary 变量”。这样一来，Agent 调用的是对组件库已有语义的理解，而不是脱离项目上下文重新拼接一套样式规则。
强制 Agent 处理真实项目中的兼容性问题
可以直接给它一个明确痛点：“生成一段兼容 Safari 15.6+ 和 Chrome 110+ 的 CSS 滚动区域平滑动画，使用 scroll-behavior: smooth，同时 fallback 到 transform + transition 方案，并确保 iOS Safari 不触发 overscroll bounce”。【如果只写“加个动效”，Agent 很可能输出 will-change: scroll-position，这在旧版 Safari 中可能导致渲染卡顿，严重时甚至出现白屏】
再补充一句硬性限制：“所有 flex gap 使用 gap 属性，不使用 margin 模拟；所有 grid 布局必须显式声明 grid-template-areas 或 grid-template-columns，禁止用 auto-fit/auto-fill 替代明确列数”。这样可以有效避免常见的偷懒写法，让 CSS 代码更具可读性，也更方便后续调试与维护。
验证并提取最终可用的 CSS 片段
Agent 返回结果后，复制完整 CSS 内容 → 打开 VS Code → 新建 style.minimax.css → 粘贴 → 使用 Prettier 格式化（配置 useTabs: false, tabWidth: 2）→ 保存。
随后直接在浏览器开发者工具中快速验证即可：进入 Elements 面板，选中目标元素，切换到 Styles 标签页，点击右上角的 “+” 新增一条规则，再把 Agent 生成的关键选择器（例如 .btn--primary:hover）粘贴进去。接下来重点检查三件事：样式是否立即生效、是否被其他样式覆盖，以及有没有出现 unexpected inheritance。
确认没有问题后，再将该片段剪切到项目中的 src/styles/components/ 目录下对应文件内，文件命名规则统一为 component-name.css。