Item logo image for Sidetation

Sidetation

ExtensionDeveloper Tools2 users
Item media 2 (screenshot) for Sidetation
Item media 1 (screenshot) for Sidetation
Item media 2 (screenshot) for Sidetation
Item media 1 (screenshot) for Sidetation
Item media 1 (screenshot) for Sidetation
Item media 2 (screenshot) for Sidetation

Overview

像设计师一样拖拽网页元素，导出结构化修改记录给 AI。点击图标开启/关闭编辑模式。

Sidetation 让你在任何网页上「所见即所得」地表达设计意图，不再用文字向 AI 描述「按钮往左一点、再小一点」。 【怎么用】 点击工具栏图标开启编辑模式，再点一次关闭。页面右下角出现工具栏后： · 点选任意元素，直接拖动位置（自动吸附对齐参考线） · 8 个手柄缩放大小，Shift 锁定宽高比 · Figma 式属性面板：flex 布局、四边 padding、背景色、描边、圆角、透明度 · 双击纯文本元素，行内直接改文字 · Delete 删除元素，⌘Z / Ctrl+Z 全程撤销重做 【导出】 每处修改自动记录为「稳定选择器 + before/after 盒模型 + 样式变更」，附前后对比快照缩略图： · 复制 Markdown：粘给 Claude Code、Cursor 等 AI coding agent，让它改真实源码 · 复制 CSS：得到可直接粘贴的样式覆盖 【安全与隐私】 · 仅在你点击图标的页面注入，不后台运行，不读取其他标签页 · 不收集、不上传任何数据，无远程请求 · 所有修改只存在于当前页面，刷新即消失 【适合谁】 设计师、前端工程师、产品经理——所有需要向 AI 或同事精确表达「页面应该改成什么样」的人。 开源项目：https://github.com/tllll64/Sidetation

Details

  • Version
    0.4.0
  • Updated
    July 4, 2026
  • Size
    19.21KiB
  • Languages
    中文（中国）
  • Developer
    Email
    astro12138@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.

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