# stagewise — Agentic IDE for Web Developers

> stagewise is an open-source agentic IDE that combines browsing, devtools access, and a built-in agent to reverse-engineer and ship web changes faster.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

1. Install / set up:
   ```bash
   # Download the desktop app
open https://stagewise.io
   ```
2. Start / smoke test:
   ```bash
   # After install, launch stagewise and complete the onboarding
   ```
3. Verify:
   - Open a target web page, run one small agent task (e.g., identify a component + propose a CSS tweak), and confirm you can validate the change with devtools.

## Intro

stagewise is an open-source agentic IDE that combines browsing, devtools access, and a built-in agent to reverse-engineer and ship web changes faster.

- **Best for:** Web developers who want an agent that can see console/debugger output and iterate without context switching
- **Works with:** Desktop app + built-in agent; supports Bring-Your-Own-Key provider setup
- **Setup time:** 10 minutes

## Practical Notes

- Setup time ~10 minutes (install + onboard + connect a provider key)
- Two measurable checks: 1 page analyzed, and 1 proposed change validated in devtools
- GitHub stars + forks (verified): see Source & Thanks

If you're evaluating agentic IDEs, focus on what actually saves time:

- Can the agent see console/debugger output reliably?
- Can you validate changes without bouncing between tabs and tools?
- Does the tool keep your work reviewable (diffs, file changes, PR flow)?

Start with “read-only” reverse engineering: identify components, style systems, and DOM structure. Only then switch to write mode and connect a real codebase for durable changes.

### FAQ

**Q: Is stagewise open source?**
A: Yes — the core repo is open source; check the license and contribution docs for details.

**Q: Do I need a subscription?**
A: The README describes Bring-Your-Own-Key flows; you can connect your own provider key.

**Q: What’s a good first task?**
A: Reverse-engineer one component and validate one small style change using built-in devtools.

## Source & Thanks

> Source: https://github.com/stagewise-io/stagewise
> License: AGPL-3.0
> GitHub stars: 6,669 · forks: 490

---

<!-- ZH -->

## 快速使用

1. 安装 / 设置：
   ```bash
   # Download the desktop app
open https://stagewise.io
   ```
2. 启动 / 冒烟测试：
   ```bash
   # After install, launch stagewise and complete the onboarding
   ```
3. 验证：
   - 打开一个目标网页，让 agent 完成一个小任务（识别组件并提出一个 CSS 调整）；确认你能用 DevTools 验证效果。

## 简介

stagewise 是开源的 Agentic IDE：把浏览、DevTools 与内置 coding agent 集成在一起，用于更快逆向理解网页、验证假设并落地改动；同时支持自带 Key。

- **适合谁：** 需要边看控制台/调试器边让 agent 迭代的 Web 开发者
- **可搭配：** 桌面端 + 内置 agent；支持自带 Key（BYOK）接入不同模型提供方
- **准备时间：** 10 分钟

## 实战建议

- 准备时间约 10 分钟（安装 + onboarding + 连接模型 Key）
- 两项可量化检查：分析 1 个页面，并在 DevTools 中验证 1 个改动建议
- GitHub stars / forks（已核验）：见「来源与感谢」

评估 agentic IDE 时，建议只看能否真实省时：

- agent 是否能可靠读取控制台/调试器信息？
- 验证改动是否需要频繁在工具间来回跳？
- 产出是否可审查（diff、文件变更、PR 流程）？

建议先从“只读逆向”开始：识别组件/样式系统/DOM 结构；再切到写入模式并连接真实代码库，让改动可持续。

### FAQ

**stagewise 是开源的吗？**
答：是的；核心仓库为开源，具体以仓库 License 与贡献文档为准。

**必须订阅吗？**
答：README 描述了 BYOK（自带 Key）方式，可先用自己的提供方 Key 试跑。

**适合的第一个任务是什么？**
答：先逆向一个组件，再用内置 DevTools 验证一个小的样式改动。

## 来源与感谢

> Source: https://github.com/stagewise-io/stagewise
> License: AGPL-3.0
> GitHub stars: 6,669 · forks: 490


---
Source: https://tokrepo.com/en/workflows/stagewise-agentic-ide-for-web-developers
Author: AI Open Source