Tatendaz

Yapui — Design skill for Claude Code

Design community

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: MIT](https://img.shields.io/badge/License-MIT-111111.svg)](LICENSE) [![Claude Code Skill](https://img.shields.io/badge/Claude%20Code-Skill-d97757.svg)](https://code.claude.com/docs/en/skills) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-2ea44f.svg)](CONTRIBUTING.md)

![YapUI demo](docs/demo.gif)

*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