superdesign_extract_system
Extract design system components and specifications from screenshots or images to analyze UI patterns and structure.
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 function that validates the image_path input using ExtractDesignSystemSchema, checks if the image exists, constructs a detailed prompt (specifications) instructing an AI to extract a design system JSON from the image, and returns it as text content.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 schema defining the input for the tool: requires image_path as a string describing the path to the screenshot/image.const ExtractDesignSystemSchema = z.object({ image_path: z.string().describe("Path to screenshot/image to extract design system from") });
- src/index.ts:1981-1991 (registration)Registration of the tool in the ListToolsRequestSchema handler, including name, description, and input schema.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"], }, }, {