StyleBop 是一款面向 CSS 文件的可视化编辑器。打开一个文件夹，即可得到由每条规则集组成的清爽画布，用真正的取色器编辑颜色与渐变，在时间轴上构建关键帧动画，并跨文件管理设计令牌。 它将纯 CSS 写入磁盘。没有私有格式，没有构建步骤，没有锁定。用任何其他编辑器打开同一个文件夹，差异都清清爽爽。 内含功能 • 规则集画布——每个 CSS 选择器都成为一个可点击进入的节点。用类型感知的
StyleBop 是一款面向 CSS 文件的可视化编辑器。打开一个文件夹，即可得到由每条规则集组成的清爽画布，用真正的取色器编辑颜色与渐变，在时间轴上构建关键帧动画，并跨文件管理设计令牌。 它将纯 CSS 写入磁盘。没有私有格式，没有构建步骤，没有锁定。用任何其他编辑器打开同一个文件夹，差异都清清爽爽。 内含功能 • 规则集画布——每个 CSS 选择器都成为一个可点击进入的节点。用类型感知的弹出面板编辑属性：取色器、渐变构建器、box-shadow 堆栈、cubic-bezier 曲线编辑器、网格模板、滤镜链。 • 令牌标签页——把你的 :root 自定义属性和 @font-face 字体族集中在一处。每个变量都有用量追踪器，显示每个引用它的文件和规则集。"0 处引用——可安全删除"，让无用令牌不再堆积。 • 动画标签页——带可拖动停靠点的关键帧时间轴、在画布上实时运行的预览、cubic-bezier 曲线编辑器。 • 代码标签页——完整的文本视图，支持自动补全、智能输入（在 color: 行粘贴一个 hex 即可直接生效），以及项目级查找/替换。 • 提取为变量——选取任意字面值，按下快捷键，StyleBop 便会把整个项目中每一处匹配的出现重写为 var(--name)。建议的命名采用精选调色板，于是 #6495ED 会变成 --color-cornflower，而非 --color-6495ed。 现代 CSS @layer 级联层、@container 容器查询、@supports 特性查询、@media 包装、CSS 嵌套、@keyframes、@font-face——全部作为一等构造解析，保存时按字节完美还原。 Tailwind v4 @theme 块被识别为设计令牌区域。Tailwind 风格的文件在提取为变量时会得到 Tailwind 风格的建议（--color-blue-500 而非 --color-cornflower），新令牌会落入现有的 @theme 块内。 多语言支持 界面支持十一种语言：英语、西班牙语、法语、德语、意大利语、巴西葡萄牙语、日语、韩语、乌克兰语、俄语、简体中文。 编辑器集成 在 VS Code 或 JetBrains IDE 中右键点击任意 CSS 文件，选择"在 StyleBop 中打开"——应用即会启动并定位到你光标所在的构造。免费配套扩展可在 VS Code Marketplace 和 JetBrains Marketplace 获取。
| # | Name | Price | Currency | Region |
|---|---|---|---|---|
| 1 | Item | ¥ 68 | CNY | 中国 |
