by kakao
Your agent finally sees the UI it builds. Compose Previews in your browser, redrawn a second after every save — no Android Studio, no build.
# Add to your Claude Code skills
git clone https://github.com/kakao/prevueSee how prevue compares with popular alternatives.
prevue is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by kakao. Your agent finally sees the UI it builds. Compose Previews in your browser, redrawn a second after every save — no Android Studio, no build. It has 61 GitHub stars.
prevue's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/kakao/prevue" and add it to your Claude Code skills directory (see the Installation section above).
prevue is primarily written in Kotlin. It is open-source under kakao on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh prevue against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Your agent says the screen is done. So you open Android Studio, wait for Gradle, and find the padding is off. You take a screenshot, explain what's wrong, and wait for the next try. The agent writes the code, but you're still its eyes — every loop.
And every look costs an IDE. One Preview keeps Android Studio, a Gradle daemon, and a Kotlin daemon running, about 8GB. Give each of three agents its own worktree and you're running three Android Studios.
Here's that loop. Notice who sits in the middle of it.
We hit this every day. With three agents on a 36GB Mac, the Android Studios started swapping and every task slowed to a crawl. Paparazzi and Roborazzi also turn composables into images, but they rebuild for every picture, so they can't keep up with an agent's edits.
Prevue takes you out of that loop.
Prevue redraws the Preview about a second after each save and hands that picture to the agent. Give it a design — a Figma frame, a screenshot, a mockup — and it edits, looks, compares, and edits again on its own. You come back to a finished screen and confirm it in your browser.
Make the ForYouScreen header match this screenshot
Same loop, but now you're outside it.
Screens that only change when you tap or drag are covered too. The agent switches the Preview into interactive mode, sends touches, and gets the new picture back.
Save, and the Preview redraws in about a second without Gradle. Change only a value — padding, a color, a string — and it takes about 0.2 seconds. The agent and you look at the same Preview, so "it's done" and "I see it" happen at the same moment (Benchmark).
Click anything in the Preview and tell your agent what to do with it. No screenshots, no "the second card from the top."
Tighten the padding on this
The agent reads "this" as a file and line. @path#Lline is also copied to your clipboard, so you can paste it into a terminal.
The click pins a box and a file:line tag right where you pointed.
Every worktree gets its own lightweight Prevue daemon. One daemon uses about 1.4GB, 83% less memory than Android Studio.
Even when two agents save at the same time, each window redraws on its own, and when only one saves again, the other stays put.
Installing takes two commands.
If Android Studio is installed, there's no Java to set up, even if your project uses JDK 17. Without Android Studio, install JDK 21 or later and set PREVUE_JDK to its path. You also need the macOS Command Line Tools (python3); if they're missing, the agent opens the installer for you.
# Claude Code
claude plugin marketplace add https://github.com/kakao/prevue.git
claude plugin install prevue@prevue
# Codex
codex plugin marketplace add https://github.com/kakao/prevue.git
codex plugin add prevue@prevue
Then tell your agent the file name. Calling the skill directly is more reliable: /prevue in Claude Code, $prevue:prevue in Codex.
Show the Previews in ForYouScreen.kt
There's nothing to configure. The first time you run it, the agent does the setup it needs, checking with you as it goes. When it's done, your browser opens with every @Preview in that file.
Prevue doesn't change your project's build files, plugins, or tasks, and it doesn't add files to your project. Gradle runs only once per module; after that, even edits to shared modules redraw right away.
Refresh the marketplace info first, then update the plugin. If you skip this step, it reads the old version info and says it is already up to date.
# Claude Code — takes effect after a restart or /reload-plugins
claude plugin marketplace update prevue
claude plugin update prevue@prevue
# Codex — there is no update, so run add again
codex plugin marketplace upgrade
codex plugin add prevue@prevue
Changes are in CHANGELOG.md.
If you get stuck, ask your agent to read prevue log. If that doesn't help, let us know in an issue.
Press ? in the viewer for every shortcut.
Every @Preview in a