MindStudio Interface Designer — Master Frontend Skill

This skill governs every UI/UX task performed via Claude Code through the MindStudio local tunnel. It combines collaborative design discovery, bold aesthetic execution, comprehensive UX intelligence, React performance best practices, and a rigorous pre-delivery quality checklist — all tuned specifically for the MindStudio Interface Designer environment.

The Interface Designer outputs React components that are compiled and deployed directly into MindStudio User Input blocks. Every interface you build here is a live, interactive part of an AI agent workflow. Design accordingly: the interface must be functional, polished, accessible, and feel native to the product it serves.

---

Phase 1: Discovery — Always Interview First

Never jump straight to code. Before any design or implementation work, run a focused discovery conversation. Ask one question at a time. Prefer multiple-choice when possible. The goal is to understand purpose, user, constraints, and aesthetic direction before a single line of code is written.

Discovery Questions (ask sequentially, stop when you have enough)

Question 1 — Purpose
What is this interface collecting or communicating? Pick the closest:

• - A) A form or data collection step inside an AI workflow
• B) An onboarding or multi-step wizard
• C) A dashboard or data display
• D) A creative tool or interactive experience
• E) Something else (describe it)

Question 2 — User
Who will use this interface?

• - A) Internal team / operations
• B) End customers / consumers
• C) Business clients / B2B
• D) The builder themselves (testing/prototyping)

Question 3 — Tone & Feel
What feeling should this interface communicate? Pick one or two:

• - A) Professional and trustworthy
• B) Warm and approachable
• C) Bold and energetic
• D) Minimal and focused
• E) Luxurious and refined
• F) Playful and fun
• G) Technical and precise

Question 4 — Visual Constraints
Do you have brand colors, fonts, or an existing design system to match?

• - A) Yes — share them (hex codes, font names, logo)
• B) Loosely — here's a reference site or screenshot
• C) No — give me your best creative direction

Question 5 — Technical Constraints
Any technical requirements?

• - A) Must work in MindStudio's React environment (default — always assume this)
• B) Specific npm packages required
• C) Must match an existing component library (shadcn, MUI, etc.)
• D) No constraints beyond MindStudio compatibility

Question 6 — MindStudio Variable Mapping (REQUIRED)
This is critical. In MindStudio, every input the user fills out gets passed as a variable into the rest of the agent workflow. For each input field in the interface, we need to know its variable name so the component can wire them up correctly.

Ask the user:

"Let's map your inputs to MindStudio variables. For each field in this interface, what should the variable be named? For example: topic, tone, keywords, content_type. List each field and its variable name."

If the user isn't sure, suggest names based on the interface purpose and ask them to confirm or adjust. For example, for a LinkedIn post generator:

Field	Suggested Variable
Raw idea / topic	INLINECODE4
Tone of voice

tone |
| Post length | post_length |
| Keywords | keywords |
| Content format | content_type |

Once confirmed, use these exact variable names throughout the component. Do not invent variable names. Do not use generic names like input1 or field_value.

Variable Wiring Pattern

Every confirmed variable must be captured in component state using its exact MindStudio variable name and surfaced for the workflow. Use this pattern:

CODEBLOCK0

Always display a variable reference summary in a code comment at the top of the component so it's clear to the MindStudio builder which variables the interface produces:

CODEBLOCK1

After Discovery

Once you understand what you're building, present the design plan in sections of 200-300 words. Check in after each section before proceeding. Cover:

1. 1. Aesthetic direction and rationale
2. Component structure and layout
3. Data flow and state management
4. Interaction patterns and animations
5. Accessibility and edge cases

Ask: "Does this direction feel right? Any adjustments before I build?"

Propose 2-3 approaches when trade-offs exist. Lead with your recommendation and explain why. Apply YAGNI ruthlessly — remove features that aren't needed for this specific interface.

---

Phase 2: Aesthetic Direction — Commit Boldly

Once discovery is complete, lock in a clear aesthetic direction and execute it with precision. Generic interfaces are forgettable. The best MindStudio interfaces feel purpose-built.

Choosing a Direction

Commit to one of these aesthetic archetypes (or a deliberate blend of two):

Archetype	Character	Best For
Refined Minimal	Surgical whitespace, one accent color, perfect type	SaaS, B2B, professional tools
Luxury Editorial

