Free guide · Oct 11, 2026

Doop: collaborate on real HTML artboards

How to connect a real coding agent, make a scoped design change, and export and review the frame.

The short version

I would start with one manually inspected frame, then connect an agent for a small edit. Doop is an AGPL-3.0 HTML design canvas with shared cursors, comments and MCP. Its first welcome performance is scripted. Actual AI tasks require provider access or a connected model account; seeing that welcome does not prove free live generation.

What's in the full guide

  1. 011. Choose the hosted or local route
  2. 022. Understand the first canvas
  3. 033. Connect a real coding agent
  4. 044. Ask for a small scoped change
  5. 055. Use comments and design memory
  6. 066. Export and review the frame
  7. 07Sources

From the blog

AI Coding

Claude Code hooks

Stride AI Academy

AI Coding5 min read

Claude Code Hooks Tutorial: 3 Practical Examples

A Claude Code hooks tutorial: what hooks are, the main events, where to configure them, the JSON format and three working examples, plus safety notes.

AI Coding

Claude Code vs Codex

Stride AI Academy

AI Coding6 min read

Claude Code vs Codex: Which to Use for Client Builds

Claude Code vs Codex compared for building client tools: where each runs, how you pay, config files, skills, hooks and MCP, and when to use which.

More AI Coding guides

AI Coding

e2e: AI app tests that replay a checked step with zero model calls

How to pick your platform, give it one harmless goal, and add the check before you trust the replay.

Read the guide →
AI Coding

iart motion skills: pick the pack, brief the motion, check the export

How to pick the pack, describe the motion you want, and inspect the exported result.

Read the guide →
AI Coding

OpenEdit: edit video by describing it to Claude Code or Codex

How to install the skill, choose how to transcribe, and check the exported video.

Read the guide →