figma-code-agent-mcp 1.0.0

package/dist/codeGenerator/jsxGenerator.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Converts Figma node tree to JSX/React code
+ */
+import { FigmaNodeStyle } from './styleConverter.js';
+export interface FigmaNode extends FigmaNodeStyle {
+    id: string;
+    name: string;
+    type: string;
+    children?: FigmaNode[];
+    characters?: string;
+    componentName?: string;
+    componentSetName?: string;
+    variantProperties?: Record<string, string>;
+    visible?: boolean;
+    componentDescription?: string;
+    componentDocumentationLinks?: Array<{
+        uri: string;
+    }>;
+    variantGroupProperties?: Record<string, string[]>;
+}
+export interface ImageAsset {
+    nodeId: string;
+    url: string;
+    variableName: string;
+}
+export interface GeneratedComponent {
+    name: string;
+    code: string;
+    isMainComponent: boolean;
+}
+/**
+ * Convert a name to a valid React component name (PascalCase)
+ */
+export declare function toComponentName(name: string): string;
+/**
+ * Convert a name to a valid variable name (camelCase)
+ */
+export declare function toVariableName(name: string): string;
+/**
+ * Generate a complete React component from a Figma node tree
+ */
+export declare function generateComponent(node: FigmaNode, imageUrls: Map<string, string>, componentName?: string): GeneratedComponent;
+/**
+ * Generate multiple components if the node tree contains component instances
+ */
+export declare function generateAllComponents(rootNode: FigmaNode, imageUrls: Map<string, string>): GeneratedComponent[];

package/dist/codeGenerator/jsxGenerator.js

