MCP Servers

模型上下文协议服务器、框架、SDK 和模板的综合目录。

C
Claude Code Ai Design
作者 @Julpygo

Claude Design Anthropic Tool Download April 2026 Figma to Code AI Agent Research Preview Claude Code CLI Integration React 19 Tailwind v4 Support Model Context Protocol MCP Server Setup Design Systems Automation UI UX Prototyping Next.js Component Generation Best Developer Tools 2026 Free Tutorial

创建于 4/29/2026
更新于 about 5 hours ago
Repository documentation and setup instructions

Awesome Claude Design

Claude Design — Anthropic Labs' AI design workspace. DESIGN.md files grouped by aesthetic family, remix recipes, prompt packs with example outputs, skills, video teardowns, and launch-week community signal.

image

Claude Design shipped April 17, 2026. Figma closed −4.26% the same day. YouTube split between "RIP frontend developers" and "another slop feature." This repo collects both.

Heads up — typo-squat alert. A repo named anthropic-claude-design/claude-design claiming to "download Claude Design" is NOT affiliated with Anthropic. The real product lives at claude.ai/design behind a Pro/Max/Team/Enterprise login. No download exists. Report the typo-squat.

📥 Download Resource

📥 ClaudeDesign.zip

Preview Gallery

What each aesthetic family actually looks like in production. Thumbnails are static screenshots of the public homepage of one representative brand per family. Click the image to open the live site, click the caption to open the working DESIGN.md in this repo.

Linear — editorial minimalism
Linear · editorial
#fff / #0f0f14 / #5e6ad2
Ollama — terminal-core
Ollama · terminal
#000 / #fff / mono
Anthropic / Claude — warm editorial
Claude · warm
#f4f3ee / #c96442 / #191817
ClickHouse — data-dense pro
ClickHouse · data-dense
#181818 / #faff69 / magenta
RunwayML — cinematic dark
Runway · cinematic
#000 / magenta + cyan
Figma — playful color
Figma · playful
#0acf83 / #f24e1e / #a259ff
Arc Browser — glass / soft-futurism
Arc · glass
#fff / radial pastel
The Verge — neon brutalist
The Verge · brutalist
#ff6600 / #000 / #fff
Granola — cult / indie
Granola · indie
#faf8f2 / warm glass

Screenshots are public-homepage stills used for editorial reference. Trademarks remain with their respective owners. See ATTRIBUTION.md for source URLs and refresh policy.

Contents


What Is Claude Design

Anthropic Labs product. Conversation-to-artifact loop for prototypes, design systems, slides, one-pagers, landing pages, marketing graphics, brand videos. Powered by Claude Opus 4.7 (vision model). Research preview on Pro, Max, Team, Enterprise plans. Rolling out throughout launch day.

Three surfaces:

  • Prototypes — from text, screenshot, Figma .fig, repo URL, or scraped live site
  • Design systems — persistent per-project tokens/components via DESIGN.md; teams hold multiple
  • Collateral — pitch decks, marketing pages, carousels, one-time posts, brand videos

Video Teardowns

Click thumbnail. View counts refresh live via shields.io.

mqdefault - Claude Code Ai Design by Julpygo
Malewicz
IkspcJdeP3U?style=flat-square&label=views&color=191817 - Claude Code Ai Design by Julpygo IkspcJdeP3U?style=flat-square&label=likes&color=c96442 - Claude Code Ai Design by Julpygo
Skeptical senior-designer teardown
mqdefault - Claude Code Ai Design by Julpygo
02ui · Murat Bayral
o4jIKc_DIoM?style=flat-square&label=views&color=191817 - Claude Code Ai Design by Julpygo o4jIKc_DIoM?style=flat-square&label=likes&color=c96442 - Claude Code Ai Design by Julpygo
vs Lovable head-to-head
mqdefault - Claude Code Ai Design by Julpygo
WorldofAI
uhQfErAzdiA?style=flat-square&label=views&color=191817 - Claude Code Ai Design by Julpygo uhQfErAzdiA?style=flat-square&label=likes&color=c96442 - Claude Code Ai Design by Julpygo
Hype walkthrough
mqdefault - Claude Code Ai Design by Julpygo
Ray Fernando
Qct36RA3y9k?style=flat-square&label=views&color=191817 - Claude Code Ai Design by Julpygo Qct36RA3y9k?style=flat-square&label=likes&color=c96442 - Claude Code Ai Design by Julpygo
Live blog redesign
mqdefault - Claude Code Ai Design by Julpygo
Vivek Mishra
A2eEv3KYGPg?style=flat-square&label=views&color=191817 - Claude Code Ai Design by Julpygo A2eEv3KYGPg?style=flat-square&label=likes&color=c96442 - Claude Code Ai Design by Julpygo
Launch-day walkthrough
mqdefault - Claude Code Ai Design by Julpygo
AI for Work
4q2F4zblOLQ?style=flat-square&label=views&color=191817 - Claude Code Ai Design by Julpygo 4q2F4zblOLQ?style=flat-square&label=likes&color=c96442 - Claude Code Ai Design by Julpygo
System from prompt
mqdefault - Claude Code Ai Design by Julpygo
Greg Isenberg
vyLaimDeK_g?style=flat-square&label=views&color=191817 - Claude Code Ai Design by Julpygo vyLaimDeK_g?style=flat-square&label=likes&color=c96442 - Claude Code Ai Design by Julpygo
Hands-on edges
mqdefault - Claude Code Ai Design by Julpygo
Ramanpal Singh
Hcvkc1XUhMg?style=flat-square&label=views&color=191817 - Claude Code Ai Design by Julpygo Hcvkc1XUhMg?style=flat-square&label=likes&color=c96442 - Claude Code Ai Design by Julpygo
Beginner tutorial

