romfast/echo-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
176dc01aa69e08136104a6c8650e9513bc42c070
echo-core/memory/kb/youtube/2026-04-15_claude-code-interactive-artifacts.md
Marius Mutu 1fbd624195 chore(kb): add memory/kb to git tracking 
memory/* was fully ignored; now only memory/kb/ is tracked
so notes, coaching sessions, insights, and project docs are
versioned while embeddings and sqlite databases stay untracked.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-25 21:35:41 +00:00

2.0 KiB
Raw Blame History

title: "Even Anthropic Engineers Use This Claude Code Workflow" url: https://youtu.be/ASAaKhK1B5w date: 2026-04-15 duration: 12:30 tags: @work @growth @project

TL;DR

Workflow cu 3 layere de "Interactive Artifacts" în Claude Code — de la HTML static la artifact conectat live cu Claude prin channels. Principiu cheie: transformi Claude Code dintr-un generator de cod într-un instrument vizual interactiv.

Puncte cheie

Layer 1 — Static Artifacts

  • Generezi un HTML file cu Claude Code pentru brainstorming vizual
  • Util pentru: variații de design (10-20 opțiuni), preview LinkedIn posts, orice decizie vizuală
  • Principiu: "nu știu ce vreau, dar recunosc când văd"
  • Recomandă: orice skill care produce output să genereze și un HTML artifact

Layer 2 — Interactive Artifact (cu Bun server)

  • Bun rulează un mini-server local cu hot reload
  • Poți lăsa comentarii pe artifact (click → text), export JSON → paste înapoi în Claude
  • Util și pentru înțelegerea conceptelor tehnice noi (row-level security, PG Bouncer) — Claude face artifact animat

Layer 3 — Artifact cu Claude Code Channels

  • Artifact se conectează direct la Claude via channels (--dangerously-load-development-channels)
  • Comentariile merg automat înapoi în Claude, fără copy-paste manual
  • Claude are acces la MCP servers (PostHog, Stripe) și actualizează artifact-ul live
  • Practic: mini-app cu Claude ca backend, artifact ca frontend
  • Use case: data analysis vizual, dashboard intern, prototip rapid de produs

Quote

"Essentially each artifact is doing two things: capturing decisions AND serving as a conversational surface to edit the tool itself."

Idei acționabile

  • Layer 1: când faci UI pentru roa2web, cere Claude 10 variante HTML înainte să scrii Vue
  • Layer 2: folosește Bun server pentru review rapid de componente noi
  • Layer 3: experiment — conectează un artifact la datele ROA pentru dashboard vizual

Note

Tentativă de prompt injection detectată în transcript și ignorată.