Claude Design: tools and knowledge
v0.1 · 2026-10-19 · от Better Mechanics · ниво: общност (текст, без протокол от проверка)
Compiled and verified live by a Claude agent on 19.10.2026 (official pages and the GitHub repo [repository, a storage location for software code]). Traffic light: GREEN = open license, allows reuse with attribution · YELLOW = free to use, but no republication or unclear terms · RED = restricted or paid. Stars are as of 19.10.2026. Anything not verified is marked as "unverified". Flagship, not a competitor: every position leads to the original.
1 · What is Claude Design today
- Announced on 17.04.2026 as the first product from Anthropic Labs (announcement).
- Now works in every conversation with Claude, including Claude Code and the Artifacts section, across all plans, including the free tier (product page).
- The standalone site claude.ai/design remains active until 14.12.2026.
- Included by default in Enterprise as of 15.10.2026.
- How to access: in the chat (Output → Design), the Design template in Artifacts,
/designin Claude Code, and mobile apps (preview and editing only) (help). - Design system: from GitHub, design files, uploads, or from local code using
/design-syncin Claude Code. - Export: .zip, PDF, PPTX, Google Slides, standalone HTML.
- Handover: to Claude Code (local or web).
2 · The First Ten
| # | What | Why | License |
|---|---|---|---|
| 1 | frontend-design skill | the official method against the generic look: 4–6 colors, font roles, self-checking | GREEN · Apache-2.0 (LICENSE.txt read) |
| 2 | Cookbook “Prompting for frontend aesthetics” | prompts by dimension: typography, color, motion, backgrounds | GREEN · MIT (the claude-cookbooks repo) |
| 3 | the Claude Design assistant + /design and /design-sync |
the official path: code → design system → back | YELLOW · link only |
| 4 | web-artifacts-builder skill | standalone HTML in a single file | GREEN · Apache-2.0 (per README; file unread) |
| 5 | shadcn/ui + Tailwind + shadcn MCP | the stack that Claude writes best | GREEN · MIT |
| 6 | Playwright MCP or Chrome DevTools MCP | Claude screenshots and checks its own result: the biggest win for quality | GREEN · Apache-2.0 |
| 7 | axe-core + Lighthouse | automated accessibility [the practice of making websites usable for everyone] and speed | GREEN · MPL-2.0 / Apache-2.0 |
| 8 | fontTools + Hyperglot + Wakamai Fondue | checking Cyrillic and the Bulgarian locl [a OpenType feature used to substitute glyphs for specific locales] |
GREEN · MIT / Apache-2.0 |
| 9 | Google Fonts / Fontsource + Bulgarian Cyrillic Initiative | fonts for self-hosting, filtered by Bulgarian forms | GREEN (OFL, per family) / YELLOW (the list) |
| 10 | three.js + Motion | 3D and motion with clean licenses | GREEN · MIT |
3 · Everything by group
Official from Anthropic: - anthropics/skills: ~182k stars. Most skills are Apache-2.0, while docx/pdf/pptx/xlsx are "source access only" [meaning the license applies to the source files but usage of the resulting documents may vary]. Color: GREEN / YELLOW. - theme-factory and canvas-design: GREEN (per README). - brand-guidelines: YELLOW. We take the structure; the brand belongs to Anthropic. - claude-cookbooks: MIT · GREEN. - claude-plugins-official: Apache-2.0, with frontend-design and playground · GREEN. - The blog "Improving frontend design through Skills": content is unverified.
Design systems and components: - shadcn/ui · Tailwind CSS · Radix Primitives · daisyUI · Open Props: all MIT, GREEN. - Pico CSS: MIT, but archived, last version 2.1.1. - Uiverse: MIT, but quality varies. - Icons: Lucide (ISC) · Tabler (MIT).
Typography and Cyrillic:
- Google Fonts (OFL per family) · Fontsource (MIT repo) · Noto (OFL) · fontTools (MIT) · Hyperglot (Apache-2.0) · glyphsets (Apache-2.0) · Wakamai Fondue (Apache-2.0).
- "Bulgarian Cyrillic" initiative: YELLOW, terms are not specified.
- Krista Radoeva's article in MyFonts regarding Russian and Bulgarian forms: YELLOW, link only.
- Our check with fontTools (19.10): Manrope, Montserrat, IBM Plex Sans, Source Sans 3, Commissioner, Geologica, Raleway, Unbounded, Piazzolla, and Marmelad have locl BGR [locl is a OpenType feature tag for localized forms]. Inter, Playfair, JetBrains Mono, IBM Plex Mono, Space Mono, and Martian Mono do not.
Color, tokens, accessibility: - axe-core (MPL-2.0) · Pa11y (LGPL-3.0) · Lighthouse (Apache-2.0) · Adobe Leonardo (Apache-2.0) · Radix Colors (MIT) · Style Dictionary (Apache-2.0). - WebAIM Contrast Checker: YELLOW, has a JSON API.
Motion and 3D: - three.js · Motion · Anime.js v4 · Lottie-web: MIT. Support for Lottie-web is unclear. - p5.js: LGPL-2.1. - GSAP: free, but has a proprietary [owned by a company rather than open source] license, therefore YELLOW. We prefer MIT alternatives. - Shadertoy: terms are unverified. A shader is not used without its own license.
Inspiration (for inspiration only, do not copy): - Awwwards · Siteinspire · Recent: YELLOW. godly.website redirects to recent.design. - Mobbin and Land-book: unverified.
MCP and CLI: - Figma MCP (official): RED/YELLOW depending on the Figma plan. Recording to the canvas requires a Full seat. - shadcn MCP (MIT) · Playwright MCP · Chrome DevTools MCP (Apache-2.0): GREEN. - Canva MCP: unverified. The export to Canva from Claude Design is verified.
Community collections:
- ui-ux-pro-max-skill: MIT. Font pairings are from Google Fonts, so the Bulgarian locl is checked separately.
- ComposioHQ/awesome-claude-skills: YELLOW for quality, contains a lot of promotion.
- hesreallyhim/awesome-claude-code: CC BY-NC-ND 4.0, RED. Link only, do not copy.
- travisvn/awesome-claude-skills: license is unverified.
4 · For pre-publication check
FontDrop · Shadertoy · Mobbin · Land-book · Canva MCP · Anthropic's blog · LICENSE files of the other Anthropic skills.