> ## Documentation Index
> Fetch the complete documentation index at: https://www.magicpatterns.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Bring your designs into code

> Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.

**1. Navigate to the 'Share' button**

![Share button in the top right of Magic Patterns](https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/share-button-agents.png?fit=max\&auto=format\&n=TEHAXOfbjecxbojR\&q=85\&s=75b11cb4017241100b9d773e3169067c)

**2. Select 'Agents' and connect Cursor or Claude Code**

![Agents tab with Cursor selected](https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-cursor.png?fit=max\&auto=format\&n=TEHAXOfbjecxbojR\&q=85\&s=420a0a8b740887d6ab9aa35b34274e93)

![Agents tab with Claude Code selected](https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-claude-code.png?fit=max\&auto=format\&n=TEHAXOfbjecxbojR\&q=85\&s=0561d1362eafd2f0f3e6492756c93ff6)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.