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

> 编辑器新增设计模式，颜色、字号、字重、间距、圆角都可以直接调，支持按响应式断点分别设置，改动写回源码里的 Tailwind class，不消耗 AI 积分。

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)](/)

产品

[AI 建站](/ai.md) [可视化建站](/design.md)

解决方案

[设计师作品集](/solution/designer-portfolio.md) [外贸独立站](/solution/foreign-trade-website.md)

[价格](/price.md) [帮助中心](/help.md)

[资源广场](/resources.md)

[全部资源](/resources.md) [模板](/templates.md) [组件库](https://creghtlib.site.creght.com/) [动效库](/effects.md) [素材库](https://www.figma.com/community/file/1529413044116674277)

[联系我们](/contact.md)

[立即体验](https://creght.cn/project)

[返回博客](/blogs.md)

更新日志2026-07-26

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

编辑器新增设计模式，颜色、字号、字重、间距、圆角都可以直接调，支持按响应式断点分别设置，改动写回源码里的 Tailwind class，不消耗 AI 积分。

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

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

## 怎么用

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

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

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

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

## 支持响应式断点

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

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

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

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

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

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

## 改动写回的是源码

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

## 一并修掉的问题

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

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

[2026-07-26\
\
访问统计升级与在线客服](/blogs/analytics-and-support.md)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![用户交流群](https://ugc.talizen.com/_assets/site/2061660904709165056/1781070374701__help_qr.webp)

用户交流群

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/effects.md)
- [Figma to Creght](/figma2creght.md)
- [AI 编程指南](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)