Serif display, high contrast, generous margins | Portfolios, premium services, creative agencies |
| Dark Technical | Deep backgrounds, monospace accents, neon highlights | Developer tools, AI products, fintech |
| Warm & Approachable | Rounded corners, soft palette, friendly type | Consumer apps, health, education |
| Bold Brutalist | Raw grid, oversized type, stark contrast | Fashion, art, provocative brands |
| Glassmorphic | Frosted panels, layered depth, soft blurs | Modern SaaS, dashboards, overlays |
| Bento Grid | Card-based density, varied sizes, organized chaos | Dashboards, feature showcases |
| Retro-Futuristic | Scan lines, phosphor glow, monospace | AI tools, tech demos, niche products |
| Claymorphic | Inflated shapes, pastel 3D, playful shadows | Consumer apps, games, children's tools |
| Organic/Natural | Earth tones, texture, flowing curves | Wellness, food, sustainability |

CRITICAL RULE: Choose a direction and commit fully. Halfhearted execution of any style is worse than bold execution of any other. The key is intentionality.

What Makes an Interface Unforgettable

Before coding, answer: What is the ONE thing a user will remember about this interface? It could be a font choice, an animation on entry, an unexpected color, a micro-interaction on submit. Identify it. Then build everything else to support it.

---

Phase 3: Design System — Build Before You Code

Establish these design tokens before writing components. Store them as CSS variables or a Tailwind config extension.

Typography

Pair a distinctive display font with a refined body font. Never default to Inter, Roboto, Arial, or system-ui as a primary choice.

Example pairings by archetype:

Archetype	Display	Body
Luxury Editorial	Playfair Display, Cormorant Garamond	Lora, EB Garamond
Bold Brutalist

Anton, Bebas Neue | IBM Plex Mono, Space Mono |
| Dark Technical | Syne, Oxanium | JetBrains Mono, Fira Code |
| Warm Approachable | Nunito, Quicksand | Source Sans Pro, DM Sans |
| Refined Minimal | Fraunces, Libre Baskerville | Figtree, Plus Jakarta Sans |
| Glassmorphic | Outfit, Syne | Manrope, DM Sans |

Rules:

• - line-height for body: 1.5-1.75
• INLINECODE12 for readable text: 65-75 characters (ch units)
• Minimum 16px body text on mobile
• Scale: xs/sm/base/lg/xl/2xl/3xl/4xl — never use arbitrary sizes

Color System

Commit to a palette with clear roles. Every color must have a purpose.

CODEBLOCK2

Contrast requirements (WCAG AA minimum):

• - Normal text (under 18px): 4.5:1 minimum
• Large text (18px+ or 14px bold): 3:1 minimum
• Interactive elements against background: 3:1 minimum
• Never use gray-400 or lighter for body text in light mode

Palette archetypes by product type:

Product	Primary Palette Direction
SaaS / B2B	Cool slate, indigo, neutral with blue accent
E-commerce

High contrast black/white, product-driven accent |
| Healthcare | Calm blue-green, white, soft sage |
| Fintech | Deep navy, gold accent, crisp white |
| Beauty / Wellness | Rose, champagne, dusty sage, warm cream |
| Creative Agency | Monochrome base, electric accent |
| Education | Warm amber, forest green, cream |
| Gaming / Entertainment | Dark base, neon accent, high saturation |

Spacing Scale

Use an 8-point grid. Common values: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px. Never use arbitrary spacing.

Z-Index Scale

Define this explicitly to avoid stacking chaos:

CODEBLOCK3

---

Phase 4: Component Architecture (MindStudio React Environment)

MindStudio's Interface Designer runs a full React environment with hot reloading, npm package support, and live preview. Build as you would in a professional React project.

MindStudio-Specific Rules

• - Single root component: Export one default component that MindStudio compiles
• No SSR assumptions: This is a client-side React environment — avoid Next.js-specific APIs
• State is local: Use useState, useReducer, and useContext — no Redux or external state stores unless explicitly needed
• Responsive default: Assume the interface will render at various widths — always test at 375px, 768px, 1024px, 1440px
• No <form> HTML tags: Use onClick/onChange handlers instead of native form submission

The MindStudio Bridge — CRITICAL

MindStudio automatically provides a ./bridge file in every Interface Designer project. This is the only correct way to submit data and advance the workflow to the next block. Never use window.MindStudio.submit or any other submission method — they will silently fail.

The bridge exposes:

Export	Type	Purpose
INLINECODE21	function	Sends form data to the workflow and advances to the next block
INLINECODE22

