Extract and analyze Figma designs to create structured design specifications. Use this skill when you need to analyze Figma nodes, extract design properties (layout, spacing, typography), classify components using Atomic Design principles, and generate design specification documents that can be used for implementation.
Install
npx skills add xtone/ai_development_tools --skill figma-design-analyzernpx skills add xtone/ai_development_tools --skill figma-design-analyzer -a claude-code -gnpx skills add xtone/ai_development_tools --skill figma-design-analyzer -a codex -ggemini skills install https://github.com/xtone/ai_development_tools.git --path frontend_nextjs_development/skills/figma-design-analyzergh skill install xtone/ai_development_tools figma-design-analyzergit clone --depth 1 https://github.com/xtone/ai_development_tools /tmp/xtone__ai_development_tools
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/xtone__ai_development_tools/frontend_nextjs_development/skills/figma-design-analyzer ~/.claude/skills/figma-design-analyzer # Claude Code
cp -R /tmp/xtone__ai_development_tools/frontend_nextjs_development/skills/figma-design-analyzer ~/.agents/skills/figma-design-analyzer # Codex, Cursor, Gemini CLI, Copilot, OpenCode