墨刀ai生成的vue/react代码本地运行后样式异常，主因是全局样式未引入、scoped阻断级联、css变量未定义或图标库未安装注册。需手动在main.ts中import全局样式，检查scoped使用方式，确认:root变量定义及lucide依赖安装与注册。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
墨刀AI生成的Vue或React代码在本地运行后页面空白、文字堆叠、按钮无圆角、颜色全灰，根本看不出设计稿里的视觉效果，这种问题在导入Vite或Vue CLI项目后高频出现。
检查样式文件是否被正确引入
打开生成的代码目录，确认是否存在 src/assets/styles.css 或 src/style.scss 类似路径的样式文件。墨刀AI默认将全局重置、字体、间距、主题色等写入独立样式文件，但不会自动在 main.ts 或 main.js 中 import 它。
若未引入，需手动在入口文件顶部添加：import '@/assets/styles.css'（路径以实际生成为准）。
这一步漏掉，整个UI就只剩HTML骨架——没有字号、没有行高、没有padding，所有元素会塌缩到左上角。
确认组件内样式是否启用 scoped
查看任意一个 .vue 文件的 <style></style> 标签，检查是否带有 scoped 属性。墨刀AI生成的组件默认启用 scoped，这是为了防止样式污染，但也会导致全局样式（如 reset.css、theme.css）无法穿透作用到组件内部。
如果全局样式已正确引入，但组件内按钮/卡片仍无样式，大概率是 scoped 阻断了级联。此时有两种处理方式：
方法一：临时移除 scoped，验证是否为作用域问题。移除后若样式恢复，说明设计稿依赖的全局类名（如 .btn-primary、.card-shadow）需要通过 :global() 显式释放；
方法二：保留 scoped，在 style 标签下补充 :global(.reset-body) { ... } 或用 <style></style> 外部单独加载非 scoped 主题样式。
【注意：不要直接删掉所有 scoped 后提交到团队项目，这会引发样式冲突】
排查 CSS 变量是否生效
墨刀AI生成的样式大量使用 CSS 自定义属性（如 --color-primary、--spacing-md），这些变量定义在 :root 或全局样式中。打开浏览器开发者工具 → Elements → 选中任意元素 → 查看 Computed 标签页，搜索 color 或 background，确认变量值是否解析为真实颜色（如 rgb(30, 144, 255)）。
若显示 var(--color-primary, #007bff) 且未降级，说明变量未定义。此时需检查全局样式文件中是否包含完整的 :root 块，以及该文件是否在组件渲染前已加载。
常见错误：把 variables.css 放在组件 style 标签下，而非全局入口样式中。
验证图标库是否安装并注册
第一步：检查 package.json 中是否有 lucide-vue-next（Vue）或 lucide-react（React）。墨刀AI默认使用 Lucide 图标，但不会自动执行 npm install。
第二步：若已安装，打开 main.ts，确认是否执行了 app.use(LucideVue)（Vue3）或组件内是否正确引入并使用了 import { Home } from 'lucide-react'。
第三步：若图标显示为方块或空白，打开控制台 Network 标签页，过滤 css/js，确认 lucide 相关资源是否 404。未安装时，图标占位符会破坏布局流，间接导致周围元素样式错乱。
