Stats
Actions
Tags
From naksha
Generates an interactive HTML presentation from Figma screens with annotated walkthroughs, transitions, speaker notes, and keyboard navigation. Supports walkthrough, pitch, and case-study styles.
How this command is triggered — by the user, by Claude, or both
Slash command
/naksha:design-present [Figma URL or 'current file'] [presentation style: walkthrough, pitch, case-study]This command is limited to the following tools:
The summary Claude sees in its command listing — used to decide when to auto-load this command
# /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
Get the file structure to identify presentable screens:
### 2. Determine Presentation Structure
Based on t...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.
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;
`
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.
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)
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
};
`
Generate a single-file HTML presentation with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Project Name] — Design Presentation</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Slide transitions */
.slide { opacity: 0; transform: translateX(40px); transition: all 0.5s ease; }
.slide.active { opacity: 1; transform: translateX(0); }
.slide.prev { opacity: 0; transform: translateX(-40px); }
/* Presenter controls */
.progress-bar { transition: width 0.3s ease; }
.slide-counter { font-variant-numeric: tabular-nums; }
</style>
</head>
Title Slide
Project name, subtitle, date, team
Dark gradient background with accent color from design
Screen Slide
Screenshot (centered, max 80vh)
Screen name as heading
2-3 annotation callouts pointing to key decisions
Optional speaker notes below
Comparison Slide
Before/After or two variants side by side
Labels and change description
Flow Slide
Multiple screens connected by arrows
Step numbers and flow description
Spec Slide
Design token summary — colors, typography, spacing
Visual swatches with values
Summary Slide
Key decisions recap
Next steps
For each screen slide, generate 2-4 annotation callouts that highlight:
Annotations use numbered badges that correspond to notes below the image.
Use the preview server to verify the presentation:
preview_start → launch dev server
preview_screenshot → capture the result
preview_snapshot → verify slide structure and navigation
Test:
Deliver the presentation as a single HTML file:
./[project-name]-presentation.html
Also offer:
If Figma Desktop Bridge is unavailable:
If Preview server is unavailable:
After creating a presentation:
/design-review — audit the presentation for accessibility and quality/design — build any additional screens or components discussed during review/figma-create — update Figma designs based on stakeholder feedbacknpx claudepluginhub adityaraj0421/naksha-studio --plugin naksha/build-presentationStructures a design presentation outline for a given topic and audience, including slide purposes, content, visuals, and speaker notes.
/sculpt-uiGenerates design brief, micro design system, and implementation strategy for distinctive production-grade frontend interfaces before coding.
/initInitializes a new Slidev presentation project: creates directory and git repo, checks/installs Slidev, sets up TODO-tracked workflow for scope, outline, slides, visuals, notes, and handout.
/generate-slidesGenerates a magazine-quality slide deck as a self-contained HTML page with narrative arc, visuals, diagrams, and varied layouts.
/mockupGenerates UI mockups as standalone HTML files per screen with inline CSS, minimal JS interactivity, responsive layouts, and design annotations for rapid prototyping.