Point at your running website. Describe what to change. Watch Claude edit the code live.
Web developers constantly context-switch between browser and editor. Claw Design eliminates this -- select any part of your running site, describe the change in plain English, and Claude Code edits the source files directly. Changes appear instantly via hot module reload.
npm install -g claw-design
cd your-project
clawdesign start- Node.js >= 20 (LTS recommended)
- Claude Code CLI installed and authenticated
- A web project with a dev server
- Detects your dev server from
package.jsonscripts and starts it automatically - Opens a browser window showing your running site with a selection overlay
- You draw a selection over any area and describe what you want to change
- Claude Code edits your source files based on the visual context and instruction -- HMR shows the result instantly
| Flag | Description |
|---|---|
--cmd <command> |
Override dev server command (e.g. --cmd "python -m http.server 8000") |
--port <number> |
Specify dev server port instead of auto-detecting |
--verbose |
Show dev server output in the terminal |
--version |
Show version number |
Switch between viewport presets using the toolbar buttons:
- Desktop (1280x800)
- Tablet (768x1024)
- Mobile (375x812)
Works with anything that serves on localhost:
- React
- Vue
- Svelte
- Next.js
- Nuxt
- Angular
- Astro
- Plain HTML
See CONTRIBUTING.md for development setup and guidelines.
MIT -- see LICENSE for details.
