SideKick is a VSCode extension that combines a Claude Code/HERMES or other ai agent terminal on the left with a live HTML preview on the right. Click elements in the preview to edit text, colors, fonts, and images visually — changes sync back to source in real time. Send selected elements to Claude Code for AI-powered code generation.
Features
Split View — Claude Code terminal (left) + live preview (right)
Visual Editing — Click any element to edit text, color, font-size, alignment, images
Live Source Sync — Edits flow back to the VSCode editor buffer automatically
Reload to Revert — Discard live edits and restore disk content with one click
Multi-Tab — Preview multiple HTML files simultaneously
Snapshot Export — Bake live edits into a new HTML file
Print to PDF — One-click PDF export
Presentation Mode — Fullscreen preview for demos
Send to Claude — Pass selected elements to Claude Code for AI-driven coding
Getting Started
Open an HTML file in VSCode
Run SideKick: Open from the command palette, or right-click the HTML file → SideKick: Open
Edit visually in the right panel, or send elements to Claude Code
Use the toolbar: Select, Reload, Annotate, Move, Snapshot, Print PDF, Present, Send to AI
Requirements
VSCode 1.85+
Claude Code CLI (optional — for AI features)
中文
SideKick 是一个 VSCode 扩展，将 Claude Code/HERMES等AI终端（左）与 实时 HTML 预览（右）并排显示。点击预览中的元素即可可视化编辑文字、颜色、字体、图片——修改实时同步回左侧源码。选中元素发送给 Claude Code 进行 AI 编程。
功能
分屏布局 — 左侧 Claude Code 终端 + 右侧实时预览
可视化编辑 — 点击元素直接修改文字、颜色、字号、对齐、图片
实时同步 — 编辑自动同步到 VSCode 编辑器缓冲区
一键还原 — 点击 Reload 放弃实时编辑，恢复到磁盘内容
多标签 — 同时预览多个 HTML 文件
快照导出 — 将实时编辑烘焙成新的 HTML 文件
PDF 打印 — 一键导出 PDF
演示模式 — 全屏预览，适合演示
发送给 AI — 选中元素发送给 Claude Code 进行 AI 编程
快速开始
在 VSCode 中打开 HTML 文件
命令面板运行 SideKick: Open，或右键 HTML 文件 → SideKick: Open
