design-extraction-skill

Extracts design tokens, components, and screens from a codebase and builds a structured design system in Pencil (.pen) files. Use when user says 'design extraction', 'extract design', 'build design system', 'code to design', 'デザイン抽出', 'デザインシステム構築', 'コンポーネント抽出', or wants to reverse-engineer UI from code into a design tool.

Analyzes conditional branches in UI code and generates all screen variants (user roles, states, toggles, errors) in Pencil (.pen) files. Use when user says 'generate variants', 'screen states', 'design variants', 'conditional states', 'バリアント生成', '画面状態', '条件分岐のデザイン', or wants to visualize all UI states from code.