---
title: "nanlabs-design"
description: "Figma MCP and UI/UX intelligence (not a full designer workflow)"
canonical: https://agentpluginsdirectory.com/plugins/nanlabs-design
last-updated: 2026-09-18
---

# nanlabs-design
Figma MCP and UI/UX intelligence (not a full designer workflow)
- Slug: nanlabs-design
- Publisher: NaNLABS
- Repository: https://github.com/nanlabs/agent-toolkit
- Manifest: plugins/nanlabs-design/plugin.json
- Version: 0.2.0
- License: MIT
- Category (editorial): other
- Skills: 6 (figma-code-connect-components, figma-create-design-system-rules, figma-create-new-file, figma-implement-design, figma, ui-ux-pro-max)
- MCP servers: 1 (figma)
- Stars: 0
- Repository created: 2026-07-29
- Repository last pushed: 2026-09-17
- Publisher type: Organization
- Listing: https://agentpluginsdirectory.com/plugins/nanlabs-design
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## What nanlabs-design does, in the publisher's words

Figma MCP and UI/UX intelligence (not a full designer workflow)

Canonical skills live under skills/ / (layout group design). There is no second tree under skills/ /.

Official hosted MCP servers ship in mcp.json (Agent Plugins / Cursor) and.mcp.json (Claude Code). After install, authenticate in the client. No tokens are stored in the plugin.

- figma: https://mcp.figma.com/mcp

From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/nanlabs/agent-toolkit/HEAD/plugins/nanlabs-design/README.md

## Skills

- figma-code-connect-components: Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code imp…
- figma-create-design-system-rules: Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma…
- figma-create-new-file: Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage: /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteb…
- figma-implement-design: Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma c…
- figma: Use the Figma MCP server to fetch design context, screenshots, variables, and assets, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
- ui-ux-pro-max: UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Project…

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.

## MCP servers

- figma: transport: streamable-http; url: https://mcp.figma.com/mcp

Read from the plugin's own mcp.json. Environment variable names only, never values.