想要实现真正的所见即所得（WYSIWYG）实时预览效果？前提是必须优先开启 CodeBuddy 的 Craft 模式，否则后续所有操作均无法生效。每个 HTML 元素都需添加 data-bind 属性，才能被动态绑定机制正确识别；样式联动方案主要有两种：借助 CSS 自定义属性或使用 class 切换；交互控制面板必须严格按指令生成并正确注入到页面中，否则相关控件将直接失效。

试想一下，你在编辑器中修改代码时，页面效果随即同步变化，无需反复保存、刷新或切换窗口。CodeBuddy 就能轻松做到——拖动滑块，字号瞬间调整；点击开关，深色模式即刻切换。所有操作均实现秒级响应。

启动CodeBuddy Craft智能体

在 VS Code 中打开项目文件夹，单击左侧 CodeBuddy 图标 → 选择【Craft】模式 → 确认右下角状态栏显示“Craft Ready”。【未启用Craft时所有所见即所得功能均不可用】此步骤不可跳过，否则后续任何实时调整均不会触发预览更新。

让HTML结构支持动态绑定

在 index.html 的 中，为需要响应式控制的元素添加 data-bind 属性。例如：

默认标题

配置实时样式联动

方法一：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 中引入并注册该组件，在模板末尾添加 标签。
第四步：运行 npm run dev，面板会自动悬浮于页面右上角，直接拖动即可生效。

面板的默认位置及尺寸由 CodeBuddy 设定。若手动修改其 CSS 定位属性，可能导致控件脱离 DOM 监听范围，从而失去联动功能。