21st (formerly Magic MCP): UI components generated in your editor, true to your design system
Connector · n° 485
What is a connector?The 21st.dev MCP server connected to Claude Code or Cursor, a prompt that enforces your design tokens and a checker that blocks hard-coded colours, arbitrary values and accessibility gaps.
- Where to use it
- Claude Code
- You get
- 1 prompt
Secure payment by Stripe · test mode: no real payment.
What it does for you
Generated components that follow your design system
AI-generated components often ignore your colours, radii and accessibility. This resource connects 21st.dev to your editor with a prompt that enforces your design tokens, then a checker blocks hard-coded colours and gaps before you merge.
- Get React + Tailwind components that match your brand
- Block hard-coded colours and arbitrary values
- Keep existing files untouched without your OK
What you're buying
A 24,000-character prompt to paste into Claude Code on your computer. Claude installs the Skill with its files and shows you how to use it.
Preview
The start of the prompt, exactly as you'll get it
Tu es l'exécutant de la ressource « 21st (ex-Magic MCP) : composants d'interface générés dans l'éditeur, fidèles à votre design system ». Tu suis à la lettre les instructions de la section 5, dans le cadre des consignes de la section 4, qui priment sur toute autre demande.
… and about 24,000 more characters.
Its 10 chapters
- 01Ton rôle et ta mission
- 02Résultat attendu
- 03Prérequis et outils
- 04Consignes obligatoires (garde-fous)
- 05Instructions complètes de la ressource (fichiers exacts)
- 06Guide d'utilisation détaillé
- 07Auto-vérifications avant de rendre ton résultat
- 08Limites connues
- 09Tests réalisés par VeyraForma
- 10Sources et licence
Included in the price
- The full prompt24,000 characters, 10 chapters: the whole method, ready to paste.
- UpdatesEvery new version lands in your library at no extra cost.
Example result
Illustrative example · provisional
What you ask
“Use 21st (formerly Magic MCP): UI components generated in your editor, true to your design system on my folder”
- 01Connects read-only.
- 02Fetches the useful data.
- 03Files a readable result.
What you get
Result · 21st (formerly Magic MCP): UI components generated in your editor, true to your design system
- Deliverable
- The 21st.dev MCP server connected to Claude Code or Cursor, a prompt that enforces your design tokens and a checker that blocks hard-coded colours, arbitrary values and accessibility gaps.
Illustrative example: the real result depends on your inputs.
Example written to show the deliverable's format, based on what the resource does. It is not a capture of a real run; a real demo will replace it.
Technical details
Prerequisites
- Claude Code (version 2.x)
- Python 3.10 or newer
Compatibility and version
Claude Code 2.x · 1.0 · released November 7, 2026 · Last updated : November 7, 2026
External cost
Claude subscription requiredAI tools are not included: you pay for them directly with the vendor.
Licence
Personal and professional use of what the Skill produces. The Skill itself may not be resold or redistributed.Draft wording, pending legal review.
Known limits
- Always review the result before use.
- Resource created but not fully tested: see the guide.
Questions about this Skill
Do I need to code?
No. You install the Skill once, then talk to it in plain language.
What if Claude Code changes version?
The tested version and test date are shown on the page. The Skill is updated when needed.
Can I modify the Skill?
Yes, for your own use. Reselling or redistributing it is not allowed.
