Frontend Design
Use Claude Code to create production-ready interfaces that look professional, not AI-generated. React, Tailwind, and clean design automatically.
Visual Design
Use Claude Code to create social media graphics, icons, diagrams, and illustrations. Describe what you want, get PNG or SVG instantly.
By Anthropic
Official skill
About
You need a quick graphic for a presentation or social post. Opening Canva means 30 minutes of template hunting. Figma requires skills you don't have. Instead, just describe it. Tell Claude what you want, get a professional graphic you can download and use immediately.
Stop hunting through template libraries. Start describing what you actually need. Say it, get it Describe the graphic in plain English. Claude creates it as a PNG or PDF you can download right now. No design skills required Social media posts, icons, diagrams, illustrations. Professional output without learning Figma or Illustrator. Built for quality Uses HTML canvas and SVG under the hood. Clean vectors that scale. Crisp images that look good anywhere.
Best for
- · Create professional graphics by describing what you want in plain English
- · Skip the learning curve of Figma, Illustrator, or Canva
- · Get PNG, PDF, or SVG output ready for any platform
- · Iterate quickly with natural language feedback
Not for
- · Best for graphics, icons, and diagrams—not photo editing or complex illustrations
- · Photorealistic images are not supported; focus is on clean graphic design
- · Very detailed illustrations may require multiple iterations to get right
How to use
- 1Install the SkillDownload the skill file directly, or install via the plugin marketplace. Skills auto-activate when relevant—no manual invocation needed.
- 2Describe What You NeedBe specific about colors, style, and purpose. "Blue gradient icon for a finance app" beats "make me an icon."
- 3Specify Format and SizeTell Claude the output format (PNG, PDF, SVG) and dimensions. Social posts, presentation slides, app icons—each has ideal sizes.
- 4Iterate Until PerfectNot quite right? Ask for changes. Different colors, adjusted layout, new elements. Claude refines until you are happy.
Source
@anthropics on GitHubhttps://github.com/anthropics/skills/tree/main/skills/canvas-design
Someone else wrote this — read the source, verify it does what it says, and never share a password or API key with it.
Example prompts
Social media announcement
/canvas-design Create a LinkedIn post graphic announcing our Series A funding. Professional, celebratory but not flashy. Include our logo placeholder and "$10M raised" as the headline. 1200x627px PNG.
Presentation diagram
/canvas-design I need a flowchart showing our customer journey: Awareness, Consideration, Purchase, Retention, Advocacy. Clean style that matches a corporate slide deck. Horizontal layout, PNG.
App icon
/canvas-design Design an app icon for a meditation app. Calming colors, simple symbol that suggests mindfulness. Needs to work at small sizes. 512x512px PNG with transparent background.
Infographic element
/canvas-design Create an icon set: 6 icons representing different departments (Engineering, Sales, Marketing, HR, Finance, Operations). Consistent line-weight style, monochrome. SVG format.
Event promotion
/canvas-design Design a banner for our virtual conference. Theme: "Future of AI." Dark mode aesthetic, subtle tech elements, space for event date and registration CTA. 1920x1080px for the website hero.
Comments
No comments yet — be the first.
More like this
Theme Factory
Use Claude Code to generate complete theme systems, dark mode, and design tokens in minutes. Consistent colors and typography automatically.
Algorithmic Art
Create generative art, geometric patterns, and procedural visuals with Claude Code. Describe your vision, get production-ready SVG or canvas code.