workflow_build_design_system
Generate a complete design system from existing components by extracting tokens, components, and documentation from Storybook or code sources to establish consistent UI foundations.
Instructions
Generate complete design system from components
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| source | Yes | ||
| sourceId | Yes | ||
| includeTokens | No | ||
| includeComponents | No | ||
| includeDocumentation | No |
Implementation Reference
- src/tools/workflows.ts:106-173 (handler)Main handler implementation for workflow_build_design_system tool. Parses input with Zod, builds design system from Storybook or code source, generates tokens/components/docs, 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 input schema definition used for validating tool arguments in the 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 in ListToolsRequestHandler providing name, description, and inputSchema.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)Dispatch case in CallToolRequestHandler that routes execution to WorkflowTools.buildDesignSystem method.case 'workflow_build_design_system': return await this.workflowTools.buildDesignSystem(args);