kurenn

Claude Prototype — Development skill for Claude Code

Development community

A Claude Code skill to prototype web apps end-to-end with zero build step.

How to install Claude Prototype

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

What Claude Prototype does

A Claude Code skill to prototype web apps end-to-end with zero build step.

Alternatives in Development

Claude API — Build apps with the Claude API or Anthropic SDK 94.1k ★
Native Feel Skill — An Agent Skill for designing cross-platform desktop apps that feel native — distilled from Raycast's 2.0 deep 1.9k ★
Reset Content Gen — Reset apps/content-gen to fresh state for new voice-based agentic coding experiments 296 ★

README

claude-prototype

**Clickable HTML prototypes for sales demos, stakeholder reviews, and design exploration — straight from a Claude Code prompt.**

Zero build step. A live pin-to-element feedback loop. Real design assessment baked in.

[![skill-checks](https://github.com/kurenn/claude-prototype/actions/workflows/skill-checks.yml/badge.svg)](https://github.com/kurenn/claude-prototype/actions/workflows/skill-checks.yml) [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) ![Claude Code skill](https://img.shields.io/badge/Claude%20Code-skill-d97757) ![Build step](https://img.shields.io/badge/build%20step-none-success)

You:    /prototype
Claude: Quick or Discovery?  →  a few questions  →  builds a folder
You:    cd acme-demo && python3 serve.py
        # a real, clickable, themeable, shareable prototype at localhost:8000

Output is plain **HTML + Tailwind (CDN) + a handful of vanilla JS files**. No webpack, no Node, no framework. It runs anywhere a browser opens, and deploys to any static host as-is.

Contents

Why it's different
Quickstart
The signature: an always-visible control bar
How it works
Usage
Anatomy of a generated prototype
The quality system
Companion skills
Repo layout
Principles the skill enforces

Why it's different

Most AI-generated prototypes look like every other one: purple gradients, gradient text, nested cards, lorem ipsum, dead buttons, no lifecycle states. This skill is built to do the opposite — and it *checks itself* before handing the work back.