MasterGo中CSS代码通过研发模式自动生成并复制，不手写样式表。进入研发模式（Shift+D）→ 选中图层 → 检查面板「代码」页签选择CSS → 点击「复制」按钮获取含类名、盒子模型及样式的标准CSS片段。
在MasterGo中直接添加CSS代码不是通过手写样式表实现的，而是借助研发模式下的代码标注功能，将设计图层属性实时映射为可复制的CSS片段。这个过程不涉及编辑.css文件，而是从视觉元素反向生成符合W3C规范的CSS声明。
进入研发模式并定位图层
打开设计文件 → 按 Shift+D 快捷键一键切换至研发模式 → 在左侧图层面板中点击目标图层，或直接在画布上单击选中该元素。
若图层嵌套过深，右键画布 → 选择「选择图层」→ 在弹出菜单中逐级展开并点选目标节点。这一步必须完成，否则检查面板不会显示任何CSS信息。
查看并复制自动生成的CSS代码
右侧检查面板自动刷新，切换到「代码」页签 → 确保语言下拉菜单选择「CSS」→ 单位设为「px」（默认）→ 点击「布局」或「样式」右侧的「复制」按钮。
立即学习“前端免费学习笔记（深入）”；
复制的内容包含完整的类名（如 .header-123）、盒子模型（width、height、margin、padding）和基础样式（background-color、font-size、border-radius等）。【注意：该CSS不含媒体查询或伪类，仅反映当前图层静态状态】
在VS Code中用MasterGo插件增强CSS生成
方法一：安装 MasterGo For VS Code 插件 → 登录授权 → 在编辑器中打开一个 .css 文件 → 将光标置于大括号内 → 输入 dis → 触发智能补全 → 选择提示中的 display: flex; 等声明。
方法二：在VS Code中打开设计稿 → 底部状态栏点击「Ready for Dev」→ 选中图层 → 点击「复制CSS」→ 粘贴到项目样式文件中。此方式生成的代码已自动带前缀（如 -webkit-），兼容性更强。
方法三：在CSS文件中写好选择器（如 .card），然后在MasterGo研发模式中选中对应图层 → 右键图层 → 「复制 / 粘贴为 → CSS」→ 直接覆盖已有规则。这一步会保留你手动写的注释和结构，只更新属性值。
导出整页CSS用于前端集成
第一步：确保所有需导出的图层已标记为「可开发状态」（在设计模式下右键图层 → 「设为可开发」）。
第二步：进入研发模式 → 左侧边栏点击「开发状态」→ 点击顶部「全部」筛选 → 勾选需要导出的图层组。
第三步：点击右上角「导出代码」→ 选择「CSS」格式 → 设置缩放比例为1 → 点击「下载」。生成的CSS文件以 mastergo-export.css 命名，含完整类名层级与重置样式。
