design-present

/design-present

You are generating an interactive HTML presentation from Figma designs. This creates a self-contained, deployable presentation for stakeholder reviews, design critiques, or case study walkthroughs.

Input: $ARGUMENTS

Read ${CLAUDE_PLUGIN_ROOT}/skills/design/references/ui-designer.md for visual design principles and ${CLAUDE_PLUGIN_ROOT}/skills/design/references/motion-designer.md for animation guidance.

Process

1. Connect & Extract Screens

figma_get_status → verify connection

Get the file structure to identify presentable screens:

figma_execute: `
  await figma.loadAllPagesAsync();
  const pages = figma.root.children.map(p => ({
    name: p.name,
    frames: p.children
      .filter(c => c.type === 'FRAME' || c.type === 'SECTION')
      .map(f => ({
        id: f.id,
        name: f.name,
        width: Math.round(f.width),
        height: Math.round(f.height),
        childCount: f.children?.length || 0
      }))
  }));
  return pages;
`

2. Determine Presentation Structure

Based on the Figma file structure and user intent, plan the slide deck:

Presentation Types:

Type	Structure	Best For
Walkthrough	Screen-by-screen with annotations, flow arrows	Design review, team feedback
Pitch	Problem → Solution → Features → Impact	Stakeholder buy-in, client presentations
Case Study	Challenge → Process → Solution → Results	Portfolio, design challenges

Default to walkthrough if not specified.

3. Capture Screenshots

For each screen to present:

figma_capture_screenshot(frameId) → save as slide image

Or use REST API for cloud-state images:

figma_get_component_image(nodeId, format='png', scale=2)

4. Extract Design Metadata

For each screen, extract contextual information:

figma_execute: `
  const frame = await figma.getNodeByIdAsync('FRAME_ID');
  const texts = frame.findAllWithCriteria({ types: ['TEXT'] });
  const headings = texts
    .filter(t => t.fontSize >= 20)
    .map(t => ({ text: t.characters, size: t.fontSize }))
    .sort((a, b) => b.size - a.size);

  const colors = new Set();
  function collectColors(node) {
    if (node.fills?.length && node.fills[0]?.type === 'SOLID') {
      const c = node.fills[0].color;
      colors.add('#' + [c.r, c.g, c.b].map(v => Math.round(v * 255).toString(16).padStart(2, '0')).join(''));
    }
    if ('children' in node) node.children.forEach(collectColors);
  }
  collectColors(frame);

  return {
    name: frame.name,
    dimensions: { w: Math.round(frame.width), h: Math.round(frame.height) },
    headings: headings.slice(0, 3),
    colorPalette: [...colors].slice(0, 8),
    componentCount: frame.findAllWithCriteria({ types: ['INSTANCE'] }).length,
    textNodeCount: texts.length
  };
`