tznthou

Pi UI Design — Testing skill for Claude Code

Testing community

HTML mockup generation via Gemini — from design spec to previewable prototype.

How to install Pi UI Design

Installs to ~/.claude/skills/tznthou-claude-prism-pi-ui-design/SKILL.md

Terminal

mkdir -p ~/.claude/skills/tznthou-claude-prism-pi-ui-design && curl -fsSL https://raw.githubusercontent.com/tznthou/claude-prism/HEAD/commands/pi-ui-design.md -o ~/.claude/skills/tznthou-claude-prism-pi-ui-design/SKILL.md

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

What Pi UI Design does

command: pi-ui-design description: HTML mockup generation via Gemini — from design spec to previewable prototype

UI/UX Mockup via Gemini

Use Gemini (via agy, the Antigravity CLI) to generate a previewable HTML mockup from a design specification document. The mockup is a single self-contained HTML file (Tailwind CDN) that can be opened in a browser for visual confirmation before implementation.

**Workflow**: `Design spec → /pi-ui-design → Browser preview → Confirm → Claude Code imple

Alternatives in Testing

Claude Code Spec Workflow — Automated Kiro-style Spec workflow for Claude Code 3.6k ★
Cc Sdd — Spec-driven development (SDD) for your team's workflow 3.1k ★
Spec Kitty — Spec-Driven Development for serious software developers 1.6k ★