function | Uploads a file and returns a CDN URL |
| requestFile(options?) | function | Prompts the user to pick a file or media from their library |
| useIsRunning() | hook | Returns true while the workflow is processing after submission |
| useTemplateVariables() | hook | Returns current values of variables already set in the workflow |

Always import from the bridge at the top of every component:

CODEBLOCK4

Never use:
CODEBLOCK5

Component Structure Pattern

CODEBLOCK6

State Management Patterns

Multi-step forms:
CODEBLOCK7

Submit button loading state — use bridge hook, not manual state:
CODEBLOCK8

Form validation:

const [errors, setErrors] = useState<Record<string, string>>({})
// Validate on blur, not on every keystroke
// Show errors inline, near the field, not in a banner at the top
// Clear errors when the user corrects the field
// Only call submit() after validation passes

---

Phase 5: Visual Craft — The Details That Matter

Motion & Animation

Animations should feel purposeful, not decorative. Every animation earns its place.

Entry animations (page/component load):
CODEBLOCK10

Interaction timing:

• - Hover state transitions: 150-200ms ease-out
• Focus transitions: 100ms
• Page/step transitions: 300-400ms cubic-bezier
• Loading spinners: instant appear, 200ms fade-out on resolve
• Toasts/notifications: 250ms slide-in, 200ms fade-out

Performance rules for animation:

• - Only animate transform and opacity — never width, height, top, left, INLINECODE33
• Use will-change: transform sparingly, only on elements that definitely animate
• Always include prefers-reduced-motion override:

CODEBLOCK11

Backgrounds & Depth

Never default to a flat solid color background. Create atmosphere:

CODEBLOCK12

Glassmorphism (when appropriate)

CODEBLOCK13

Shadows

Use layered shadows for realism:

/* Soft elevation */
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08);

/* Medium card */
box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.10);

/* Floating / modal */
box-shadow: 0 4px 8px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.14);

/* Colored accent shadow */
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25); /* use primary color */

---

Phase 6: Interaction Design — Pixel-Perfect UX

Clickable Elements

Every interactive element must communicate its interactivity:

CODEBLOCK15

Touch target sizes:

• - Minimum 44x44px for all interactive elements on mobile
• Add padding rather than enlarging the visual element if needed

Form Inputs

CODEBLOCK16

Loading States

Never leave the user staring at a blank or frozen interface:

CODEBLOCK17

Hover States — Common Rules

Situation	Do	Don't
Card hover	Color shift or shadow elevation	Scale transform that shifts layout
Button hover

Darken background 10%, slight shadow | No visual change | | Link hover | Color + underline | Only underline (too subtle) | | Icon button | Background fill on hover | Nothing | | Destructive action | Red tint on hover | Same as normal hover |

Icons

• - Always use SVG icon sets (Lucide, Heroicons, Phosphor, Radix Icons)
• Never use emoji as UI icons
• Keep icons consistent from one library per project
• Standard size: 16px (inline text), 20px (buttons), 24px (standalone)
• Always pair icons with accessible labels: aria-label for icon-only buttons

---

Phase 7: Accessibility — Non-Negotiable

Every interface delivered must pass these checks.

ARIA & Semantic HTML

CODEBLOCK18

Keyboard Navigation

• - Tab order must match visual reading order
• All interactive elements reachable by keyboard
• Modals/drawers trap focus while open, return focus on close
• Escape key closes overlays
• Enter/Space activate buttons

Color & Contrast Checklist

• - Normal text on background: minimum 4.5:1
• Large text (18px+ regular, 14px+ bold): minimum 3:1
• Interactive element boundaries: minimum 3:1
• Use a tool like Stark or WebAIM Contrast Checker to verify
• Color is NEVER the only indicator of state (always pair with icon, label, or pattern)

---

Phase 8: React Performance — Build Fast Interfaces

Eliminating Waterfalls (CRITICAL)

Never chain async operations sequentially when they can run in parallel:

CODEBLOCK19

Bundle Size (CRITICAL)

CODEBLOCK20

Re-render Optimization

CODEBLOCK21

Rendering Performance

CODEBLOCK22

Common Pitfalls

Don't	Do
Barrel imports	Import from source files directly
Sequential awaits for independent data

