Claude Design完全ガイド——FigmaもCanvaも不要になるAnthropicの新ツール

Claude Design: The Ultimate Guide More people need to know this exists - Claude Design has to be the most underrated tool Anthropic has ever shipped. After spending the weekend testing Anthropic's new AI design tool, I don't think I'll ever open Canva or Figma again. You can literally build visuals for anything - marketing campaigns, presentations, infographics, proposals, and way more. This is the complete guide to mastering Claude Design. ## Contents - Section I: Intro to Claude Design - Section II: Accessing Claude Design in 60 Seconds - Section III: Using Claude Design - Section IV: Real Examples - Section V: Pro Tips (rapid-fire style) - Closing ## Section I: Intro to Claude Design Last Friday, Anthropic Labs shipped Claude Design - a new product that lets you collaborate with Claude to create polished visual work. This announcement post got nearly 60M views! It's simply the best design tool on the market. Think: designs, prototypes, slides, one-pagers, and more. Traditional visual design tools like Figma share a common barrier to entry: a learning curve to achieve the outputs you want. I've literally caught myself spending 1-2H+ in Figma/Canva manually spacing things, adjusting color palettes. Claude Design completely flattens that learning curve and produces better visuals in minutes. All you have to do is explain in natural text what you want, and Claude Design builds it. Claude Design is a completely separate platform from all the other Claude tools (with its own usage limits). ## Section II: Accessing Claude Design in 60 Seconds Open Claude on the web, and navigate to the left sidebar, where you can find 'Design.' You can also access Claude Design directly here: https://claude.ai/design ## Usage Limits Claude Design runs on its own separate usage allowance. It does not count against your regular Claude chat or Claude Code limits. Pro subscribers get a weekly allowance of Design prompts, while Max subscribers get a significantly higher limit with priority access. Note that Claude Design usage limits are reset weekly - this is unlike the normal Claude chat, which resets every few hours. ## Section III: Using Claude Design ### The Interface The left side is your chat panel. This is where you describe what you want, iterate on outputs, and give Claude direction. The right side is your canvas. This is your live, interactive space where you work in real-time. ### Starting a Design In the left sidebar, you'll see four options for getting started with a design: - Prototype: Clickable, interactive design that simulates a real product - Slide Deck: Presentation built slide by slide - From Template: Pre-built starting point - Other: For everything else For general purposes, I recommend just selecting 'Other,' naming the Project, and selecting 'Create.' ### Design Systems Design Systems are where you can set guidelines and rules for specific visuals. Think of them like Claude Skills, but for visuals - just a place where Claude knows your preset guidelines/instructions. For example, you can add your brand colors to a new Design System, and Claude will know the exact guidelines for creating visuals for your brand. Under 'Design Systems,' click 'Create New.' You can add your fonts, codebases, notes, and more. Pro advice: I actually recommend creating a Claude Skill first, then pasting it into the 'Other Notes' section. For example, I have a Claude Skill that contains the entire AI Edge brand guidelines (font, color palettes, everything). I simply copied the .MD text and pasted it into the 'Notes' section, and Claude Design now knows all the creative design components for the AI Edge brand. I personally have a few different Design Systems: - MHC (my finance brand visuals) - AI Edge (my AI media company visuals) - Anthropic (for creating visuals in Anthropic's signature colors) ## Section IV: Real Examples 1. Iridescent Card (by Anthropic) An interactive prototype by the Anthropic team Prompt: Create a monochromatic playing card. Display it on the page with a rich perspective hover effect and glow. The bright areas should be iridescent; there should be a subtle noise texture and specular glow that reacts to the mouse position. Add tweaks for as many aspects of this effect as you can. 2. AI Edge Brand Visual A visual created based on one of my latest articles 3. MHC Brand Visual A visual created based on my finance brand guidelines ## Section V: Pro Tips - Learn about Claude Design: On the right side of the Canvas, you can select 'Learn about Claude Design,' which gives you personalized tips. - Approve/Deny: Inside projects, you can tell Claude what 'Looks Good' and what 'Needs Work' - take advantage of this feature so that Claude can learn what good visuals actually look like for you. - Share: In the top right of designs, you can 'Share' - export to Canva, add teammates, and more. - Tweaks: In the top right of designs, you'll see 'Tweaks' - basically just an easy way to edit visuals. - Draw: If desired, you can sketch inside your designs for hand-drawn visuals. - Official Docs: https://support.claude.com/en/articles/14604416-get-started-with-claude-design ## Closing Claude Design is powered by Claude Opus 4.7, Anthropic's most capable vision model. Available in research preview on the Pro, Max, Team, and Enterprise plans. Hopefully, you now understand just how powerful this new tool is and why I've completely switched to it for all my creative design needs.