应用截图
详细介绍
直接指向界面并实时修改，只复制编码代理所需的具体改动。减少解释、上下文和重试。
Skisso 是面向设计师和前端开发者的可视化检查和编辑工具。
检查正在运行的网页界面，直接在页面上进行视觉修改，截取并标注屏幕截图，再向编码代理或团队提供重点明确的改动说明。
无需凭记忆描述视觉问题，你可以选择具体元素、原位测试修改，并分享由此得到的实现细节。
检查界面
将鼠标悬停在元素上，即可查看尺寸、内边距、外边距和盒模型。点击可选择元素并查看其在 DOM 中的位置。
在父元素、子元素、嵌套元素、伪元素、SVG 和图像之间导航时，当前选中的元素会保持高亮。
也可以检查同源框架内的元素。当浏览器安全限制阻止访问跨源框架的内容时，扩展程序会识别这些框架。
直接在页面上编辑
调整正在运行的界面的视觉属性，即时查看结果。
支持的属性包括：
* 布局和对齐
* 间距和尺寸
* 排版
* 颜色和渐变
* 边框和圆角
* 不透明度
* 阴影和模糊
* 图像
* 默认和悬停状态
如需为多个元素应用相同的值，可以同时选择多个元素。
工作过程中可以撤销编辑。
检查设计令牌
Skisso 会检测当前页面中可用的 CSS 变量、颜色、字体、排版样式和重复出现的值。
浏览检测到的令牌、复用现有值，或测试对关联 CSS 变量的修改。
Library 视图还可以帮助识别页面上已有的重复元素。
处理素材和结构
预览和替换图像、编辑源 URL 和替代文本、调整图像尺寸和适配方式，以及检查 SVG 元素。
探索结构变化时，你还可以移动、调整大小、复制、插入或删除元素。
使用 UI 组件库构建
从开源 shadcn/ui 库中插入按钮、卡片、输入框、对话框和表格等现成组件。每个组件都会采用当前页面的字体、颜色和圆角，使新元素与现有设计相匹配。组件包含在扩展程序中，不会从互联网加载任何内容。插入的组件会显示在 Pending Changes 中，可以撤销。
查看修改
Pending Changes 会记录本次会话中修改过的元素和属性。
你可以用它查看编辑内容、返回已编辑的元素、继续完善结果、重置单项修改或重置会话。
重新加载页面后，可以恢复待处理的编辑。
截取并标注屏幕截图
截取选定区域或可见屏幕。Skisso 会在标注前冻结截取的图像，使底层界面在操作时不会移动。
添加：
* 箭头
* 手绘线条
* 形状
* 高亮
* 文字注释
* 参考线
* 测量标记
标注可以单独移动、复制、编辑或删除。
测量间距和对齐
使用标尺和参考线直观地展示尺寸、距离和对齐关系。
参考线可以是水平、垂直或倾斜的。测量标记可以吸附到附近的元素边缘和中心。
导出结果
复制已标注的截图或将其保存为 PNG。
对于界面编辑，Skisso 还可以生成重点明确的改动说明，其中包含相关选择器、属性、值、文本、属性字段、结构操作和设计令牌。
输出仅包含本次会话中进行的修改，而不是复制整个页面或样式表。
这些内容可以用于你平常的开发工作流程，也可以分享给其他人或开发工具。
可选的本地桥接和 MCP
Skisso 可以连接到在你电脑上运行的可选本地桥接程序。桥接程序提供项目和分支信息，帮助确定视觉修改的开发上下文。
桥接程序也可以充当本地 MCP（Model Context Protocol）服务器，让你在自己电脑上运行的编码工具与打开的 Skisso 面板配合：读取选中的元素及其样式、待处理的修改和页面设计令牌，预览 CSS 修改、选择元素或截取可见标签页。它预览的修改会显示在 Pending Changes 中，并且可以像你自己的编辑一样撤销。
在你自行启动桥接程序并连接工具之前，此连接处于关闭状态，且仅在 Skisso 面板打开时有效。
面板中的 AI 代理
桥接程序运行时，AI 代理模式让你直接在面板中与已安装的编码代理聊天，例如 Claude Code、Codex、Gemini CLI、Copilot CLI 或 Cursor Agent。它可以看到你在页面上选择和修改的内容，预览页面上的 CSS，并且只在你允许时修改项目文件。它使用你自己的代理和账号运行。
将反馈作为 GitHub Issue 提交
将 AI 代理切换到 Issue：你的选择和编辑会生成一份 Issue 草稿，其中包含页面、具体元素和你修改过的 CSS。你可以添加一句说明并点击 Create issue，也可以让代理撰写。选择要提交到的仓库和 GitHub 账号。只有在你点击 Create issue 时，才会通过电脑上的 GitHub CLI 创建 Issue。如果没有 GitHub CLI，Skisso 会打开已填好内容的 GitHub 新建 Issue 页面。
扩展程序本身绝不会写入你的仓库；只有你的编码代理会在获得你允许时执行写入。
真实的网页样式
Skisso 使用浏览器中的真实样式，而不是创建单独的模型表示。
例如：
* 渐变使用 background-image
* 渐变文字使用 background-clip: text
* 渐变边框使用 border-image
这样可以让视觉实验与能够在网页界面中实现的属性保持关联。
隐私
Skisso 不需要账号，也不包含分析或遥测功能。
页面信息和你的交互在浏览器本地处理，用于提供检查、编辑、截图、标注和导出功能。
可选的本地桥接程序运行在 127.0.0.1:3177，与其通信的数据保留在你的电脑上。如果通过 MCP 连接编码工具或在面板中与代理聊天，工具所需的信息会传递给该工具，信息的使用受该工具自身的条款约束。只有在你点击 Create issue 时，Issue 才会通过你选择的 GitHub 账号发送到 GitHub。
如果选择预览 Google 字体，被检查的页面可能会向 Google 请求该字体。
Report a Bug 操作会在你的电子邮件应用中打开草稿。除非你选择发送，否则不会发送任何内容。
SKISSO 的适用范围
Skisso 可用于 localhost、预发布环境、生产网站以及其他允许 Chrome 扩展程序运行的标准网页。
Chrome 不允许扩展程序检查某些受保护的页面，包括 Chrome 内部页面和 Chrome 网上应用店。
浏览器安全限制也可能限制对跨源框架和样式表的访问。
Skisso 帮助你检查界面、测试视觉修改，并将结果交给代理或团队：可以复制修改内容、通过 MCP、在 AI 代理聊天中分享，或作为 GitHub Issue 提交。
指向界面。进行修改。分享结果。