设计晨报 往期
← 10月22日
AI 与创作

Skisso:在真实页面上改 UI,把 before/after CSS 差分交给编码 Agent

Skisso 把「那个按钮再大一点」收成可执行的 CSS 差分,让设计师在真页上改完再交给编码 Agent,而不是散文描述。

2026-10-16 Skisso 在 Product Hunt 上线:免费 Chrome 扩展,无账号、本地跑。在 localhost/预发/线上页用快捷键打开,点选任意元素,按页面 token/组件(含匹配现有样式的 shadcn/ui kit)改间距、颜色、字体、布局与文案;一键复制 selector+属性 before/after 差分,或经本地桥 `npx -y skisso` 用 MCP 让 Claude Code、Codex、Gemini CLI、Copilot CLI、Cursor Agent 直接读选中与改动;也可把选中与编辑打成 GitHub issue。厂商自测称差分约 380 tokens,相对整页粘贴约 25,700 tokens。

skisso.app 写明 Select → Change for real → Hand over the patch 与 npx -y skisso;Product Hunt/hunted.space 标注 Featured on October 16th, 2026;token 对比为 maker our test。

为什么值得看

设计师用编码 Agent 改真实产品 UI 时,可直接交出可执行差分,嵌进既有 Agent 工作流,少写模糊口头指示。

可以试试

先在预发页改一条间距/色值,用 Test 式复制差分交给本机 Cursor/Claude Code 看还原率。

原文