Item logo image for OneStyle-可视化标注、编辑网页样式

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

5.0(

1 rating

)
ExtensionTools27 users
Item media 3 (screenshot) for OneStyle-可视化标注、编辑网页样式
Item media 1 (screenshot) for OneStyle-可视化标注、编辑网页样式
Item media 2 (screenshot) for OneStyle-可视化标注、编辑网页样式
Item media 3 (screenshot) for OneStyle-可视化标注、编辑网页样式
Item media 1 (screenshot) for OneStyle-可视化标注、编辑网页样式
Item media 1 (screenshot) for OneStyle-可视化标注、编辑网页样式
Item media 2 (screenshot) for OneStyle-可视化标注、编辑网页样式
Item media 3 (screenshot) for OneStyle-可视化标注、编辑网页样式

Overview

支持在网页上实现类 Figma 式的可视化编辑,可直接调整元素样式、调用样式变量、修改图标等,并导出结构化 Prompt,方便 AI 开发与团队协作。

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

Details

  • Version
    0.5.0
  • Updated
    May 20, 2026
  • Offered by
    AriseJF
  • Size
    179KiB
  • Languages
    中文(中国)
  • Developer
    Email
    arise130315@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes
Google apps