NeuroDesign AI (MCP Server)
Overview
The neuro-design-ai MCP server provides a suite of AI-driven tools for translating emotions into design tokens, generating React components, reverse-engineering TSX, and validating against brand guidelines. It enables developers to create emotionally resonant UIs programmatically, ensuring consistency from concept to code. Use it to bridge design intent with production-ready frontend assets.
Key Capabilities
neuro_emotion_map maps emotion descriptors like "premium" or "calm" to structured design tokens including colors, typography, spacing, layout, confidence scores, and tags.
neuro_generate_react produces deterministic React TSX components (hero layouts with Tailwind and inline styles) from NeuroDesign tokens.
neuro_reverse_tsx parses TSX source via TypeScript AST to extract colors, styles, and layout hints, outputting NeuroDesign tokens and a node schema with heuristic confidence.
neuro_brand_check and neuro_design_suggest validate tokens against brand rules (colors, fonts, sizes, density) and provide fix suggestions; echo and hello support testing.
Use Cases
Map "trustworthy and energetic" to tokens with neuro_emotion_map, then feed them into neuro_generate_react to output a branded hero section TSX. Paste existing React code into neuro_reverse_tsx to get design tokens, run neuro_brand_check for compliance issues, and apply neuro_design_suggest fixes before regenerating. Audit a component library by batch-processing TSX files through reverse engineering and brand validation to enforce guidelines. Prototype emotion variants by chaining emotion mapping to React generation for A/B UI tests.
Who This Is For
Frontend developers and UI engineers familiar with React, TypeScript, and Tailwind who build emotion-driven designs. Suited for intermediate skill levels with experience in component authoring and design systems. Ideal for teams needing programmatic design consistency without full design tools.