Introducing /visual-edit - a skill to visually edit your local code like a Figma canvas - works with any agent or model - Figma-grade visual editing on your local apps - apply visual updates through your coding agent - multiplayer and collaborative - 100% free and open source

Skill source is here: Uses Agent-Native Design (also free/open source) for the visual editing: Install with: npx @agent-native/core@latest skills add visual-edit

ooooh this looks incredibly useful. thanks!!

thanks Travis!

does the visual edit land as a diff or as a prompt back to the agent?

prompt back to the agent that includes a diff + some useful metadata (like origin line of code of each element edited, etc)

You just killed figma

How is it different then asking my agent to look at the latest figma design and apply the changes?

This is for visually editing your code directly. So pulling your current app screens into the editor, editing however you like, and writing the code changes back

Yea that's pretty cool. It would be nice if it could work through figma so there's one design tool in the mix.

I'd want to see whether a visual edit changes one instance or the shared component. Dragging 1 card shouldn't quietly change all 20 screens.

you can specify those things to your agent and it'll implement accordingly

ローカルのアプリをFigmaみたいに触れるの、触ってみたくなります！画面を見ながら直せるのは助かります。

visual edit for a local app through an agent means your padding now has opinions and a commit history

Visual edit needs the same receipt as codegen: selected node, before screenshot, patch diff, model instruction, and verifier result. Agents can hand off UI changes without pretending pixels are covered by a passing test.

Damn, you're on a roll recently. This looks really useful.

thanks Adam!

Cool when working with a design system such as taimwind or existing components and css globals could it use those instead of overriding with custom styling ?

i'd test visual-edit across responsive breakpoints first, canvas-perfect css often fails outside one viewport

try it out and lmk your feedback - I think you’ll find that it’s spot on

i built similar using react-grab in @vite_js plugin

界面上直接拖样式 比对着代码抠强多了 这手感对了

“Still nudging pixels one prompt at a time?” goes hard

finally. been wanting Figma-style editing on local code forever

did not expect /visual-edit on local apps

Ive built something like this. The problem is that this is an extra step when you can virtually do the same straight on the live site

Stop using your tools because it required login which broke sessions.

wdym?

This is what @pendev does and it's been a blast to work with!

跨代理兼容才是关键，改完落回代码也方便做 diff 审查

Interesting skill! Bookmarking it for later, but curios: Has this impacted token use if at all? im assuming theres a lot of token payload sent to the agent for the diff feedback and what not

Cool!! I took a slightly different approach to the same problem of review: open source as well 😇

@tempoimmaterial It can be any arbitrary code?

@tempoimmaterial can!