About
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.
Preview
Tech Stack
Node.js