workflow_build_design_system
Automate the creation of a complete design system by extracting components, tokens, and documentation from Storybook or code sources. Streamline UI/UX development with integrated workflows.
Instructions
Generate complete design system from components
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| includeComponents | No | ||
| includeDocumentation | No | ||
| includeTokens | No | ||
| source | Yes | ||
| sourceId | Yes |
Implementation Reference
- src/tools/workflows.ts:106-173 (handler)Main handler function implementing the workflow_build_design_system tool. Parses input with Zod schema, builds design system from Storybook or code source, generates tokens/components/documentation, and returns structured output.async buildDesignSystem(args: any) { const params = BuildDesignSystemSchema.parse(args); try { const designSystem: any = { name: 'Design System', version: '1.0.0', source: params.source, created: new Date().toISOString(), tokens: {}, components: [], documentation: {} }; switch (params.source) { case 'storybook': // Build from Storybook if (params.includeComponents) { const stories = await this.storybookTools.getStories({ url: params.sourceId }); designSystem.components = this.extractStorybookComponents(stories); } break; case 'code': // Build from code analysis designSystem.components = await this.analyzeCodeComponents(params.sourceId); break; } if (params.includeDocumentation) { designSystem.documentation = this.generateSystemDocumentation(designSystem); } // Generate output files const outputs = { tokens: params.includeTokens ? this.generateTokenFiles(designSystem.tokens) : null, components: params.includeComponents ? this.generateComponentFiles(designSystem.components) : null, documentation: params.includeDocumentation ? this.generateDocFiles(designSystem.documentation) : null }; return { content: [ { type: 'text', text: JSON.stringify({ designSystem, outputs, summary: { tokenCategories: Object.keys(designSystem.tokens).length, componentCount: designSystem.components.length, documentationPages: Object.keys(designSystem.documentation).length } }, null, 2) } ] }; } catch (error: any) { return { content: [ { type: 'text', text: `Error building design system: ${error.message}` } ], isError: true }; } }
- src/tools/workflows.ts:15-21 (schema)Zod schema used for input validation in the buildDesignSystem handler.const BuildDesignSystemSchema = z.object({ source: z.enum(['storybook', 'code']), sourceId: z.string(), includeTokens: z.boolean().default(true), includeComponents: z.boolean().default(true), includeDocumentation: z.boolean().default(true) });
- src/index.ts:275-291 (registration)Tool registration entry listing the workflow_build_design_system tool with name, description, and input schema for the MCP server.name: 'workflow_build_design_system', description: 'Generate complete design system from components', inputSchema: { type: 'object', properties: { source: { type: 'string', enum: ['storybook', 'code'] }, sourceId: { type: 'string' }, includeTokens: { type: 'boolean', default: true }, includeComponents: { type: 'boolean', default: true }, includeDocumentation: { type: 'boolean', default: true } }, required: ['source', 'sourceId'] } }
- src/index.ts:334-335 (registration)Switch case dispatching tool calls to the WorkflowTools.buildDesignSystem handler.case 'workflow_build_design_system': return await this.workflowTools.buildDesignSystem(args);