Show HN: Sometimes it's faster to draw a box with an arrow than write a paragrap

hpko1 pts0 comments

GitHub - hz47/Sketch2AI: A tiny drawing board that copies your sketch to the clipboard so you can paste it into Claude. · GitHub

/" data-turbo-transient="true" />

Skip to content

Search or jump to...

Search code, repositories, users, issues, pull requests...

-->

Search

Clear

Search syntax tips

Provide feedback

--><br>We read every piece of feedback, and take your input very seriously.

Include my email address so I can be contacted

Cancel

Submit feedback

Saved searches

Use saved searches to filter your results more quickly

-->

Name

Query

To see all available qualifiers, see our documentation.

Cancel

Create saved search

Sign in

/;ref_cta:Sign up;ref_loc:header logged out"}"<br>Sign up

Appearance settings

Resetting focus

You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.

Dismiss alert

{{ message }}

hz47

Sketch2AI

Public

Notifications<br>You must be signed in to change notification settings

Fork

Star

main

BranchesTags

Go to file

CodeOpen more actions menu

Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit

History<br>12 Commits<br>12 Commits

CLAUDE.md

CLAUDE.md

LICENSE

LICENSE

README.md

README.md

index.html

index.html

screenshot.png

screenshot.png

View all files

Repository files navigation

Sketch2AI

A tiny drawing board that copies whatever you make straight to your clipboard, so you can paste it into Claude (or any chat that accepts images) and explain what you mean with a picture instead of words.

Sometimes it is faster to draw a box with an arrow than to describe it in a paragraph. That is the whole idea.

Try it here: https://hz47.github.io/Sketch2AI/

What it does

Draw boxes, ellipses, lines, and arrows for flows and diagrams. Hold Shift to snap to squares, circles, and clean angles.

Double-click a box or ellipse to type a label inside it, so a shape becomes a named component.

Draw freehand with a pen, or use the highlighter to circle and emphasize parts of a screenshot.

Paste a screenshot or copied text right onto the board with Cmd+V, and drag image files in from Finder.

Move, resize, duplicate, and layer anything. Drag a box around several items to select them all at once.

Work on an endless canvas. Scroll to pan, pinch or Cmd+scroll to zoom, and keep adding content wherever you like.

Every time you change something, the visible area of the canvas is copied to your clipboard. Pan and zoom to frame what you want, and that is what gets copied. Then you paste it into Claude.

It is meant to sit next to the text you write to Claude: draw the thing, paste the picture, and let the words and the sketch explain the idea together.

There is also a "Copy now" button if you turn off auto-copy, and a "Save PNG" button that downloads the board as a file.

How to use it

Open index.html in Chrome (double-click the file, or right-click and choose Open With, then Google Chrome).

Draw something.

Switch to Claude and press Cmd+V.

That is it. No install, no account, no server. It is one HTML file with everything inside it.

Make it feel like a real app (optional)

Open the page in Chrome, then go to the menu and pick "Install page as app" (older Chrome calls it "Create Shortcut" with the "Open as window" option). You get a dock icon and its own window.

A note about the clipboard

The copy feature needs the page to run as a local file or a real website. If you open it inside a sandboxed preview, the browser blocks clipboard access and you will see a "Copy blocked" message. Running the local file in Chrome fixes it. If a copy is ever blocked, use the "Save PNG" button and drag the file in instead.

Pasting an image works in the Claude desktop app and on claude.ai. It does not work in the Claude Code terminal, which only takes text.

Keyboard shortcuts

P pen, G highlighter, E eraser

R rectangle, O ellipse, L line, A arrow

T text, M move and select

H pan (or hold Space and drag, or drag with the middle mouse button)

1 fit everything in view

Cmd + / Cmd - / Cmd 0 zoom in, out, reset to 100%

Cmd+D duplicate the selection

Cmd+] / Cmd+[ bring to front, send to back

Cmd+Z undo the last thing you added

Cmd+C copy the drawing now

Cmd+V paste an image or text onto the canvas

Delete remove the selected items

Built with

Plain HTML, CSS, and JavaScript. No libraries, no build step. The drawing runs on an HTML canvas.

License

MIT. Do whatever you like with it.

About

A tiny drawing board that copies your sketch to the clipboard so you can paste it into Claude.

hz47.github.io/Sketch2AI/

Resources

Readme

License

MIT license

Uh oh!

There was an error while loading. Please reload this page.

Activity

Stars

stars

Watchers

watching

Forks

forks

Report repository

Releases

No releases published

Packages

Uh oh!

There was an error while loading. Please reload this...

claude paste file draw clipboard html

Related Articles