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

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

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

Products

[AI Website Builder](/en/ai.md) [Visual Website Builder](/en/design.md)

Solutions

[Designer Portfolio](/en/solution/designer-portfolio.md) [Foreign Trade Website](/en/solution/foreign-trade-website.md)

[Pricing](/en/price.md) [Help Center](/en/help.md)

[Resources](/en/resources.md)

[All Resources](/en/resources.md) [Templates](/en/templates.md) [Components](https://creghtlib.site.creght.com/) [Animations](/en/effects.md) [Resources](https://www.figma.com/community/file/1529413044116674277)

[Contact Us](/en/contact.md)

[Get Started](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)

This website is built with [Creght](/en.md)

![User Community](https://ugc.talizen.com/_assets/site/2061660904709165056/1781070374701__help_qr.webp)

User Community

## Links

- [Pricing](/en/price.md)
- [Solutions](/en/solution.md)
- [Customers](/en/customers.md)
- [Help Center](/en/help.md)
- [Contact Us](/en/contact.md)
- [Blog](/en/blogs.md)
- [Refund Policy](/en/tuikuan.md)

## Resources

- [All Resources](/en/resources.md)
- [Templates](/en/templates.md)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/en/effects.md)
- [Figma to Creght](/en/figma2creght.md)
- [API for AI](/en/api.md)

## Comparisons

- [vs Shianxianle](/en/creght-vs-sxl.md)
- [vs Fanke](/en/creght-vs-fkw.md)
- [自己写代码 vs Creght](/en/compare/self-coding.md)
- [外包 vs 自己做](/en/compare/outsourcing.md)

## Terms

- [Terms of Service](/en/legal/terms.md)
- [Privacy Policy](/en/legal/privacy.md)
- [Acceptable Use Policy](/en/legal/acceptable-use.md)

## Social Media

- [Xiaohongshu](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [Bilibili](https://space.bilibili.com/513308095)

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