Design, artifacts and moving work between canvas and code

The scenario turns a session result about the course build into an interactive artifact. You will check what the page contains, who can see it and what live data it pulls before publishing. Outputs are illustrations.

The artifacts source checked September 30, 2026 describes a self-contained interactive page Claude Code publishes to a private URL on claude.ai, with optional live data through your MCP connectors. An artifact is a capture of work, not an application.

One page, no backend, no stored form input, no multiple routes. It fits a dashboard, an annotated diff walkthrough or an investigation timeline. For a real internal tool with a server, deploy on your own infrastructure instead.

Publishing asks for permission the first time and names the page; republishing the same approved artifact does not prompt again. Read the page name and content summary in that prompt instead of approving reflexively.

Before publishing, ask to inspect the actual HTML the session wrote and read what it contains:

Show me the artifact file before publishing.
List every fact on the page and the source each came from.
Remove anything that came from private files I did not mean to include.
Do not publish yet.

The page can include anything your session reached: code, file contents, connector data. A build-status page that embeds a private error log with customer names is a disclosure, not a dashboard.

Illustrative review record:

Facts checked: build status, commit message, public version number.
Removed: internal file paths from the error excerpt.
Live data: none (static snapshot).
Audience: private URL, not shared.

A connector-backed page declares which connectors it may call, and only those. Local MCP servers from .mcp.json can build the page but cannot be called by the published page. Each viewer's own account supplies the connection, so two viewers can see different data, and the page never sees credentials.

This means a shared dashboard can quietly depend on each viewer's access. Check the declared connectors before sharing, and prefer a static snapshot for an external audience.

The private URL is not a secret boundary: share from the page header when someone else should see it, and treat the link as giving them the page. Verify the actual page in a browser before sharing; a correct build is not proof of a correct render. Check mobile width too if reviewers will open it on a phone.

Easy: fit

Choose artifact vs deployed tool for three cases. Success: no-backend constraint applied.

Intermediate: content audit

Find two facts with no source in a draft page. Success: removed or sourced before publish.

Challenging: live data

Explain what a teammate sees vs what you see. Success: per-viewer connector behavior.

Page stale: static snapshot, not a live connector page.

Viewer sees different data: connector calls run under their account.

Publish prompt unclear: read the named page and content before approving.

Private data in page: rebuild without it; the old URL does not become safe.

Missing route: artifacts are single pages by design.