# Watch mode for live development
npm run watch

# Type checking
npm run typecheck

# Production build
npm run build

figma.showUI(__html__, { width: 800, height: 600 });

// Listen for extraction requests
figma.ui.onmessage = (msg) => {
  if (msg.type === 'extract-styles') {
    const styles = extractLocalStyles();
    const variables = extractVariables();
    const components = extractComponentFamilies();
    
    figma.ui.postMessage({
      type: 'extraction-complete',
      data: { styles, variables, components }
    });
  }
};

function extractLocalStyles() {
  const paintStyles = figma.getLocalPaintStyles();
  const textStyles = figma.getLocalTextStyles();
  const effectStyles = figma.getLocalEffectStyles();
  const gridStyles = figma.getLocalGridStyles();
  
  return {
    colors: paintStyles.map(s => ({
      name: s.name,
      type: s.paints[0]?.type,
      value: paintToHex(s.paints[0])
    })),
    typography: textStyles.map(s => ({
      name: s.name,
      fontFamily: s.fontName.family,
      fontSize: s.fontSize,
      lineHeight: s.lineHeight
    })),
    effects: effectStyles.map(s => ({
      name: s.name,
      effects: s.effects
    })),
    grids: gridStyles.map(s => ({
      name: s.name,
      layoutGrids: s.layoutGrids
    }))
  };
}

function extractVariables() {
  const collections = figma.variables.getLocalVariableCollections();
  
  return collections.map(collection => ({
    name: collection.name,
    modes: collection.modes,
    variables: collection.variableIds.map(id => {
      const variable = figma.variables.getVariableById(id);
      return {
        name: variable?.name,
        resolvedType: variable?.resolvedType,
        valuesByMode: variable?.valuesByMode
      };
    })
  }));
}

function extractComponentFamilies() {
  const components = figma.root.findAll(node => 
    node.type === 'COMPONENT_SET'
  ) as ComponentSetNode[];
  
  return components.map(comp => ({
    name: comp.name,
    variantCount: comp.children.length,
    properties: Object.keys(comp.componentPropertyDefinitions || {})
  }));
}

// Send extraction request
window.parent.postMessage(
  { pluginMessage: { type: 'extract-styles' } },
  '*'
);

// Receive extraction results
window.onmessage = (event) => {
  const msg = event.data.pluginMessage;
  
  if (msg.type === 'extraction-complete') {
    const designMd = generateDesignMd(msg.data);
    const skillMd = generateSkillMd(msg.data);
    
    setDesignContent(designMd);
    setSkillContent(skillMd);
  }
};

# Design System – [File Name]

## Source
- **File**: [Figma file name]
- **Page**: [Current page]
- **Extracted**: [ISO timestamp]

## Variable Collections
- **Collection Name** (2 modes: Light, Dark)

## Color Tokens
| Token | Value | Type |
|-------|-------|------|
| primary/500 | #3B82F6 | solid |
| neutral/900 | #111827 | solid |

## Typography Tokens
| Token | Font Family | Size | Line Height | Weight |
|-------|-------------|------|-------------|--------|
| heading/xl | Inter | 32px | 1.2 | 700 |
| body/md | Inter | 16px | 1.5 | 400 |

## Spacing Tokens
| Token | Value |
|-------|-------|
| spacing/xs | 4px |
| spacing/md | 16px |

## Component Families
- Button (variants: 8)
- Input (variants: 6)
- Card (variants: 4)

# AI Design System Agent – [File Name]

## Mission
Implement UI components that strictly follow the extracted design system from [File Name].

## Brand
- **Product**: [Inferred from file]
- **Audience**: [Inferred context]
- **Surface**: Web/Mobile

## Style Foundations
### Colors
- Primary: #3B82F6
- Semantic: Success (#10B981), Error (#EF4444)

### Typography
- Heading scale: 32/24/20/16px
- Body scale: 16/14/12px
- Font stack: Inter, system-ui, sans-serif

## Accessibility
- WCAG 2.2 AA contrast (4.5:1 text, 3:1 UI)
- Minimum touch target: 44×44px
- Focus indicators required

## Rules: Do
- Use extracted color tokens exactly
- Apply typography tokens for all text
- Respect spacing scale for layout
- Implement all component variants

## Rules: Don't
- Don't invent new colors outside token set
- Don't use arbitrary font sizes
- Don't skip accessibility requirements

// In plugin code
async function extractAndGenerate() {
  // Extract all design tokens
  const styles = extractLocalStyles();
  const variables = extractVariables();
  const components = extractComponentFamilies();
  
  // Generate markdown
  const designMd = formatDesignMd({ styles, variables, components });
  const skillMd = formatSkillMd({ styles, variables, components });
  
  // Send to UI for download
  figma.ui.postMessage({
    type: 'download-ready',
    designMd,
    skillMd
  });
}

function paintToHex(paint: Paint): string {
  if (paint.type === 'SOLID') {
    const r = Math.round(paint.color.r * 255);
    const g = Math.round(paint.color.g * 255);
    const b = Math.round(paint.color.b * 255);
    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
  }
  return 'gradient';
}

function formatTypographyToken(style: TextStyle) {
  const lineHeight = style.lineHeight.unit === 'PIXELS' 
    ? `${style.lineHeight.value}px`
    : style.lineHeight.value;
    
  return {
    name: style.name,
    fontFamily: style.fontName.family,
    fontSize: `${style.fontSize}px`,
    fontWeight: style.fontWeight,
    lineHeight,
    letterSpacing: style.letterSpacing
  };
}

function extractComponentVariants(componentSet: ComponentSetNode) {
  const variants = componentSet.children.map(child => {
    if (child.type === 'COMPONENT') {
      return {
        name: child.name,
        properties: child.variantProperties || {}
      };
    }
  }).filter(Boolean);
  
  return {
    family: componentSet.name,
    count: variants.length,
    variants
  };
}

Using the design tokens in DESIGN.md, create a React component 
for [Component Name] that:
- Uses color tokens from primary palette
- Applies typography token heading/md
- Respects spacing/md for padding
- Implements all variants listed in Component Families

// Check for local styles
const paintStyles = figma.getLocalPaintStyles();
if (paintStyles.length === 0) {
  console.warn('No local paint styles found in this file');
}

const collections = figma.variables.getLocalVariableCollections();
console.log('Found collections:', collections.length);

npm install --save-dev @figma/plugin-typings

{
  "compilerOptions": {
    "types": ["@figma/plugin-typings"]
  }
}

{
  "name": "Design MD Skill Generator",
  "id": "YOUR_PLUGIN_ID",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma"]
}