使用教程
OneStyle 是什么
OneStyle 是一款面向设计师、产品、前端的 Chrome 浏览器插件，能够直接在网页上可视化编辑、批注体验，一键导出结构化 Prompt，无缝衔接 AI 与团队协作。
1. 核心功能
可视化样式编辑
实时调整尺寸、字体、图标、颜色、间距、圆角、投影。
支持变量调用
识别页面中的 CSS 变量与设计 Token，同时支持自定义导入变量库。
元素批注
可以给元素添加批注，便于 AI 定位上下文。
修改记录汇总
所有改动与批注集中管理，可一键回溯。
结构化 Prompt 导出
一键导出为 JSON 文件或 AI Prompt 文本，粘贴给 ChatGPT、Claude、Cursor 等 AI 工具完成代码生成。
内置第三方图标库
支持通过图标库修改图标，同时支持自定义上传图标库。
2. 适用场景
设计师走查页面样式、产品经理标注改稿意见、前端工程师与 AI 协作开发、设计 / 产研团队基于真实页面进行视觉对齐。
所有数据仅保存在本地浏览器中，不上传任何服务器，遵循最小权限原则。
3. 使用前 vs 使用后
使用前（传统流程）
截图 → 对比 Figma 标注 → 写验收文档 → 拉群对齐 → 前端照着改 → 反复返工 ...
痛点：信息分散、描述模糊、改稿慢、AI 难以介入。
使用后（OneStyle 流程）
打开网页 → 直接编辑 or 批注 → 一键导出 Prompt → 同步开发或喂给 AI
收益：所见即所得、协作零摩擦、AI 直接落地、AI 记录修改内容。
4. 安装方式
- 打开 Chrome 应用商店，搜索 "OneStyle"
- 点击 「添加至 Chrome」
- 完成后，浏览器右上角出现 OneStyle 图标
5. 使用步骤
- 启用插件：打开任意网页，点击工具栏 OneStyle 图标
- 编辑样式：选中元素 → 在侧边栏调整文字、颜色、尺寸等
- 添加批注：选中元素 → 点击批注按钮 → 输入意见
- 批量编辑：选中同类元素，一次修改全部生效
- 查看汇总：在面板中统一管理所有改动与批注
- 导出协作：导出 Prompt 喂给 AI 生成代码；或导出 JSON 发给同事 / 存档 / 跨设备恢复
6. 小贴士
- 所有操作均在本地完成，刷新页面不会丢失
- 与 Cursor、Claude、Copilot 等 AI 编程工具配合更佳
- 适用于设计走查、UI 改稿、vibe coding 提效等场景
还有疑问？
如有使用问题或建议，欢迎联系：arise130315@gmail.com