Yapui — Design skill for Claude Code
Yap at your UI — live HTML preview with a two-way feedback loop, as a Claude Code skill.
How to install Yapui
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open Tatendaz/yapui and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Yapui does
Yap at your UI — live HTML preview with a two-way feedback loop, as a Claude Code skill.
Alternatives in Design
- Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
- Deepclaude — Use Claude Code's autonomous agent loop with DeepSeek V4 Pro, OpenRouter, or any Anthropic-compatible backend 2.3k ★
- DesignReview — Two-way validation between SwiftUI implementation and Figma designs 512 ★
README
🗣️ YapUI
**Yap at your UI. Watch Claude rebuild it live.**
A [Claude Code](https://claude.com/claude-code) skill that previews your HTML in a real browser and puts a two-way feedback loop on top of it. **Talk, point, record, screenshot or type** — a resident agent picks your note up the instant you hit send, edits the file, and replies in the page. Plain Node, zero npm dependencies, no build step.
[](LICENSE) [](https://code.claude.com/docs/en/skills) [](CONTRIBUTING.md)

*Say "make the hero bigger and the button red" — and watch it happen.*
`open file.html` is a dead end: `file://` blocks the mic and screen capture, and there's no way to tell the AI what to change without typing it all back into the terminal. YapUI is the *conversation* on top of a live server.
Install
Needs **Node 20+**, a **Chromium browser** for screen recording (voice needs Chrome or Edge), and the **`claude` CLI** for instant mode. Pick one route:
npx skills add tatendaz/yapui # any agent — add -g for all your projects
git clone https://github.com/Tatendaz/yapui ~/.claude/skills/yapui # personal, all your projects
git clone https://github.com/Tatendaz/yapui .claude/skills/yapui # this repo, shareable with your team
Or as a plugin, from inside Claude Code:
/plugin marketplace add Tatendaz/yapui
/plugin install yapui@yapui-marketplace
Then look for `/yapui` in the slash-command list. Not there? Run `/reload-plugins`, or restart Claude Code once.
**Or have an agent install it** — paste this into Claude Code:
Install the YapUI skill: clone `https://github.com/Tatendaz/yapui` into `~/.claude/skills/yapui`, confirm `SKILL.md` exists ther
Related Skills
Lvgl Preview Skill
Claude Code skill: design embedded LVGL (MicroPython) UIs with a headless render→PNG feedback loop. Auto-adapt
Doceo
Claude Code skill that teaches you anything in one screen: visual lessons with memory and a feedback loop
Comments Harness
Visual feedback loop for agent-driven frontend work: annotate an element in your dev build, an agent fixes it
HTML It
HTML output skill for Claude agents — 4 levels (Static Doc / Visual Artifact / Two-Way Interactive / Throwaway
Eyes On Claude
👁️ Watch Claude Code work live in your browser: every message, tool call, browser click and design preview, o
Claude Code Statusline Designer
Design, preview and install a themed statusline for Claude Code — 22 themes, live preview, per-color editing,
Related Agents
HTML Show
将 Markdown 文档转为 HTML Preview,支持交互原型、流程图、状态图与能力矩阵。
Preview HTML Author
Use ONLY as part of the /design-md skill pipeline. Builds one self-contained preview HTML file (preview.html)
Ticket Report Auditor
Read-only data audit of a service desk ticket report folder: recomputes every number in the HTML pages (dashbo