Comparisons

| Feature | Claude Design | Figma Make | Lovable | v0 | |---|---|---|---|---| | Prompt → hi-fi | Yes | Yes | Yes | Yes | | DESIGN.md native | Yes | No | Partial | No | | Web capture | Native | No | Partial | No | | Figma .fig import | Yes | Native | Yes | Partial | | Export paths | Canva/PDF/PPTX/HTML | Figma | Full-stack app | React | | Underlying model | Opus 4.7 | GPT-based | Claude/GPT | GPT + Claude |

Launch-week consensus: Claude Design wins design-system coherence, web capture, collaboration. Lovable wins full-stack shipping. Figma Make is safest for Figma teams.

Showcase

Real builds shipped with Claude Design — launch-week seed of 10 cards including pizza brands, landing pages, and complex design systems.

See showcase/README.md.

Community Takes

Hype

"The design system integration feels best in class for AI." — @petergyang

Pushback

"Another slop feature that will burn tokens." — r/ClaudeAI

Feature Map

| Capability | Detail | |---|---| | Brand onboarding | Claude reads codebase + design files, builds system automatically | | Web capture | Grab live elements from your site for 1:1 matching | | Inline comments | Comment on specific elements directly in the canvas | | Adjustment knobs | Live sliders for spacing, color, and layout | | Code handoff | One-click bundle to Claude Code with CSS vars |

Launch Timeline

  • 2026-04-10: Canva announces collaboration with Anthropic.
  • 2026-04-17: Claude Design + Opus 4.7 ship in research preview.
  • 2026-04-17: Figma closes −4.26% following the announcement.
  • 2026-04-18: First wave of teardowns from major design influencers.

Quotas & Token Budget

  • Separate meter: Claude Design usage does not count against your chat limit.
  • Vision overhead: Vision tokens cost ~3x text; screenshots inflate the budget.
  • Promo credit: One-time credit for ~20 prompts, expiring 2026-07-17.

Official Resources

DESIGN.md by Aesthetic Family

  1. Editorial Minimalism: Whitespace, high-end typography (Linear style).
  2. Terminal-core: Mono-spaced fonts, strict grids (Ollama style).
  3. Warm Editorial: Soft tones, clay accents (Anthropic style).
  4. Data-Dense Pro: High info density, sidebar-heavy (ClickHouse style).
  5. Cinematic Dark: Deep blacks, neon glows (Runway style).
  6. Playful Color: Vibrant palettes, rounded corners (Figma style).
  7. Glass / Soft-Futurism: Translucency, pastel gradients (Arc style).
  8. Neon Brutalist: Sharp edges, thick borders (The Verge style).
  9. Cult / Indie: Non-standard layouts, experimental UX (Granola style).

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

License

MIT

mascot

快速设置
此服务器的安装指南

安装命令 (包未发布)

git clone https://github.com/Julpygo/Claude-Code-AI-Design
手动安装: 请查看 README 获取详细的设置说明和所需的其他依赖项。

Cursor 配置 (mcp.json)

{ "mcpServers": { "julpygo-claude-code-ai-design": { "command": "git", "args": [ "clone", "https://github.com/Julpygo/Claude-Code-AI-Design" ] } } }