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

Spec Kitty — Spec-Driven Development for serious software developers 1.6k ★
Higgsfield Claude Skills — 19 Claude Code skills for Higgsfield AI — automate image generation, Seedance 2.0 video creation, and full UGC 329 ★
Design QA — Visual QA on an HTML/CSS implementation — checks responsive behavior at mobile/tablet/desktop, design token co 309 ★