Promise.all() | | items.sort() mutating array | items.toSorted() | | Create RegExp inside render | Hoist to module level | | Heavy objects created in render | Hoist or memoize | | Load analytics in critical path | Lazy-load with dynamic() | | Re-render whole tree for local state | Extract to focused child component |

---

Phase 9: Light/Dark Mode — Both Must Work

If the interface supports theming, both modes must be production-ready.

CODEBLOCK23

Critical light mode rules:

• - Glass cards: bg-white/80 or higher — never bg-white/10 (invisible)
• Body text: #0f172a (slate-900) minimum — never gray-400 or lighter
• Muted text: #475569 (slate-600) minimum
• Borders must be visible: border-gray-200 not INLINECODE46

Critical dark mode rules:

• - Surface backgrounds need enough contrast from page background
• Text on dark: ensure sufficient luminance difference
• Colored elements may need adjusted saturation for dark contexts

---

Phase 10: Layout Patterns for MindStudio Interfaces

Responsive Breakpoints

CODEBLOCK24

Always verify:

• - No horizontal scroll on mobile
• No content hidden behind fixed/sticky elements
• Tap targets at least 44x44px

Common MindStudio Interface Layouts

Single-step form:
CODEBLOCK25

Multi-step wizard:
CODEBLOCK26

Dashboard / data display:
CODEBLOCK27

Navbar Rules

If the interface has a fixed navbar:

• - Add top-4 left-4 right-4 for floating effect (not top-0 left-0 right-0)
• Add padding-top to content equal to navbar height + gap
• Use same max-w-6xl or max-w-7xl as page content

---

Phase 11: Industry-Specific Design Guidance

Use these as starting points, then differentiate within the direction.

SaaS / B2B Tools

• - Clean, data-forward, trust-building
• Neutral base (slate, gray) with a blue or indigo accent
• Dense information hierarchy, not decorative
• Typography: utilitarian but distinctive (Syne, Figtree, DM Sans)

E-commerce / Retail

• - Product-first — the UI should recede, product should shine
• Strong CTAs, clear value hierarchy
• Fast-loading, mobile-optimized above all
• Trust signals: ratings, reviews, guarantees near purchase actions

Healthcare / Wellness

• - Calm, reassuring, clinical clarity
• Blue-green, soft sage, white — never alarming colors
• Extra accessibility rigor: larger text defaults, clearer labels
• No unnecessary animation — focus over delight

Fintech / Finance

• - Precise, authoritative, secure-feeling
• Deep navy, charcoal, gold accent — never playful
• Data accuracy visual cues: monospace numbers, clear decimal alignment
• Typography: sharp serifs or clean geometric sans

Beauty / Luxury

• - Atmosphere over function
• Generous whitespace, refined typography (Cormorant, Playfair)
• Muted, sophisticated palette — champagne, rose, deep forest
• Subtle animations, hover reveals, image-forward

Creative / Agency

• - The interface IS the portfolio
• Bold choices: oversized type, unexpected layouts, strong color
• Can break conventions — asymmetry, overlapping elements, diagonal flow
• Signature moment: the one thing they'll remember

---

Phase 12: Pre-Delivery Checklist

Run every item before delivering code. No exceptions.

Visual Quality

• - [ ] No emoji used as UI icons — all icons are SVG (Lucide/Heroicons/Phosphor)
• [ ] All icons from one consistent library
• [ ] No generic fonts (Inter, Roboto, Arial) used as the primary display font
• [ ] Aesthetic direction is clearly committed — not a generic mix of styles
• [ ] Color palette has clear hierarchy: dominant, accent, semantic
• [ ] Light mode text contrast passes 4.5:1 (body), 3:1 (large text)
• [ ] Backgrounds have depth — not flat solid colors

Interaction

• - [ ] All clickable/interactive elements have INLINECODE51
• [ ] All hover states provide visible feedback (color, shadow, or border)
• [ ] All transitions use transform/opacity (not layout properties)
• [ ] Transition durations: 150-200ms for micro-interactions, 300ms for major transitions
• [ ] Loading states exist for all async operations
• [ ] Error states are visible, inline, and actionable
• [ ] Disabled states are visually distinct

Layout & Responsive

• - [ ] No horizontal scroll at 375px viewport
• [ ] No content hidden behind fixed navbars
• [ ] Consistent max-width container used throughout
• [ ] 8-point spacing grid respected
• [ ] Floating navbars have edge spacing (top-4 left-4 right-4)
• [ ] Touch targets minimum 44x44px on mobile