@@ -0,0 +1,182 @@
+/**
+ * Converts Figma node tree to JSX/React code
+ */
+import { getClassName } from './styleConverter.js';
+/**
+ * Convert a name to a valid React component name (PascalCase)
+ */
+export function toComponentName(name) {
+    return name
+        .replace(/[^a-zA-Z0-9\s]/g, ' ')
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('');
+}
+/**
+ * Convert a name to a valid variable name (camelCase)
+ */
+export function toVariableName(name) {
+    const pascal = toComponentName(name);
+    return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+/**
+ * Escape text content for JSX
+ */
+function escapeJsxText(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .replace(/\{/g, '&#123;')
+        .replace(/\}/g, '&#125;');
+}
+/**
+ * Generate indentation string
+ */
+function indent(level) {
+    return '  '.repeat(level);
+}
+/**
+ * Check if a node should be rendered as an image
+ */
+function isImageNode(node, imageUrls) {
+    return imageUrls.has(node.id);
+}
+/**
+ * Get the appropriate HTML element for a Figma node type
+ */
+function getElementTag(node) {
+    switch (node.type) {
+        case 'TEXT':
+            return 'p';
+        case 'RECTANGLE':
+        case 'ELLIPSE':
+        case 'POLYGON':
+        case 'STAR':
+        case 'VECTOR':
+        case 'BOOLEAN_OPERATION':
+            return 'div';
+        case 'FRAME':
+        case 'GROUP':
+        case 'COMPONENT':
+        case 'COMPONENT_SET':
+            return 'div';
+        case 'INSTANCE':
+            return 'div'; // Will be handled specially for component instances
+        default:
+            return 'div';
+    }
+}
+/**
+ * Generate JSX for a single node
+ */
+function generateNodeJsx(node, imageUrls, ctx) {
+    // Skip invisible nodes
+    if (node.visible === false) {
+        return '';
+    }
+    const indentStr = indent(ctx.indent);
+    // Handle image nodes
+    if (isImageNode(node, imageUrls)) {
+        const imageUrl = imageUrls.get(node.id);
+        const varName = `img${toComponentName(node.name)}`;
+        // Track this image asset
+        ctx.imageAssets.push({
+            nodeId: node.id,
+            url: imageUrl,
+            variableName: varName,
+        });
+        const className = getClassName(node);
+        const classAttr = className ? ` className="${className}"` : '';
+        return `${indentStr}<img src={${varName}}${classAttr} alt="${escapeJsxText(node.name)}" data-node-id="${node.id}" />`;
+    }
+    // Handle text nodes
+    if (node.type === 'TEXT' && node.characters) {
+        const className = getClassName(node, true);
+        const classAttr = className ? ` className="${className}"` : '';
+        const text = escapeJsxText(node.characters);
+        // Use span for inline text, p for block text
+        const tag = node.characters.includes('\n') ? 'p' : 'span';
+        return `${indentStr}<${tag}${classAttr} data-node-id="${node.id}">${text}</${tag}>`;
+    }
+    // Handle component instances
+    if (node.type === 'INSTANCE' && node.componentName) {
+        const componentName = toComponentName(node.componentName);
+        ctx.componentInstances.add(componentName);
+        // Build props from variant properties
+        const props = [];
+        if (node.variantProperties) {
+            for (const [key, value] of Object.entries(node.variantProperties)) {
+                const propName = toVariableName(key);
+                props.push(`${propName}="${value}"`);
+            }
+        }
+        const propsStr = props.length > 0 ? ' ' + props.join(' ') : '';
+        return `${indentStr}<${componentName}${propsStr} data-node-id="${node.id}" />`;
+    }
+    // Handle container nodes
+    const tag = getElementTag(node);
+    const className = getClassName(node);
+    const classAttr = className ? ` className="${className}"` : '';
+    // If no children, self-close
+    if (!node.children || node.children.length === 0) {
+        return `${indentStr}<${tag}${classAttr} data-node-id="${node.id}" />`;
+    }
+    // Generate children
+    const childCtx = { ...ctx, indent: ctx.indent + 1 };
+    const childrenJsx = node.children
+        .map((child) => generateNodeJsx(child, imageUrls, childCtx))
+        .filter(Boolean)
+        .join('\n');
+    if (!childrenJsx) {
+        return `${indentStr}<${tag}${classAttr} data-node-id="${node.id}" />`;
+    }
+    return `${indentStr}<${tag}${classAttr} data-node-id="${node.id}">\n${childrenJsx}\n${indentStr}</${tag}>`;
+}
+/**
+ * Generate image variable declarations
+ */
+function generateImageDeclarations(assets) {
+    if (assets.length === 0)
+        return '';
+    const declarations = assets.map((asset) => `const ${asset.variableName} = "${asset.url}";`);
+    return declarations.join('\n') + '\n\n';
+}
+/**
+ * Generate a complete React component from a Figma node tree
+ */
+export function generateComponent(node, imageUrls, componentName) {
+    const name = componentName || toComponentName(node.name) || 'Component';
+    const ctx = {
+        imageAssets: [],
+        componentInstances: new Set(),
+        indent: 2,
+    };
+    const jsx = generateNodeJsx(node, imageUrls, ctx);
+    // Generate image declarations
+    const imageDeclarations = generateImageDeclarations(ctx.imageAssets);
+    // Build the component code
+    const code = `${imageDeclarations}export default function ${name}() {
+  return (
+${jsx}
+  );
+}`;
+    return {
+        name,
+        code,
+        isMainComponent: true,
+    };
+}
+/**
+ * Generate multiple components if the node tree contains component instances
+ */
+export function generateAllComponents(rootNode, imageUrls) {
+    const components = [];
+    // Generate the main component
+    const mainComponent = generateComponent(rootNode, imageUrls);
+    components.push(mainComponent);
+    return components;
+}

package/dist/codeGenerator/styleConverter.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Converts Figma node styles to Tailwind CSS classes
+ */
+interface FigmaColor {
+    r: number;
+    g: number;
+    b: number;
+}
+interface FigmaFill {
+    type: string;
+    color?: FigmaColor;
+    opacity?: number;
+}
+interface FigmaStroke {
+    type: string;
+    color?: FigmaColor;
+    opacity?: number;
+}
+interface FigmaEffect {
+    type: string;
+    color?: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    offset?: {
+        x: number;
+        y: number;
+    };
+    radius?: number;
+    spread?: number;
+    visible?: boolean;
+}
+export interface FigmaNodeStyle {
+    width?: number;
+    height?: number;
+    fills?: FigmaFill[];
+    strokes?: FigmaStroke[];
+    strokeWeight?: number;
+    cornerRadius?: number;
+    topLeftRadius?: number;
+    topRightRadius?: number;
+    bottomLeftRadius?: number;
+    bottomRightRadius?: number;
+    effects?: FigmaEffect[];
+    layoutMode?: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
+    primaryAxisAlignItems?: 'MIN' | 'CENTER' | 'MAX' | 'SPACE_BETWEEN';
+    counterAxisAlignItems?: 'MIN' | 'CENTER' | 'MAX' | 'BASELINE';
+    itemSpacing?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    layoutWrap?: 'NO_WRAP' | 'WRAP';
+    layoutGrow?: number;
+    layoutSizingHorizontal?: 'FIXED' | 'HUG' | 'FILL';
+    layoutSizingVertical?: 'FIXED' | 'HUG' | 'FILL';
+    fontSize?: number;
+    fontFamily?: string;
+    fontStyle?: string;
+    fontWeight?: number | symbol;
+    textAlignHorizontal?: 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFIED';
+    textAlignVertical?: 'TOP' | 'CENTER' | 'BOTTOM';
+    lineHeight?: {
+        value: number;
+        unit: string;
+    } | number | symbol;
+    letterSpacing?: {
+        value: number;
+        unit: string;
+    } | number | symbol;
+    textDecoration?: 'NONE' | 'UNDERLINE' | 'STRIKETHROUGH';
+    textCase?: 'ORIGINAL' | 'UPPER' | 'LOWER' | 'TITLE';
+    opacity?: number;
+    blendMode?: string;
+    clipsContent?: boolean;
+}
+/**
+ * Convert RGB values (0-1 range) to hex color
+ */
+export declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Convert Figma node styles to Tailwind classes
+ */
+export declare function convertToTailwind(node: FigmaNodeStyle): string[];
+/**
+ * Convert text-specific styles to Tailwind classes
+ */
+export declare function convertTextToTailwind(node: FigmaNodeStyle): string[];
+/**
+ * Combine all styles into a className string
+ */
+export declare function getClassName(node: FigmaNodeStyle, isText?: boolean): string;
+export {};

package/dist/codeGenerator/styleConverter.js

@@ -0,0 +1,306 @@
+/**
+ * Converts Figma node styles to Tailwind CSS classes
+ */
+/**
+ * Convert RGB values (0-1 range) to hex color
+ */
+export function rgbToHex(r, g, b) {
+    const toHex = (n) => {
+        const hex = Math.round(n * 255)
+            .toString(16)
+            .padStart(2, '0');
+        return hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+/**
+ * Convert Figma node styles to Tailwind classes
+ */
+export function convertToTailwind(node) {
+    const classes = [];
+    // Dimensions
+    if (node.layoutSizingHorizontal === 'FILL') {
+        classes.push('w-full');
+    }
+    else if (node.width !== undefined && node.layoutSizingHorizontal !== 'HUG') {
+        classes.push(`w-[${Math.round(node.width)}px]`);
+    }
+    if (node.layoutSizingVertical === 'FILL') {
+        classes.push('h-full');
+    }
+    else if (node.height !== undefined && node.layoutSizingVertical !== 'HUG') {
+        classes.push(`h-[${Math.round(node.height)}px]`);
+    }
+    // Auto-layout (Flexbox)
+    if (node.layoutMode && node.layoutMode !== 'NONE') {
+        classes.push('flex');
+        classes.push(node.layoutMode === 'VERTICAL' ? 'flex-col' : 'flex-row');
+        // Wrap
+        if (node.layoutWrap === 'WRAP') {
+            classes.push('flex-wrap');
+        }
+        // Gap/spacing
+        if (node.itemSpacing !== undefined && node.itemSpacing > 0) {
+            classes.push(`gap-[${Math.round(node.itemSpacing)}px]`);
+        }
+        // Primary axis alignment (justify-content)
+        if (node.primaryAxisAlignItems) {
+            const justifyMap = {
+                MIN: 'justify-start',
+                CENTER: 'justify-center',
+                MAX: 'justify-end',
+                SPACE_BETWEEN: 'justify-between',
+            };
+            if (justifyMap[node.primaryAxisAlignItems] && node.primaryAxisAlignItems !== 'MIN') {
+                classes.push(justifyMap[node.primaryAxisAlignItems]);
+            }
+        }
+        // Counter axis alignment (align-items)
+        if (node.counterAxisAlignItems) {
+            const alignMap = {
+                MIN: 'items-start',
+                CENTER: 'items-center',
+                MAX: 'items-end',
+                BASELINE: 'items-baseline',
+            };
+            if (alignMap[node.counterAxisAlignItems] && node.counterAxisAlignItems !== 'MIN') {
+                classes.push(alignMap[node.counterAxisAlignItems]);
+            }
+        }
+    }
+    // Padding
+    const pt = node.paddingTop ?? 0;
+    const pb = node.paddingBottom ?? 0;
+    const pl = node.paddingLeft ?? 0;
+    const pr = node.paddingRight ?? 0;
+    if (pt === pb && pl === pr && pt === pl && pt > 0) {
+        // All padding equal
+        classes.push(`p-[${Math.round(pt)}px]`);
+    }
+    else {
+        if (pt === pb && pt > 0) {
+            classes.push(`py-[${Math.round(pt)}px]`);
+        }
+        else {
+            if (pt > 0)
+                classes.push(`pt-[${Math.round(pt)}px]`);
+            if (pb > 0)
+                classes.push(`pb-[${Math.round(pb)}px]`);
+        }
+        if (pl === pr && pl > 0) {
+            classes.push(`px-[${Math.round(pl)}px]`);
+        }
+        else {
+            if (pl > 0)
+                classes.push(`pl-[${Math.round(pl)}px]`);
+            if (pr > 0)
+                classes.push(`pr-[${Math.round(pr)}px]`);
+        }
+    }
+    // Background color
+    if (node.fills && node.fills.length > 0) {
+        const fill = node.fills[0];
+        if (fill.type === 'SOLID' && fill.color) {
+            const hex = rgbToHex(fill.color.r, fill.color.g, fill.color.b);
+            classes.push(`bg-[${hex}]`);
+            if (fill.opacity !== undefined && fill.opacity < 1) {
+                classes.push(`bg-opacity-[${Math.round(fill.opacity * 100)}]`);
+            }
+        }
+    }
+    // Border/stroke
+    if (node.strokes && node.strokes.length > 0) {
+        const stroke = node.strokes[0];
+        if (stroke.type === 'SOLID' && stroke.color) {
+            const hex = rgbToHex(stroke.color.r, stroke.color.g, stroke.color.b);
+            const weight = node.strokeWeight ?? 1;
+            if (weight === 1) {
+                classes.push('border');
+            }
+            else {
+                classes.push(`border-[${Math.round(weight)}px]`);
+            }
+            classes.push(`border-[${hex}]`);
+        }
+    }
+    // Corner radius
+    if (node.cornerRadius !== undefined && node.cornerRadius > 0) {
+        if (typeof node.cornerRadius === 'number') {
+            classes.push(`rounded-[${Math.round(node.cornerRadius)}px]`);
+        }
+    }
+    else if (node.topLeftRadius !== undefined ||
+        node.topRightRadius !== undefined ||
+        node.bottomLeftRadius !== undefined ||
+        node.bottomRightRadius !== undefined) {
+        // Individual corner radii
+        const tl = node.topLeftRadius ?? 0;
+        const tr = node.topRightRadius ?? 0;
+        const bl = node.bottomLeftRadius ?? 0;
+        const br = node.bottomRightRadius ?? 0;
+        if (tl === tr && bl === br && tl === bl && tl > 0) {
+            classes.push(`rounded-[${Math.round(tl)}px]`);
+        }
+        else {
+            if (tl > 0)
+                classes.push(`rounded-tl-[${Math.round(tl)}px]`);
+            if (tr > 0)
+                classes.push(`rounded-tr-[${Math.round(tr)}px]`);
+            if (bl > 0)
+                classes.push(`rounded-bl-[${Math.round(bl)}px]`);
+            if (br > 0)
+                classes.push(`rounded-br-[${Math.round(br)}px]`);
+        }
+    }
+    // Effects (shadows)
+    if (node.effects && node.effects.length > 0) {
+        for (const effect of node.effects) {
+            if ((effect.type === 'DROP_SHADOW' || effect.type === 'INNER_SHADOW') &&
+                effect.visible !== false) {
+                if (effect.color && effect.offset && effect.radius !== undefined) {
+                    const { r, g, b, a } = effect.color;
+                    const rgba = `rgba(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)},${a.toFixed(2)})`;
+                    const shadow = `${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${effect.spread ?? 0}px ${rgba}`;
+                    if (effect.type === 'INNER_SHADOW') {
+                        classes.push(`shadow-[inset_${shadow.replace(/\s+/g, '_')}]`);
+                    }
+                    else {
+                        classes.push(`shadow-[${shadow.replace(/\s+/g, '_')}]`);
+                    }
+                }
+            }
+        }
+    }
+    // Opacity
+    if (node.opacity !== undefined && node.opacity < 1) {
+        classes.push(`opacity-[${Math.round(node.opacity * 100)}]`);
+    }
+    // Overflow (clipping)
+    if (node.clipsContent === true) {
+        classes.push('overflow-hidden');
+    }
+    // Flex grow
+    if (node.layoutGrow !== undefined && node.layoutGrow > 0) {
+        classes.push('flex-1');
+    }
+    return classes;
+}
+/**
+ * Convert text-specific styles to Tailwind classes
+ */
+export function convertTextToTailwind(node) {
+    const classes = [];
+    // Font size
+    if (node.fontSize !== undefined) {
+        classes.push(`text-[${Math.round(node.fontSize)}px]`);
+    }
+    // Font weight
+    if (node.fontWeight !== undefined && typeof node.fontWeight === 'number') {
+        const weightMap = {
+            100: 'font-thin',
+            200: 'font-extralight',
+            300: 'font-light',
+            400: 'font-normal',
+            500: 'font-medium',
+            600: 'font-semibold',
+            700: 'font-bold',
+            800: 'font-extrabold',
+            900: 'font-black',
+        };
+        if (weightMap[node.fontWeight]) {
+            classes.push(weightMap[node.fontWeight]);
+        }
+        else {
+            classes.push(`font-[${node.fontWeight}]`);
+        }
+    }
+    else if (node.fontStyle) {
+        // Map font style names to weights
+        const styleWeightMap = {
+            Thin: 'font-thin',
+            ExtraLight: 'font-extralight',
+            Light: 'font-light',
+            Regular: 'font-normal',
+            Medium: 'font-medium',
+            SemiBold: 'font-semibold',
+            Semibold: 'font-semibold',
+            Bold: 'font-bold',
+            ExtraBold: 'font-extrabold',
+            Black: 'font-black',
+        };
+        if (styleWeightMap[node.fontStyle]) {
+            classes.push(styleWeightMap[node.fontStyle]);
+        }
+    }
+    // Text alignment
+    if (node.textAlignHorizontal) {
+        const alignMap = {
+            LEFT: 'text-left',
+            CENTER: 'text-center',
+            RIGHT: 'text-right',
+            JUSTIFIED: 'text-justify',
+        };
+        if (alignMap[node.textAlignHorizontal] && node.textAlignHorizontal !== 'LEFT') {
+            classes.push(alignMap[node.textAlignHorizontal]);
+        }
+    }
+    // Line height
+    if (node.lineHeight && typeof node.lineHeight === 'object' && 'value' in node.lineHeight) {
+        const lh = node.lineHeight;
+        if (lh.unit === 'PIXELS') {
+            classes.push(`leading-[${Math.round(lh.value)}px]`);
+        }
+        else if (lh.unit === 'PERCENT') {
+            classes.push(`leading-[${(lh.value / 100).toFixed(2)}]`);
+        }
+    }
+    // Letter spacing
+    if (node.letterSpacing &&
+        typeof node.letterSpacing === 'object' &&
+        'value' in node.letterSpacing) {
+        const ls = node.letterSpacing;
+        if (ls.unit === 'PIXELS') {
+            classes.push(`tracking-[${ls.value.toFixed(1)}px]`);
+        }
+        else if (ls.unit === 'PERCENT') {
+            classes.push(`tracking-[${(ls.value / 100).toFixed(3)}em]`);
+        }
+    }
+    // Text decoration
+    if (node.textDecoration === 'UNDERLINE') {
+        classes.push('underline');
+    }
+    else if (node.textDecoration === 'STRIKETHROUGH') {
+        classes.push('line-through');
+    }
+    // Text case
+    if (node.textCase === 'UPPER') {
+        classes.push('uppercase');
+    }
+    else if (node.textCase === 'LOWER') {
+        classes.push('lowercase');
+    }
+    else if (node.textCase === 'TITLE') {
+        classes.push('capitalize');
+    }
+    // Text color (from fills)
+    if (node.fills && node.fills.length > 0) {
+        const fill = node.fills[0];
+        if (fill.type === 'SOLID' && fill.color) {
+            const hex = rgbToHex(fill.color.r, fill.color.g, fill.color.b);
+            classes.push(`text-[${hex}]`);
+        }
+    }
+    return classes;
+}
+/**
+ * Combine all styles into a className string
+ */
+export function getClassName(node, isText = false) {
+    const baseClasses = convertToTailwind(node);
+    const textClasses = isText ? convertTextToTailwind(node) : [];
+    const allClasses = [...baseClasses, ...textClasses];
+    // Remove duplicates and empty strings
+    const uniqueClasses = [...new Set(allClasses)].filter(Boolean);
+    return uniqueClasses.join(' ');
+}

package/dist/hints.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Contextual hints to help AI agents improve their Figma workflow.
+ * These are appended to tool responses to encourage best practices.
+ */
+export type HintContext = {
+    toolName: string;
+    result: unknown;
+    args: Record<string, unknown>;
+};
+export declare const IMPROVEMENT_AGENT_PROMPT: string;
+export declare function getImprovementHint(): string | null;
+export declare function resetImprovementHint(): void;
+export declare function getHintsForTool(context: HintContext): string[];
+export declare function formatResponseWithHints(result: unknown, toolName: string, args: Record<string, unknown>): string;