可视化样式编辑上线：不用 AI 也能改样式，还支持响应式断点

调一个字号、改一个间距、把圆角收小一点——这类改动占了日常编辑的大多数，但过去在 Creght 里它们和「重做一个板块」走的是同一条路：描述给 AI，等它改完。慢，而且消耗积分。

这次我们把这部分能力交回给你：编辑器新增可视化样式编辑，常见样式可以直接调，改完即所见，不消耗 AI 积分。

怎么用

双击页面上的任意元素打开编辑面板，点面板右上角的调色板图标进入设计模式，下方就会出现样式区。

目前可以直接编辑的属性：

• 文字：颜色、字号、字重
• 背景：背景色
• 盒模型：内边距、外边距、圆角
• 布局：间距（gap，可分横向/纵向）

每一项都是「输入框 + 预设下拉」的组合：常用值从下拉里选，特殊值直接手填。每项右侧还有一个删除按钮，用来把这条样式从元素上摘掉、回到继承状态——这比把值改成 0 更干净，因为它删的是代码里那个 class，而不是再叠一层覆盖。

支持响应式断点

字号、字重、圆角这类属性可以按断点分别设置。每行选一个断点（default / sm / md / lg / xl / 2xl）和一个值，点 + 加一行，桌面和移动端不用互相妥协。

配合画板一起用会更直观：页面画板的标题栏上有「+ 添加断点」，可以为同一个页面并排开出不同视口宽度的画板，改完一处，几个断点下的效果同屏就能看到。

它会告诉你这个样式从哪来

样式编辑真正麻烦的地方通常不是「怎么改」，而是「为什么我改了没反应」——值其实定义在父元素上，或者来自主题。所以面板会标注每个属性的来源：

• 继承自某个祖先：显示「继承自 XX · 点击选中」，点一下就跳选到真正定义这条样式的元素上，直接在那里改。
• 来自主题色：显示「主题色 XX · 全站生效」，并明确提示这会修改站点 CSS 里的变量，所有使用该主题色的元素会一起更新。想统一换全站主色，这就是入口；只想改这一个元素，就换成具体颜色。

另外，鼠标悬停或聚焦到内边距、外边距的输入框时，画布上会高亮对应的盒模型区域，不用靠猜哪个数字对应哪一条边。

改动写回的是源码

样式改动会写回页面源码里的 Tailwind class，和 AI 生成的是同一份代码——不额外生成样式覆盖层，也不产生只在编辑器里生效的「隐藏配置」。所以你之后让 AI 继续改这个页面时，它看到的就是你手调后的真实状态。

一并修掉的问题

• 混排文字现在能选中了：段落里文字和元素混排（比如一句话里嵌了个 <strong>）时，双击文字会命中到单独的文本节点上、样式无处可改。现在会自动回退到父元素，字号、颜色、字重都能正常编辑。
• 双击标题偶尔不弹面板：源码 className 带尾随空格时会导致校验永不通过、面板停在加载态。已修复。
• 编辑器不卡了：元素只发生位移时不再重建整棵结构树，只重新测量选中和悬停的元素。页面带动画、滚动，或者拖动板块时，选中框跟随明显更稳。

直接编辑能覆盖的范围越大，AI 积分就越能留给真正需要它的改动——重排布局、新增板块、改文案逻辑。这次是样式，后续我们会继续往这个方向做。