CodeBuddy支持所见即所得实时预览，需先启用Craft模式；HTML元素须添加data-bind属性才能响应动态绑定；CSS自定义属性或class切换可实现样式联动；交互面板需按指令生成并正确注入，否则控件失效。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想实时看到代码修改后的页面效果，不用反复保存、刷新、切换窗口，CodeBuddy能直接在编辑器里联动预览，拖动滑块立刻变字体大小，点开关马上切深色模式，所有改动都秒级响应。
启动CodeBuddy Craft智能体
在VS Code中打开项目文件夹，点击左侧CodeBuddy图标 → 选择【Craft】模式 → 确保右下角状态栏显示“Craft Ready”。【未启用Craft时所有所见即所得功能均不可用】
这一步必须完成，否则后续所有实时调整操作都不会触发预览更新。
让HTML结构支持动态绑定
在index.html的<body>内，为需要响应式控制的元素添加data-bind属性，例如：<h1 data-bind="text: title">默认标题</h1>、<div data-bind="class: theme">内容区</div>。
CodeBuddy会自动识别这些data-bind标记，并将其映射到内部响应式状态对象。不加这个属性的元素，哪怕写进JS变量也不会被实时渲染捕获。
CodeBuddy Code CLI 的安装、配置与使用指南。CodeBuddy Code 是腾讯推出的 AI 驱动 CLI 编程助手，支持自然语言驱动开发。 - 必备触发词：CodeBuddy, codebuddy, AI CLI, Tencent AI coding, @tencent-ai/codebuddy-code, terminal AI assistant - 适用场景：安装 CodeBuddy CLI、配置 CodeBuddy、使用 CodeBuddy 命令、排查 CodeBuddy 问题
配置实时样式联动
方法一：使用CSS自定义属性+JS监听
在style.css中定义：:root { --font-size-base: 16px; --bg-color: #fff; }
在main.js中写：document.documentElement.style.setProperty('--font-size-base', settings.fontSize + 'px');
方法二：直接绑定class切换
给容器元素添加class="theme-light"，再用CodeBuddy生成配套的.theme-dark { background: #1e1e1e; color: #eee; }样式规则，最后通过JS切换class名即可触发重绘。
两种方式都能生效，但方法一更适合细粒度控制（比如单独调行高或圆角），方法二更适合整套主题切换。选错会导致部分样式无法响应变化。
启用交互式控件面板
第一步：在CodeBuddy输入框中发送指令：“为当前页面添加右侧浮动控制面板，包含字号滑块、主题开关、背景色拾取器，所有控件需绑定到页面对应样式属性。”
第二步：等待CodeBuddy生成control-panel.vue组件并注入src/components/目录。
第三步：在App.vue中引入并注册该组件，添加<control-panel />标签到模板末尾。
第四步：运行npm run dev，面板自动悬浮于页面右上角，拖动即生效。
面板位置和尺寸由CodeBuddy默认设定，若手动修改其CSS定位属性，可能导致控件脱离DOM监听范围，失去联动能力。
