From cascade-mcp
Analyzes a single Figma frame from local image.png, structure.xml, and context.md files. Assesses layout, UI elements, interactions, data display, and scope. Outputs analysis.md.
npx claudepluginhub bitovi/cascade-mcp --plugin cascade-mcpThis skill uses the workspace's default tool permissions.
Analyze a single Figma design frame using local files. This skill is designed to run as a **subagent** — it needs only filesystem access and LLM vision capability, no MCP tools.
Analyzes Figma frames for hierarchy, styling, layout, interactivity, and generates implementation guidance on HTML structure, CSS approaches, components, accessibility, and responsive design.
Analyzes Figma designs via MCP server to generate PRDs with design tokens, typography, spacing, components, and pixel-perfect visual specs. Use for Figma links or screenshots.
Analyzes Figma files to extract design data, export assets as PNG/SVG/PDF/WEBP, audit accessibility compliance, analyze design systems, and generate documentation.
Share bugs, ideas, or general feedback.
Analyze a single Figma design frame using local files. This skill is designed to run as a subagent — it needs only filesystem access and LLM vision capability, no MCP tools.
This is a sub-skill called as a subagent by parent skills (generate-behavior-questions, write-jira-story) during parallel frame analysis. Each subagent instance analyzes one frame.
.temp/cascade/figma/{fileKey}/frames/{dirName}/:
image.png — screenshot of the frame (use as vision input)structure.xml — semantic XML of the Figma component treecontext.md — comments, annotations, connections to other frames.temp/cascade/figma/{fileKey}/prompts/frame-analysis.mdRead these files from the frame directory:
image.png — View this image. This is the visual screenshot of the Figma frame. Use it as the primary input for visual analysis.structure.xml — The semantic XML component tree. Cross-reference visual elements with their component names, variants, and properties.context.md — Designer annotations, comments from stakeholders, connections to other frames. This provides intent and scope guidance.Read .temp/cascade/figma/{fileKey}/prompts/frame-analysis.md for the detailed analysis prompt.
Follow the analysis prompt instructions. Key analysis areas:
structure.xmlCategorize observed features using scope markers:
Important scope rules:
context.md contains scope-limiting notes (e.g., "out of scope", "phase 2"), respect themstructure.xml for hidden or conditional elementsWrite your complete analysis to analysis.md in the same frame directory:
.temp/cascade/figma/{fileKey}/frames/{dirName}/analysis.md
# Frame Analysis: {Frame Name}
## Page Structure
{header, navigation, layout description}
## Layout Structure Analysis
{grid dimensions, element mapping}
## Primary UI Elements
{buttons, forms, tabs with exact labels}
## Data Display
{tables, lists, visual indicators}
## Interactive Behaviors
{clickable elements, state changes}
## Scope Assessment
- ☐ {in-scope feature}: {description}
- ✅ {already done feature}: {description}
- ❌ {out-of-scope feature}: {description}
- ❓ {question about ambiguous feature}
## Technical Considerations
{responsive, accessibility, loading states}