OneStyle-可视化标注、编辑网页样式

Tracking since May 12, 2026.

Changelog

• May 24, 2026
  description

  v0.3.1 更新：
  • 新增：可视化删除元素——Delete 键 / 删除按钮
  • 新增：导入颜色变量时支持文件拖入 / 文件上传
  • 新增：颜色变量库最多 5 个，支持折叠/展开
  • 优化：增加个性化主题切换按钮
  • 修复：使用教程链接修复
  
  介绍
  OneStyle 是一款面向设计师、产品、前端的 Chrome 浏览器插件，能够直接在网页上可视化编辑、批注体验，一键导出结构化 Prompt，无缝衔接 AI 与团队协作。
  
  核心功能
  • 可视化样式编辑：实时调整尺寸、字体、图标、颜色、间距、圆角、投影。
  • 支持变量调用：识别页面中的 CSS 变量与设计 Token，同时支持自定义导入变量库。
  • 元素批注：可以给元素添加批注，便于AI定位上下文。
  • 修改记录汇总：所有改动与批注集中管理，可一键回溯。
  • 结构化 Prompt 导出：一键将所有修改导出为结构化 JSON 文件或 AI Prompt 文本，直接粘贴给 ChatGPT、Claude、Cursor 等 AI 工具完成代码生成。
  • 内置第三方图标库：支持通过图标库修改图标，同时支持自定义上传图标库。
  
  适用场景
  设计师走查页面样式、产品经理标注改稿意见、前端工程师与 AI 协作开发、设计 / 产研团队基于真实页面进行视觉对齐。
  所有数据仅保存在本地浏览器中，不上传任何服务器，遵循最小权限原则。

  v0.5 更新：
  • 新增导出截图功能
  
  介绍
  OneStyle 是一款面向设计师、产品、前端的 Chrome 浏览器插件，能够直接在网页上可视化编辑、批注体验，一键导出结构化 Prompt，无缝衔接 AI 与团队协作。
  
  核心功能
  • 可视化样式编辑：实时调整尺寸、字体、图标、颜色、间距、圆角、投影。
  • 支持变量调用：识别页面中的 CSS 变量与设计 Token，同时支持自定义导入变量库。
  • 元素批注：可以给元素添加批注，便于AI定位上下文。
  • 修改记录汇总：所有改动与批注集中管理，可一键回溯。
  • 结构化 Prompt 导出：一键将所有修改导出为结构化 JSON 文件或 AI Prompt 文本，直接粘贴给 ChatGPT、Claude、Cursor 等 AI 工具完成代码生成。
  • 内置第三方图标库：支持通过图标库修改图标，同时支持自定义上传图标库。
  
  适用场景
  设计师走查页面样式、产品经理标注改稿意见、前端工程师与 AI 协作开发、设计 / 产研团队基于真实页面进行视觉对齐。
  所有数据仅保存在本地浏览器中，不上传任何服务器，遵循最小权限原则。

• May 17, 2026
  description

  介绍
  OneStyle 是一款面向设计师、产品、前端的 Chrome 浏览器插件，能够直接在网页上可视化编辑、批注体验，一键导出结构化 Prompt，无缝衔接 AI 与团队协作。
  
  核心功能
  • 可视化样式编辑：实时调整尺寸、字体、图标、颜色、间距、圆角、投影。
  • 支持变量调用：识别页面中的 CSS 变量与设计 Token，同时支持自定义导入变量库。
  • 元素批注：可以给元素添加批注，便于AI定位上下文。
  • 修改记录汇总：所有改动与批注集中管理，可一键回溯。
  • 结构化 Prompt 导出：一键将所有修改导出为结构化 JSON 文件或 AI Prompt 文本，直接粘贴给 ChatGPT、Claude、Cursor 等 AI 工具完成代码生成。
  • 内置第三方图标库：支持通过图标库修改图标，同时支持自定义上传图标库。
  
  适用场景
  设计师走查页面样式、产品经理标注改稿意见、前端工程师与 AI 协作开发、设计 / 产研团队基于真实页面进行视觉对齐。
  所有数据仅保存在本地浏览器中，不上传任何服务器，遵循最小权限原则。

  v0.3.1 更新：
  • 新增：可视化删除元素——Delete 键 / 删除按钮
  • 新增：导入颜色变量时支持文件拖入 / 文件上传
  • 新增：颜色变量库最多 5 个，支持折叠/展开
  • 优化：增加个性化主题切换按钮
  • 修复：使用教程链接修复
  
  介绍
  OneStyle 是一款面向设计师、产品、前端的 Chrome 浏览器插件，能够直接在网页上可视化编辑、批注体验，一键导出结构化 Prompt，无缝衔接 AI 与团队协作。
  
  核心功能
  • 可视化样式编辑：实时调整尺寸、字体、图标、颜色、间距、圆角、投影。
  • 支持变量调用：识别页面中的 CSS 变量与设计 Token，同时支持自定义导入变量库。
  • 元素批注：可以给元素添加批注，便于AI定位上下文。
  • 修改记录汇总：所有改动与批注集中管理，可一键回溯。
  • 结构化 Prompt 导出：一键将所有修改导出为结构化 JSON 文件或 AI Prompt 文本，直接粘贴给 ChatGPT、Claude、Cursor 等 AI 工具完成代码生成。
  • 内置第三方图标库：支持通过图标库修改图标，同时支持自定义上传图标库。
  
  适用场景
  设计师走查页面样式、产品经理标注改稿意见、前端工程师与 AI 协作开发、设计 / 产研团队基于真实页面进行视觉对齐。
  所有数据仅保存在本地浏览器中，不上传任何服务器，遵循最小权限原则。

Permissions & access

Permissions

activeTabscriptingstorageclipboardWrite

Host access

None declared

Screenshots