Overview

NeuroDesign AI equips React developers to map emotion descriptors like "premium, calm, trustworthy" to structured design tokens via neuro_emotion_map, then generate deterministic TSX hero components with Tailwind classes and exact inline styles using neuro_generate_react. Reverse-engineer TSX source code into tokens and node schemas with neuro_reverse_tsx, validate against brand guidelines using neuro_brand_check, and apply senior-designer fixes from neuro_design_suggest. Ensure WCAG compliance with neuro_accessibility_check, optimize performance via neuro_performance_analyze, and create A/B test variants complete with stats and code using neuro_abtest_generate.

Key Capabilities

neuro_emotion_map delivers deterministic tokens—colors, typography, spacing, layout—from emotion inputs, plus confidence scores and tags.
neuro_generate_react outputs React TSX hero layouts using Tailwind and inline hex/font styles from token inputs.
neuro_reverse_tsx employs TypeScript AST parsing to extract colors, Tailwind hints, fonts, and sizes into tokens and a nodes-with-roles schema, with heuristic confidence.
neuro_brand_check enforces rules on colors, fonts, sizes, and density via brand://guidelines or custom JSON; neuro_design_suggest supplies prioritized fixes.
neuro_accessibility_check scans for WCAG contrast, typography, semantics, and screen reader issues with fix reports.
neuro_performance_analyze evaluates bundle size, render estimates, and optimizations for React components.
neuro_abtest_generate produces token-based A/B variants, sample sizes, statistical power, and implementation code.
echo and hello enable quick testing.

Use Cases

Chain neuro_emotion_map on "trustworthy, energetic" to tokens, then neuro_generate_react for a compliant hero TSX section. Feed existing TSX into neuro_reverse_tsx for tokens, check brand compliance with neuro_brand_check, implement neuro_design_suggest fixes, and regenerate. Audit libraries by batch-reverse-engineering TSX, running neuro_accessibility_check and neuro_performance_analyze for reports, then prototype A/B tests with neuro_abtest_generate to boost conversions.

Who This Is For

React and TypeScript developers using Tailwind who convert emotion-driven or Figma-inspired designs to code. UI engineers maintaining component libraries and design systems at intermediate levels. Teams enforcing brand, accessibility, and performance standards programmatically without dedicated design software.