superdesign_extract_system
Extract design system information from screenshots or images by analyzing visual elements, enabling efficient UI design and component creation workflows.
Instructions
Returns instructions for extracting design system from screenshot or image
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| image_path | Yes | Path to screenshot/image to extract design system from |
Implementation Reference
- src/index.ts:2202-2265 (handler)Handler for 'superdesign_extract_system' tool: validates image_path input, checks file existence, generates detailed prompt instructing another AI (Claude Code) to analyze the image and extract a reusable design system into JSON format in the design_system directory.case "superdesign_extract_system": { const { image_path } = ExtractDesignSystemSchema.parse(args); if (!existsSync(image_path)) { return { content: [{ type: "text", text: `Error: Image file ${image_path} does not exist` }], }; } const superdesignDir = getSuperdeignDirectory(); const designSystemDir = path.join(superdesignDir, 'design_system'); let specifications = `DESIGN SYSTEM EXTRACTION SPECIFICATION FOR CLAUDE CODE: IMPORTANT: You must analyze the image and extract a design system JSON file. === EXTRACTION PARAMETERS === - Image path: ${image_path} - Output location: ${designSystemDir}/design-system.json === EXTRACTION GUIDELINES === Analyze the screenshot/image and extract: 1. Color palette (primary, secondary, neutrals) 2. Typography rules (font families, sizes, weights, line heights) 3. Spacing system (margin/padding values) 4. Layout structure (grid system, containers) 5. Component styles (buttons, inputs, cards, etc.) 6. Visual effects (shadows, borders, radius values) === OUTPUT FORMAT === Create a JSON file with this structure: { "colors": { "primary": {...}, "secondary": {...}, "neutrals": {...} }, "typography": { "fontFamilies": {...}, "sizes": {...}, "weights": {...} }, "spacing": {...}, "components": { "buttons": {...}, "inputs": {...}, ... }, "effects": {...} } === EXECUTION INSTRUCTIONS === 1. Analyze the image at ${image_path} 2. Extract ONLY design patterns, not content 3. Create a reusable design system 4. Save as ${designSystemDir}/design-system.json 5. If file exists, create design-system_2.json, etc. Please proceed to analyze the image and create the design system JSON file now.`; return { content: [{ type: "text", text: specifications }], }; }
- src/index.ts:37-39 (schema)Zod input validation schema for the superdesign_extract_system tool, defining the required 'image_path' parameter.const ExtractDesignSystemSchema = z.object({ image_path: z.string().describe("Path to screenshot/image to extract design system from") });
- src/index.ts:1981-1990 (registration)Tool registration entry in the ListTools response, defining name, description, and input schema for 'superdesign_extract_system'.name: "superdesign_extract_system", description: "Returns instructions for extracting design system from screenshot or image", inputSchema: { type: "object", properties: { image_path: { type: "string", description: "Path to screenshot/image to extract design system from" } }, required: ["image_path"], }, },