使用 MiniMax Agent 生成高质量 CSS，需要精准控制语义、层级、断点与组件行为：先明确纯 CSS 输出范围，再说明技术栈与设计约束，随后按功能分层结构化生成样式，绑定组件库语义，强制处理真实兼容性问题，最后完成验证并归档到项目目录。
想用 MiniMax Agent 生成高质量、可维护，并且具备响应式布局和动效能力的 CSS 样式，绝不是让它随意输出几行代码就够了。关键在于你要精确控制语义、层级、断点设置以及组件交互行为。你不仅要告诉它“写什么”，还要明确说明“为什么要这样写”，这样生成的 CSS 才更适合真实项目落地。
明确告诉 Agent 你要的 CSS 类型和上下文
第一步：在提示词开头就要锁定输出范围，避免 Agent 擅自补全 HTML 或 JS。可以直接写：“只生成纯 CSS 代码，不包含任何 HTML、JavaScript 或注释，输出格式为标准 CSS 文件内容。”这样能有效减少无关内容，提高 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 会优先基于现有组件库规范来生成样式，而不是脱离项目体系重新拼出一套不统一的 CSS。
强制 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。
确认无误后，再把该 CSS 片段剪切到项目的 src/styles/components/ 目录下对应文件中，命名规则统一使用 component-name.css。