azu

azu / design-loop

Public

A browser-based frontend for Claude Code that lets designers edit websites without touching code.

claudecode design
37
0
100% credibility
Found Feb 20, 2026 at 28 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A browser-based tool providing a visual interface for designers to select page elements, make direct edits, and instruct an AI coding assistant to update website source code in real-time.

How It Works

1
📰 Discover design-loop

You hear about a handy tool that lets designers tweak websites visually alongside an AI helper, no coding required.

2
📥 Install easily

Download the tool to your computer with one quick command, like grabbing a new app.

3
🌐 Start your site preview

Run your website locally so it's ready to view, like opening a playground for designs.

4
🚀 Launch the magic window

Tell the tool your site's address and it opens a browser with your preview and AI chat side by side – everything in one spot!

5
🎨 Click to select elements

Hover and click parts of your site to highlight them, then describe changes in simple words to the AI.

6
✏️ Edit visually

Switch to design mode to type new text, drag elements around, or drop images for inspiration – feels like direct finger-painting on the page.

7
🔄 Watch updates live

AI applies your ideas to the code instantly, refreshing the preview so you see perfect results right away.

🎉 Design done beautifully

Your website looks exactly how you envisioned, all without touching a single line of code – pure creative joy!

Sign up to see the full architecture

6 more

Sign Up Free

Star Growth

See how this repo grew from 28 to 37 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-loop?

Design-loop is a TypeScript tool that runs Claude Code in a browser-based frontend, letting designers preview sites side-by-side with a Claude terminal and edit via clicks or natural language—no code required. It proxies your dev server (like Next.js on localhost:3000), injects visual overlays for element selection, and handles React component detection with live HMR. CLI launch is simple: `design-loop --url http://localhost:3000 --command "npm run dev"`, or use a `.design-loop.json` config for monorepos.

Why is it gaining traction?

It shrinks the three-app workflow (terminal, editor, browser) into one tab, with design mode for direct text edits, drag-and-drop reordering, and file uploads—streamlining the design loop process far beyond plain Claude Code. React props, source paths, and design tokens auto-feed into prompts, while transparent proxying keeps WebSockets alive. Early adopters praise the single-window flow for faster design loop feedback.

Who should use this?

Designers and frontend devs on React/Next.js apps using Claude Code for UI iteration, especially in design loop studio sessions or monorepo prototyping. Perfect for teams needing quick visual tweaks without context-switching, like reordering flex/grid elements or uploading mockups.

Verdict

Worth trying for design loop acceleration if you're already on Claude Code—installs cleanly via curl, docs cover config and usage well. But 28 stars and 1.0% credibility signal early maturity; stick to side projects until more battle-testing.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.