https://github.com/ben-rogerson/lucky-dev-figma-tailwind
https://github.com/ben-rogerson/lucky-dev-figma-tailwind
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ben-rogerson/lucky-dev-figma-tailwind
- Owner: ben-rogerson
- Created: 2025-06-08T13:13:15.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-06-08T13:15:51.000Z (4 months ago)
- Last Synced: 2025-08-16T23:44:30.687Z (about 2 months ago)
- Language: TypeScript
- Size: 35.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lucky Dev - Figma to Tailwind MCP Server
This is a simple MCP server that converts figma designs to tailwind css.
The server grabs figma design code and runs it through an openai prompt to convert it to tailwind css.
The tailwind classes are grabbed from the tailwind config file and the tailwind preset (v3 only for now).
## Get started
You'll need the following:
1. A redis installation - add the url `.env` (eg: `REDIS_URL=redis://127.0.0.1:6379`)
2. An openAI API key - add to `.env` (eg: `OPENAI_API_KEY=sk-...`)
3. A figma API key - add to `.env` (eg: `FIGMA_API_KEY=figd_...`)
Install redis with brew (or however you like) - it's needed for the SSE server:
```sh
brew install redis
# Then start with
npm run redis-foreground
# Feel free to use it in the background too.
```
Run the dev server:
```sh
npm run dev
```
Add the sse server to cursor:
```
{
"mcpServers": {
"lucky-dev-next": {
"command": "npx",
"args": ["mcp-remote", "http://localhost:3000/sse"]
}
}
}
```
Then ask the cursor agent nicely to convert the figma design to tailwind css:
```
Convert this figma design:
@https://www.figma.com/design/7I7OPsHsJoMOhItIUQrrD9/Page?node-id=1-2&t=ZFTC2tIvJYLbhi8x-4
```
You can also use the id directly:
```
Convert the figma design to tailwind css:
7I7OPsHsJoMOhItIUQrrD9
```
Run the inspector (optional), this is useful for debugging:
```sh
npm run inspect
```