Dananz

Prototype Skill — Design skill for Claude Code

Design community

Claude Code skill: build several versions of a UI feature side by side, preview them over Tailscale, pick the best.

How to install Prototype Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Dananz/prototype-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Prototype Skill does

Claude Code skill: build several versions of a UI feature side by side, preview them over Tailscale, pick the best.

Alternatives in Design

Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★
Mockup — Create a visual UX mockup for a requested feature or screen 1.6k ★
Design Feature — Design a new feature "$ARGUMENTS" for the OpenUsage TUI dashboard 180 ★

README

Prototype

**Several live, clickable versions of any UI, built while you watch.**

[![Agents](https://img.shields.io/badge/Claude%20Code%20%C2%B7%20Codex%20%C2%B7%20OpenCode-skill-4f46e5)](#requirements) [![License](https://img.shields.io/github/license/Dananz/prototype-skill?color=4f46e5)](LICENSE) [![Platforms](https://img.shields.io/badge/macOS%20%C2%B7%20Linux%20%C2%B7%20Windows-1a1a1a)](#requirements)

[Claude Code](#claude-code) · [Codex](#codex) · [Other agents](#other-agents) · [Features](#features)

Ask your agent for a few versions of a UI. Prototype opens one live app, builds clickable variants while you watch, and checks them against your real product. Review them, leave comments on the design, and choose which one to build into your codebase.

Requirements

Node 22.12+ (or a newer supported LTS) and pnpm or npm.
Chrome, Chromium or Edge for screenshots; terminal, file editing and image viewing in your agent.
macOS, Linux or Windows. Optional Tailscale makes the link reachable on your phone; otherwise use the local URL.

Subagents and image generation are optional. Sandboxed agents need package installation, access to the preview server, and write access to `/.prototypes/` and `~/.prototypes/`. A remote container cannot reach a laptop's `localhost` directly.

Chrome profiles created by Prototype are removed when the browser stops. Each start also sweeps the skill's own profiles older than 24 hours, skipping active browsers and links. On Windows, `PROTO_CHROME_SWEEP_ALL=1` opts into deleting other programs' stale Chrome profiles, Chrome/Playwright temp folders, and CRX downloads from the temp directory. Leave it unset to keep cleanup limited to Prototype's own files.