asifhussain60

Mirror UI — Design agent for Claude Code

Design community

Build a throwaway, fully interactive HTML mirror of a proposed UI screen — any tech stack (PySide6/Qt, SwiftUI, Tkinter, terminal, React, plain HTML) — at the real thing's exact pixel dimensions, usin.

How to install Mirror UI

Installs to ~/.claude/agents/asifhussain60-claude-skills-mirror-ui.md

Terminal

mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/asifhussain60/claude-skills/HEAD/agents/mirror-ui.md -o ~/.claude/agents/asifhussain60-claude-skills-mirror-ui.md

Restart Claude Code, or start a new session, for it to be picked up.

What Mirror UI does

name: mirror-ui description: Build a throwaway, fully interactive HTML mirror of a proposed UI screen — any tech stack (PySide6/Qt, SwiftUI, Tkinter, terminal, React, plain HTML) — at the real thing's exact pixel dimensions, using the project's own colours, type sizes and copy, so a change can be seen and operated before any app code is written. Use it proactively for every UI/UX proposal that needs sign-off. Not a verification tool — it never proves the real app renders correctly.

mi

Alternatives in Design

Omd Kr Writer — Korean blog / long-form writer with 6 voice presets (toss-tech-design, karrot-neighborly, brunch-maker-popular 465 ★
Dx Engineer — Use for the verdict output surface (human line, --json, truncation notices), CLI ergonomics, error message qua 179 ★
Experience Reviewer — Use when reviewing the experience dimension of a written plan (UX + DX) 98 ★