Quick answer to the question you Googled: no, Claude can’t generate images the way Midjourney or DALL-E do. There’s no “make me a photo of a golden retriever riding a unicycle” button.
But if you stop there, you’re missing something genuinely wild. Claude can build visuals with code. SVG, HTML, CSS, Canvas, Three.js, even full MP4 video through Remotion. Once you see what HTML CSS visuals look like coming out of a chat conversation, raster image generation starts to feel like the limited option. And for a lot of the stuff I actually need visuals for (blog graphics, product explainers, animated landing pages, social media slides), that turns out to be more useful than a raster image from an image generator.
I’ve used Claude this way for real projects. The animated intro on pickmysquare.com, the product explainer animation on trigli.com, and a bunch of Instagram slides I finish up in Canva. All of those started as a conversation with Claude that ended with runnable code.
Here’s the full picture of what Claude can actually do with visuals, how to get it to work, and when you should still reach for a traditional image generator instead.
Why “Claude can’t generate images” is the wrong question
Image generators make pixels. Claude makes code that becomes pixels (or vectors, or motion, or interactive behavior). That sounds like a downside until you notice what you get with the code route:
- The output is editable forever. Change a color, swap a word, tweak a timing curve in one line.
- It scales. SVGs and CSS don’t blur at 4K.
- No watermarks and no per-image credit system. You’re just writing HTML.
- It can be interactive. A chart that responds to hover. A calculator. A scroll animation. You can’t do that with a JPEG.
- You can paste it straight into a website, an email template, a React app, or a Canva slide.
This is exactly what Claude Artifacts is built for. Artifacts is a feature Anthropic rolled out in 2024 that renders HTML, SVG, and React output live in a side panel in the Claude UI. You can see the result, iterate on it, and copy the code, all without leaving the conversation. Most people never click into that side of Claude and have no idea it’s there.
What Claude can actually create: HTML CSS visuals and more
I’ll walk through the categories I use most, plus a few I’ve seen work well in the wild.
1. SVG diagrams, flowcharts, and infographics
This is the easiest win and probably the highest value. Ask for an SVG and you get a clean vector file you can drop into anything.
A prompt that works well looks like this:
Create a single SVG file (viewBox 0 0 800 500) showing a three-step
flowchart: Customer Email -> AI Processing -> Reply Sent. Use
rounded rectangles, arrows between each step, a muted blue and gray
palette, and a subtle drop shadow on each box. Give me the raw SVG markup.
You get back a working SVG. Open it in a browser or paste it into Figma, Canva, or WordPress. If the colors are off, say “make the blue deeper and drop the shadow.” One line of feedback, new version.
2. CSS art and illustrations
Pure CSS drawings are a whole subculture on CodePen. Claude is surprisingly good at them. Shapes, gradients, pseudo-elements stacked into little scenes. Cartoons, icons, logos, background patterns. Anything you’d hand-code if you had six hours and patience.
Ask for a CSS-only illustration of a coffee cup with steam, or an isometric server rack, and Claude will hand you an HTML file with a <style> block. Save it, open it, done.
3. Animated scenes in HTML/CSS/JS
This is where I got hooked. When I was building the March Madness intro for pickmysquare.com, I sat with Claude for about an hour and described what I wanted scene by scene. A basketball spinning and bouncing with particle trails. A shockwave flash on impact. The letter “o” morphing into a hoop. The text “PickMySquare” swapping to “PickMyBracket” with a reveal animation. Radial gradients pulsing behind it all.
Claude built the whole thing as one HTML file. Pure CSS keyframes and a little JavaScript for the scene transitions. I tweaked colors and timings through chat feedback. No Adobe After Effects, no motion design tool, no video file to host. Just HTML that runs in any browser.
The trigli.com product animation was the same process. Multi-scene explainer: customer types an email, the letter flies into Trigli, the AI processes the message with glow effects and processing dots, a reply flies back. Starfield background, SVG person illustration, browser window mockup, particle bursts. All one file, all born in a Claude conversation.
Key trick: describe scenes like you’re directing a shot. Timing, easing, what enters, what exits, what the viewer should feel. Claude handles surprisingly abstract direction if you’re specific about the mechanics.
4. Data visualizations
Chart.js, D3, or plain SVG. Give Claude the data and the vibe you want and it will produce a working chart. I’ve used this for quick blog graphics where I didn’t want to fire up a spreadsheet and screenshot something ugly.
Example prompt:
“Here’s my data: [paste rows]. Build a single HTML file using Chart.js via CDN that renders a bar chart with a dark background, neon green bars, and a clean sans-serif font. No legend. Title it ‘Chair Failures by Year.'”
You get a working HTML file. Screenshot it or embed it.
5. Interactive components
Calculators, configurators, toggles, sliders, dashboards. These are the things image generators literally cannot make, because they’re not images at all. A mortgage calculator, a unit converter, a “how much would this chair cost if it lasted 10 years” widget. Claude writes the React or vanilla JS, and Artifacts renders it live so you can test it right there.
6. Canvas and generative art
If you want something a little more alive (particle systems, flow fields, procedural patterns), Claude can write Canvas or p5.js code that animates in real time. Great for hero sections and background art. I haven’t shipped one of these personally, but you could try asking for “a p5.js sketch of a slow flow field in muted blues on a black background” and see what it gives you.
7. Three.js 3D scenes
Three.js is a bigger lift, but Claude handles it for simple scenes. Rotating products, floating objects, camera flyovers. If you’re comfortable running a little code, you can get a 3D hero for a landing page without touching Blender.
8. Programmatic video with Remotion
This is the one people keep sharing. Remotion is a React-based library that renders real MP4 video from code, and developers have been posting Remotion + Claude workflows all over dev Twitter and YouTube. The pitch is simple: describe a video, Claude writes the Remotion components, you render an MP4. For anyone making explainer videos or short social clips, it’s a legitimate shortcut.
Claude vs. Midjourney and DALL-E: Which Should You Actually Reach For?
I still use image generators. They’re not going anywhere. But the decision is simpler than people make it.
Reach for Midjourney or DALL-E when you need:
- Photorealism or painted styles
- A person, a landscape, or a scene that would take a human illustrator hours
- A mood image where the specific details don’t matter
- Anything that should look like a photograph
Reach for Claude when you need:
- Diagrams, flowcharts, or infographics
- Charts or data visualizations
- Animations or motion
- Something interactive
- Graphics that need to live in a webpage, email, or slide and scale cleanly
- Edits later without regenerating from scratch
For my blog and my side projects, Claude wins more often than I expected. Landing page animations, product explainers, social slide layouts, quick charts for posts. Image generators still own the “make me a cool header photo” category.
Practical use cases I actually use it for
- Blog graphics. Quick SVG diagrams for how-to posts instead of stock illustrations.
- Landing page animations. Both pickmysquare.com and trigli.com have Claude-built intro animations running in production.
- Instagram slides. I use Claude to draft layout ideas, text treatments, and even full HTML mockups I then rebuild in Canva for the final post.
- Email headers. Simple HTML/CSS hero graphics that work inside email clients.
- Prototyping. Sketching out a UI idea in code faster than I could in Figma.
Prompt tips for better visual output
A few things that made a big difference for me:
- Always ask for one file. “Single HTML file with inline CSS and JS.” Makes it easy to save, open, and share.
- Give it a viewBox or canvas size upfront. “Build this for an 800×500 viewport.” Saves a lot of back and forth.
- Describe the vibe, not just the content. “Calm, premium, muted palette” lands better than “make it look good.”
- Iterate in small chunks. Don’t ask for everything at once. Get the layout, then the colors, then the animation, then the polish.
- Ask for the rendered preview. In Artifacts you can see it immediately. Use that. Don’t guess from reading code.
- When something looks off, describe what you see. “The ball is bouncing too fast and the shadow is too dark.” Claude is great at responding to visual feedback if you’re specific.
What Claude can’t do (be honest about this)
- Photorealism. Not happening. It’s not making pixels, it’s making code.
- Complex illustrated scenes with dozens of characters. Technically possible in SVG, practically painful.
- Anything where “looks like a photo” is the requirement.
- Replacing a designer who actually knows what they’re doing. It’s an assistant, not a replacement.
If any of those are your need, go fire up Midjourney. No shame in using the right tool.
The bigger point
The reason “can Claude generate images” is the wrong question is that it assumes the only useful visual output is a flat image file. Once you realize Claude can write the code that produces visuals (static, animated, or interactive), the ceiling goes way up. You’re not limited to what a diffusion model has seen. You’re limited to what you can describe and what a browser can render, which is a much bigger box.
For a lot of the visuals I need, that box is exactly the right size. And I’d bet that’s true for most bloggers, marketers, and small business owners too. You probably don’t need a painting of a castle at sunset. You need a flowchart, a chart, an animated hero, or a slide that doesn’t look like every other Canva template.
Try it once. Open Claude, ask for a single HTML file that does something visual, and see what comes back. I’m pretty sure you’ll be surprised.
If you want to see how far this Claude-as-a-tool thing goes, I wrote up how I use Claude Code to run this entire blog, end to end. Same principle, different surface area. And if you’re still deciding whether Claude is worth your time over ChatGPT, I covered that too: why I switched and why I’ve stuck with it.
Sources
- Anthropic: What are Artifacts and how do I use them?
- Remotion documentation
- MDN: SVG reference
- MDN: Canvas API
- Chart.js documentation
- p5.js reference
- Three.js documentation
Your turn
Have you tried using Claude for visual stuff? Did it blow your mind or fall flat? Drop a comment with what you built, what worked, and what didn’t. I’m always looking for new prompts and workflows to steal.
If this post helped, share it with the friend who’s still convinced Claude is just a text box. And if you want more Claude and Claude Code how-tos like this one, subscribe so the next one lands in your inbox.
