Sota-Mikami

Sota-Mikami / design-with-claude-code

Public

UI prototyping template & skills for Claude Code

15
2
100% credibility
Found Mar 14, 2026 at 15 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A starter template for non-coders to prototype user interfaces by conversing with Claude Code AI, featuring design comparison panels, screen flow maps, automated screenshots, spec generation, and easy web sharing.

How It Works

1
📰 Discover the template

You hear about a handy kit from a designer's blog post that lets you build app mockups by just chatting with an AI.

2
📥 Set up your starter kit

You copy the ready-made example to a new folder on your computer and launch it to see a sample cafe app right away.

3
🧠 Add AI guides

You place special instruction files so your AI buddy learns your design workflow and style preferences.

4
💬 Chat to create designs

You describe what you want in everyday words like 'add a grid of cafe cards with filters' and watch the AI build interactive screens instantly.

5
👀 Compare and map views

You switch between design variations side-by-side, see a visual map of screen flows, and capture pictures of everything.

6
🚀 Share online

You push a button to put your prototype on the web and get a shareable link to send to your team.

7
📝 Generate guides

You ask the AI to create step-by-step build instructions and checklists straight from your mockup.

🎉 Team feedback flows in

Your team explores the live interactive prototype, gives quick feedback, and you iterate designs super fast.

Sign up to see the full architecture

6 more

Sign Up Free

Star Growth

See how this repo grew from 15 to 15 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is design-with-claude-code?

Design with Claude Code is a TypeScript template for rapid UI prototyping using Anthropic's Claude Code AI. Designers and PdMs chat in natural language—"make a cafe list with grid view" or "add loading states"—and Claude generates full Next.js apps with Tailwind styling, shareable via GitHub Pages. It skips Figma prototyping templates or paper prototyping templates PDF by outputting interactive code prototypes, screen maps, specs, and QA checklists in one workflow.

Why is it gaining traction?

It stands out in GitHub prototyping with AI models by automating comparisons of states, variants, and patterns in a side-by-side panel, plus React Flow screen maps and Playwright screenshots—all triggered by conversation. No coding needed; Claude handles tweaks like "wider margins" or "deploy to Pages." The skills pack teaches Claude your design system, making iterations faster than manual rapid prototyping templates.

Who should use this?

Non-coders like designers or PdMs building prototyping plan templates for team feedback on job boards or apps. Frontend teams prototyping multiple UI patterns without boilerplate, or anyone bridging design-to-code gaps beyond Figma prototyping templates.

Verdict

Worth forking for Claude users—solid docs and workflow despite 14 stars and 1.0% credibility score signaling early maturity. Test on a small prototype; it'll accelerate design with Claude Code if AI chats fit your style.

(187 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.