Skisso icon

Skisso

Skisso 是一款基于浏览器的工具,可在实时网页中选择并编辑元素,然后复制结构化补丁供编码代理实现,适合设计师和开发者优化代理构建的页面及 localhost 原型。

Skisso

概览

Skisso 是一款面向使用编码代理的用户的基于浏览器的界面编辑和补丁生成工具。它可以让你在实时页面上选择元素,直接调整渲染结果,并复制对更改的结构化描述,供代理实现。

复制的补丁包含目标元素的地址、已更改的属性以及修改前后的值。该网站将这一工作流定位为用具体的交接信息取代冗长的视觉说明,并表示检查器可以在任何页面上打开,包括 localhost。

功能

点击选择元素

使用 ⌃⇧1 打开检查器,将鼠标悬停在实时页面上,然后点击想要处理的元素。网站称这可以包括按钮、卡片、区块和单行文字。

实时界面编辑

直接在渲染后的页面上修改间距、颜色、字体排版、布局和文案本身,而不是用文字描述预期结果。

生成精确补丁

将更改转换为可直接复制到剪贴板的差异补丁,其中包含元素地址、每个已更改的属性以及修改前后的值。

可选的屏幕截图上下文

补丁可以在结构化更改信息旁附带可选的屏幕截图,为编码代理提供额外的视觉上下文。

从浏览器交接给代理

该工作流旨在连接基于浏览器的界面与在终端中工作的编码代理,包括从 localhost 提供的页面。

使用场景

  • 优化 localhost 原型

    在运行中的本地构建中选择卡片、按钮、标题或区块,调整其外观直到符合预期结果,然后将生成的补丁交给代理。

  • 传达精确的界面调整

    进行小幅视觉修正,例如调整间距、颜色、字体排版或布局,无需花费时间在书面提示中指出目标。

  • 审查代理构建的界面

    当代理根据基于浏览器的审查结果实施更改时,使用修改前后的值和目标地址进行具体交接。

  • 随补丁发送视觉上下文

    当结构化补丁需要有关编辑后状态的额外视觉上下文时,附上可选的屏幕截图。

Pros and Cons

Pros

  • 直接定位渲染界面中的元素,而不只是依赖文字描述。
  • 以包含元素地址和属性值的前后对比补丁展示更改。
  • 支持编辑间距、颜色、字体排版、布局和文案等常见界面细节。
  • 可用于 localhost 页面,并可在交接信息中附带可选的屏幕截图。

Cons

  • 现有来源未说明具体的编码代理集成、浏览器或操作系统支持、定价或团队功能。
  • 该工具的定位围绕 CSS 和实时页面更改;来源未证明其具备更广泛的编辑或生产部署能力。

FAQ

如何打开 Skisso?

Skisso 被描述为一款基于浏览器的工具,在任何页面(包括 localhost)上按下键盘快捷键 ⌃⇧1 即可打开。

如何选择界面元素?

将鼠标悬停在元素上并点击即可选中。页面介绍了按钮、卡片、区块和单行文字等元素的选择。

可以进行哪些更改?

你可以直接在实时页面上调整间距、颜色、字体排版、布局和文案。这些更改被描述为针对渲染界面进行的 CSS 更改。

Skisso 会将什么复制到剪贴板?

按 Enter 可将补丁复制到剪贴板,其中包含所选元素地址、已更改的属性、修改前后的值,以及可选的屏幕截图。随后可以将该补丁交给编码代理。

支持哪些编码代理和平台?

网站明确提到在终端中工作的编码代理,并表示 Skisso 可以在 localhost 上打开。网站未指出具体的代理、集成、操作系统或浏览器要求。

Quick Facts

类别
开发者工具;设计工具
主要工作流
选择元素、编辑实时页面、复制补丁
访问方式
基于浏览器的检查器,使用 ⌃⇧1 打开
输出
包含目标地址、前后值以及可选屏幕截图的剪贴板补丁
代理上下文
面向在终端中工作的编码代理
本地开发
网站称其适用于包括 localhost 在内的页面