我把figma做到任意网页上
输入“/”快速插入内容
我把figma做到任意网页上
我把figma做到任意网页上
用户4201用户42014月10日修改
https://www.xiaohongshu.com/explore/69d5da7900000000230041e5?note_flow_source=wechat&xsec_token=CB-E6aPuh-TGrJzYiGT3LwcgMAIEIdqSm45pj7qMxJ8W0=
插件下载链接⬇️
https://chromewebstore.google.com/detail/liaison-ai-%E7%BC%96%E7%A8%8B%E5%AE%9A%E4%BD%8D%E3%80%81%E7%BD%91%E9%A1%B5%E6%A0%B7%E5%BC%8F%E7%BC%96%E8%BE%91%E4%B8%8E%E6%89%B9%E6%B3%A8/keeeahbnkkbengbjmmblmpgbccjeoebf?hl=zh-CN&utm_source=ext_sidebar
有朋友反馈说编辑不了本地html 文件，可能需要你手动配置，打开插件管理页面，找到 liaison，点击详情
然后把这里的开关都开启，就可以直接编辑了
提示词
你可以根据提示词去开发自己想要的功能，插件等我代码整理完成后，会开源给大家
提示词
你要基于 VisBug 现有代码架构，二次开发一个新的 Chrome 浏览器扩展产品，名字叫 Liaison。
Liaison 的定位不是普通调试工具，而是一个“AI 编程定位、网页样式编辑与批注”工具。它允许用户直接在任意网页上选中元素，像在 Figma 中一样调整样式、添加评论、查看修改列表，并导出结构化 Prompt 或 JSON 给开发者或 AI 使用。
注意：不是从零重写一个独立插件，而是基于 VisBug 现有能力进行增强开发，尽量复用 VisBug 的底层选择、测量、移动、布局和元素操作逻辑，只替换或扩展上层产品界面与工作流。
目标产品能力：
1. 在网页上直接选中元素，并进行可视化样式编辑。
2. 支持评论模式，对元素添加评论、管理评论。
3. 支持配置列表，汇总整页所有修改和评论。
4. 支持导出 JSON 和结构化 Prompt。
5. 支持 React 开发环境下的组件树 / 源码定位增强。
6. 支持固定编辑器、拖拽吸附、共享元素、批量评论。
7. 提供自定义颜色编辑器，支持纯色和填充渐变。
请按以下方式开发。
一、开发原则
1. 基于 VisBug 现有架构开发，不要推翻重做。
2. 底层优先复用：
- 元素选择
- hover / 选区
- guides / 标尺
- move / 自动布局移动
- 文本编辑
- 样式写回
3. 上层新建 Liaison 的产品层：
- 顶部工具栏
- 样式编辑器
- 评论系统
- 配置列表
- 颜色弹窗
- 导入导出
- Prompt 生成
4. 不允许把所有逻辑揉在一个文件里，必须模块化。
5. 所有 UI 都要考虑：
- 不被网页裁剪
- 不误触页面
- 不轻易失焦
- 状态能恢复
- 页面切换后可缓存恢复
二、建议模块拆分
请按下面模块组织代码。
1. 顶部工具栏模块
职责：
- 模式切换：设计、标尺、评论、自动布局、配置列表、更多
- 工具栏拖动与吸附
- 收起 / 展开
- 快捷键提示
- 更多菜单
- 固定编辑器开关入口
建议文件：
- top-toolbar.element.js
- top-toolbar.element.css
2. 选区与操作协调模块
职责：
- 统一管理当前选中元素、hover 元素、多选元素
- 协调工具模式
- 响应样式变更
- 响应评论变更
- 协调固定编辑器与配置列表互斥
- 处理撤回栈
- 接入 VisBug 原有选择逻辑
建议文件：
- selectable.js
- 相关 selection 组件
3. 样式编辑器模块
职责：
- 渲染右侧编辑器
- 样式 tab / 代码 tab
- 各种字段输入和即时写回
- 固定模式 / 跟随模式
- 拖拽吸附到左 / 右
- 共享元素开关
- 颜色弹窗入口
- 数字输入框交互
- 宽高模式切换
- 盒模型展示
建议文件：
- style-panel.element.js
- style-panel.element.css
- style-panel.js
4. 颜色编辑器模块
职责：
- 自定义颜色弹窗
- 纯色编辑
- 填充渐变编辑
- SV 面板
- 色相 / 透明度滑杆
- Hex / RGB / HSL 切换
- 吸管取色
- 渐变 stop 编辑
- 与编辑器字段双向同步
建议：
- 作为 style-panel 的子模块实现
- 或拆成独立的 color-popover 模块
5. 评论系统模块
职责：
- 评论模式下点击元素添加评论
- 评论列表、编辑、删除
- 评论锚点显示
- 批量评论
- 批量评论与多选元素关联
- 点击评论记录可重新定位
建议文件：
- comment-panel.element.js
- comment feature 相关文件
6. 配置列表模块
职责：
- 汇总所有样式修改和评论
- 支持 tab：全部 / 配置 / 评论
- 支持复制单条 Prompt
- 支持复制整页 Prompt
- 支持定位 / 重置
- 聚合共享元素
- 聚合批量评论
- 打开时与固定编辑器联动
建议文件：
- page-overview-panel.element.js
7. 导入导出与序列化模块
职责：
- 把当前页面状态导出成 JSON
- 导入 JSON 并恢复状态
- 支持新颜色模型
- 支持共享元素
- 支持批量评论
- 支持页面切换缓存
- 生成 Prompt
建议文件：
- liaison-app.element.js 为总入口
- 序列化函数集中管理
三、必须实现的核心功能
1. 顶部工具栏
- 模式：设计、标尺、评论、自动布局、配置列表
- 更多菜单：
- 固定编辑器
- 问题反馈
- 小红书
- 推特
- 工具栏支持拖动
- 自动吸附顶部 / 底部
- 支持收起展开
- 收起后只保留最小入口
2. 样式编辑器
- 样式 tab
- 代码 tab
- 固定编辑器模式
- 固定时可拖到左侧或右侧
- 拖动时在拖手附近出现左右吸附提示浮层
- 输入项包括：
- 文本
- 宽高
- 固定 / 自适应 / 填充
- 自动布局
- gap
- padding
- 字体、字重、字号、行高、字距、对齐
- 文字颜色
- 图层透明度
- 圆角
- 填充
- 描边
- 投影
3. 数字输入交互
- 上下键增减数值
- 拖拽图标左右调整数值
- padding 拖动时元素上显示可视化间距预览
- 透明度限制在 0 到 100
- 松手后输入框值与最终样式值一致
4. 颜色编辑器
- 不允许再用原生 color input 作为主交互
- 自定义颜色弹窗
- 支持：
- 实色
- 渐变（仅填充）
- SV 面板
- 色相
- 透明度
- 格式切换
- 吸管取色
- 渐变角度
- stop 增加 / 删除 / 切换 / 拖拽
- 颜色拖动时：
- 页面元素实时变化
- 编辑器字段值也实时变化
- 填充渐变在编辑器中显示“渐变填充”
5. 评论
- 单元素评论
- 多选批量评论
- 批量评论只生成一条记录
- 记录中明确写出作用到哪些元素
- 支持编辑和删除
6. 配置列表
- 所有修改和评论统一汇总
- 同一元素只一条记录
- 共享元素只一条记录
- 批量评论只一条记录
- tab 平分宽度
- 显示各 tab 数量
- 支持复制 Prompt
- 支持导入 / 导出
7. 导入导出
- JSON 需要能恢复：
- 文本修改
- 样式修改
- 纯色
- 填充渐变
- 描边
- 投影
- 评论
- 共享元素
- 批量评论
- 导出格式需要同时适合：
- 插件自身恢复
- AI 阅读
8. React 开发增强
- 在开发环境下尝试从 React Fiber 读取：
- Component Tree
- Source
- 如果拿不到，安全降级
四、建议的数据结构
请统一围绕“一个元素一条记录”组织，但支持组信息。
每条记录至少包括：
- id
- elementPath
- groupedElementPaths
- label
- heading
- element.identity
- element.text
- element.frame
- source
- reactComponentTree
- styleText
- managedData
- configs
- comments
- feedback
颜色相关 managedData 建议支持：
- textColorConfig
- hex
- opacity
- strokeColorConfig
- hex
- opacity
- shadowLayerNColorConfig
- hex
- opacity
- fillLayerNConfig
- mode: solid | gradient
- hex
- opacity
- angle
- stops: [{ hex, opacity, position }]
- preview
五、开发步骤
请按这个顺序开发，不要乱序堆功能。
第 1 步：基于 VisBug 接管顶部工具栏和模式切换
- 先让 Liaison 自己的工具栏跑起来
- 先复用 VisBug 选择 / 标尺 / move
第 2 步：完成样式编辑器基础能力
- 文本
- 宽高
- gap / padding
- 字体
- 透明度
- 圆角
- 填充 / 描边 / 投影
- 先保证输入稳定、不失焦
第 3 步：完成配置列表
- 汇总所有修改
- 定位、重置、复制
- 打通导入导出骨架
第 4 步：完成评论系统
- 单元素评论
- 评论锚点
- 评论列表
- 批量评论
第 5 步：完成固定编辑器
- 固定左 / 右
- 拖动吸附
- 左右吸附提示浮层
- 状态持久化
第 6 步：完成颜色编辑器
- 先做纯色
- 再做填充渐变
- 最后补吸管和格式切换
- 保证拖动实时更新，不回退
第 7 步：完成共享元素
- 开关
- 同类元素同步
- 配置列表聚合
- 导入导出恢复
第 8 步：完成 Prompt 和 React 上下文增强
- Page Feedback 输出
- Targets
- Component Tree
- Source
六、关键交互约束
1. 编辑器输入框不能轻易失焦。
2. Tab 在编辑器里优先切换输入框，不要误触工具栏。
3. Ctrl+Z / Cmd+Z 支持撤回样式修改。
4. 颜色弹窗、更多菜单、吸附提示、配置列表都不能被宿主容器裁剪。
5. 打开配置列表时，固定编辑器临时取消固定；关闭后恢复。
6. 浮层要挂在正确层级，避免跟页面元素抢事件。
7. 所有对页面的修改都要尽量实时预览，松手后正式提交。
七、输出要求
请输出：
1. 完整代码实现
2. 目录结构
3. 每个模块职责说明
4. 样式和状态管理说明
5. JSON 导出示例
6. Prompt 导出示例
7. 如何基于 VisBug 复用底层能力的说明
不要只给伪代码。请尽可能输出接近可运行、可直接继续开发的完整实现。