Accessibility

• - [ ] All images have descriptive alt text (or alt="" for decorative)
• [ ] All form inputs have associated <label> elements
• [ ] Icon-only buttons have INLINECODE58
• [ ] Focus states are visible (focus-visible outline)
• [ ] Tab order matches visual reading order
• [ ] Color is not the only indicator of state
• [ ] prefers-reduced-motion media query respected
• [ ] Error messages use role="alert" or INLINECODE62

Light/Dark Mode (if applicable)

• - [ ] Light mode glass/transparent elements visible (opacity ≥ 0.6)
• [ ] Light mode muted text ≥ slate-600 (#475569)
• [ ] Dark mode borders visible (not border-white/10 on dark bg)
• [ ] Both modes tested visually before delivery

React Performance

• - [ ] No barrel imports from large libraries
• [ ] Independent data fetches use INLINECODE65
• [ ] Expensive components wrapped in React.memo where appropriate
• [ ] Stable callbacks use useCallback with correct dependencies
• [ ] No implicit falsy renders (count && <X /> replaced with count > 0 && <X />)
• [ ] No RegExp or heavy objects created inside render functions
• [ ] Dynamic imports used for non-critical heavy components

MindStudio Compatibility

• - [ ] No <form> HTML tags — using onClick/onChange handlers
• [ ] No SSR-only APIs (no Next.js-specific routing/image APIs unless confirmed)
• [ ] Single default export from the root component
• [ ] All state is local (no external state management unless explicitly requested)
• [ ] Component compiles without errors in MindStudio's React environment
• [ ] submit and useIsRunning imported from ./bridge — never INLINECODE76
• [ ] Submit button uses useIsRunning() from bridge for loading state — no manual setTimeout or status state
• [ ] submit(data) is called with all variable values on final submission
• [ ] Every input field is wired to its confirmed MindStudio variable name — no invented or generic names (input1, field_value, etc.)
• [ ] State keys match the exact variable names confirmed during discovery
• [ ] Variable reference comment block at the top of the component lists all output variables with their types and descriptions

---

Quick Reference Card

Font Pairings (Never Use Inter/Roboto/Arial as Primary)

Mood	Display	Body
Luxury	Cormorant Garamond	Lora
Editorial

Playfair Display | Source Serif 4 | | Technical | Syne | JetBrains Mono | | Approachable | Nunito | DM Sans | | Minimal | Fraunces | Figtree | | Bold | Bebas Neue | IBM Plex Sans | | Modern | Outfit | Manrope | | Organic | Vollkorn | Nunito Sans |

Animation Timing Cheat Sheet

Interaction	Duration	Easing
Hover state	150ms	ease-out
Button active

100ms | ease | | Tooltip appear | 150ms | ease-out | | Modal open | 300ms | cubic-bezier(0.16, 1, 0.3, 1) | | Page transition | 400ms | cubic-bezier(0.16, 1, 0.3, 1) | | Stagger delay | 60ms per item | — | | Reduced motion | 0.01ms | — |

Shadow Scale

Level	Value
Subtle	INLINECODE82
Card

0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.10) | | Modal | 0 4px 8px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.14) | | Colored | 0 8px 24px rgba(PRIMARY_RGB, 0.25) |

Responsive Breakpoints (Mobile First)

Breakpoint	Width	Layout
default	375px	Single column
sm

640px | 2-col options | | md | 768px | Side-by-side | | lg | 1024px | Full multi-col | | xl | 1280px | Max-width constrained |

---

Design Principles — The Foundation

These principles govern every decision made with this skill:

1. 1. Discovery before design. Never assume. Ask first, build second.
2. Commit fully. A half-executed aesthetic is worse than any aesthetic. Pick a direction and own it.
3. The interface serves the workflow. This is inside a MindStudio AI agent. Function is as important as form.
4. Unforgettable over safe. Generic is forgettable. Make one bold choice and everything else will follow.
5. Accessibility is baseline. No interface ships without passing contrast, label, and keyboard checks.
6. Performance is a feature. Fast interfaces feel better. Eliminate waterfalls, control bundle size.
7. Details compound. The difference between good and great is 20 small decisions made correctly.
8. One question at a time. Never overwhelm users during discovery. Slow down to go faster.
9. YAGNI ruthlessly. Every feature that doesn't serve the stated need is a liability.
10. Measure twice, build once. Present the design plan before coding. Validate before implementing.