lunanoir21

Spec Mockup Design — Testing skill for Claude Code

Testing community

Agent skill that makes AI agents design real UIs instead of AI slop: pan/zoom canvas, OKLCH palette generator, slop linter, one-command install for Claude Code, Codex, opencode, Gemini, Cursor and mor.

How to install Spec Mockup Design

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

What Spec Mockup Design does

Alternatives in Testing

Deslop Reborn — One iteration of the IronClaw Reborn de-slop loop — take ONE Reborn crate, fan out parallel review sub-agents 12.6k ★
Ext Apps — Official repo for spec & SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP serve 1.9k ★
Spec Kit Zh — 💫 帮助你快速上手规格驱动开发的工具包💫 Toolkit to help you get started with Spec-Driven Development Works seamlessly across al 238 ★

README

Spec Mockup Design

**An agent skill that makes AI coding agents design real UIs instead of AI slop.** Works with Claude Code, Codex, opencode, Gemini/Antigravity, Cursor, Kiro, Qwen and any agent that reads `SKILL.md`.

[Türkçe](README.tr.md) · [Live demo](https://lunanoir21.github.io/spec-mockup-design/) · MIT licensed

![Pan and zoom canvas demo](assets/canvas-demo.gif)

Ask an agent to "design a settings screen" and you usually get the same page: purple gradient, Inter, rounded cards, a left-border accent, lorem ipsum, one pretty state. This skill replaces that with a workflow that produced designs people actually kept:

Ground in a real reference. Read the project's own source (or a named product), extract real colors, radii, spacing and animation timings. Never invent when something real exists.
Build a design language, not a mood. One concept sentence, a generated OKLCH palette with tinted neutrals, a modular type scale, one icon stroke weight.
Show every state. One board per real state: idle, hover, empty, error, loading, overflow, disabled, focus, plus a motion storyboard, font comparison, theme picker and tokens board.
Gate against slop. A linter scores the result, a delivery receipt proves the files exist, screenshots get read.
Deliver a canvas. Agents without a design tool output a single HTML pan/zoom infinite canvas (drag to pan, ctrl+wheel to zoom, focus and download any board), the same experience as Claude's Design canvas.

Overview	Focus a board

The [live gallery](https://lunanoir21.github.io/spec-mockup-design/#gallery) has eight canvases for different platforms: a mobile habit tracker, a sales dashboard, a macOS menu bar app, a browser extension popup, a game inventory, a web app, a desktop widget and a Linux bar widget. Most we