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:

FieldSuggested VariableRaw idea / topictopicTone of voicetonePost lengthpost_lengthKeywordskeywordsContent formatcontent_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:

tsx

// State keys match MindStudio variable names exactly
const [formData, setFormData] = useState({
  topic: '',
  tone: '',
  keywords: '',
  content_type: [],
})

// On submit — pass all variables to the MindStudio workflow
const handleSubmit = () => {
  // Each key in formData corresponds to a named MindStudio variable
  // that downstream blocks in the workflow can reference
  onSubmit(formData)
}

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:

tsx

/**
 * MindStudio Variables Output:
 * - topic         (string)  — the user's research topic or idea
 * - tone          (string)  — selected tone of voice
 * - keywords      (string)  — comma-separated keywords
 * - content_type  (array)   — selected content formats
 */

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. 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):

ArchetypeCharacterBest ForRefined MinimalSurgical whitespace, one accent color, perfect typeSaaS, B2B, professional toolsLuxury EditorialSerif display, high contrast, generous marginsPortfolios, premium services, creative agenciesDark TechnicalDeep backgrounds, monospace accents, neon highlightsDeveloper tools, AI products, fintechWarm & ApproachableRounded corners, soft palette, friendly typeConsumer apps, health, educationBold BrutalistRaw grid, oversized type, stark contrastFashion, art, provocative brandsGlassmorphicFrosted panels, layered depth, soft blursModern SaaS, dashboards, overlaysBento GridCard-based density, varied sizes, organized chaosDashboards, feature showcasesRetro-FuturisticScan lines, phosphor glow, monospaceAI tools, tech demos, niche productsClaymorphicInflated shapes, pastel 3D, playful shadowsConsumer apps, games, children's toolsOrganic/NaturalEarth tones, texture, flowing curvesWellness, 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:

ArchetypeDisplayBodyLuxury EditorialPlayfair Display, Cormorant GaramondLora, EB GaramondBold BrutalistAnton, Bebas NeueIBM Plex Mono, Space MonoDark TechnicalSyne, OxaniumJetBrains Mono, Fira CodeWarm ApproachableNunito, QuicksandSource Sans Pro, DM SansRefined MinimalFraunces, Libre BaskervilleFigtree, Plus Jakarta SansGlassmorphicOutfit, SyneManrope, DM Sans

Rules:

• line-height for body: 1.5-1.75
• line-length 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.

css

:root {
  /* Brand */
  --color-primary: /* your dominant brand color */;
  --color-primary-hover: /* 10% darker */;
  --color-accent: /* high-contrast complement */;

  /* Surface */
  --color-bg: /* page background */;
  --color-surface: /* card/panel background */;
  --color-surface-elevated: /* modal/popover */;
  --color-border: /* subtle border */;
  --color-border-strong: /* emphasis border */;

  /* Text */
  --color-text-primary: /* high contrast body */;
  --color-text-secondary: /* muted labels */;
  --color-text-disabled: /* placeholder/inactive */;

  /* Semantic */
  --color-success: ;
  --color-warning: ;
  --color-error: ;
  --color-info: ;
}

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:

ProductPrimary Palette DirectionSaaS / B2BCool slate, indigo, neutral with blue accentE-commerceHigh contrast black/white, product-driven accentHealthcareCalm blue-green, white, soft sageFintechDeep navy, gold accent, crisp whiteBeauty / WellnessRose, champagne, dusty sage, warm creamCreative AgencyMonochrome base, electric accentEducationWarm amber, forest green, creamGaming / EntertainmentDark 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:

css

:root {
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 20;
  --z-sticky: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-tooltip: 70;
}

---

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:

ExportTypePurposesubmit(values)functionSends form data to the workflow and advances to the next blockuploadFile(file)functionUploads a file and returns a CDN URLrequestFile(options?)functionPrompts the user to pick a file or media from their libraryuseIsRunning()hookReturns true while the workflow is processing after submissionuseTemplateVariables()hookReturns current values of variables already set in the workflow

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

tsx

import { submit, useIsRunning } from './bridge'

Never use:

tsx

// WRONG — will not advance the workflow
window.MindStudio.submit(data)
// WRONG — manual status state does not reflect actual workflow state
const [status, setStatus] = useState('idle')
setTimeout(() => setStatus('loading'), 0)

Component Structure Pattern#

tsx

// Recommended file structure for a MindStudio interface component

// 1. Imports — always include bridge
import { useState, useCallback } from 'react'
import { submit, useIsRunning } from './bridge'

/**
 * MindStudio Variables Output:
 * - variable_one  (string) — description
 * - variable_two  (string) — description
 */

// 2. Types / interfaces
interface FormData {
  variable_one: string
  variable_two: string
}

// 3. Sub-components (keep small, focused)
const StepIndicator = ({ current, total }) => { ... }
const InputField = ({ label, ...props }) => { ... }

// 4. Main component
export default function Interface() {
  // Bridge hook — reflects actual workflow processing state
  const isRunning = useIsRunning()

  // State — keys must match confirmed MindStudio variable names
  const [data, setData] = useState<FormData>({
    variable_one: '',
    variable_two: '',
  })

  // Submit handler — always use submit() from bridge
  const handleSubmit = useCallback(() => {
    submit(data) // advances workflow to next block
  }, [data])

  // Render
  return (
    <div className="...">
      {/* interface content */}
      <button
        onClick={handleSubmit}
        disabled={isRunning}
      >
        {isRunning ? 'Processing...' : 'Submit'}
      </button>
    </div>
  )
}

State Management Patterns#

Multi-step forms:

tsx

const [step, setStep] = useState(0)
const steps = ['Info', 'Preferences', 'Review']
// Always validate before advancing steps
const canAdvance = () => validateStep(step, data)
// Only call submit() from bridge on the final step

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

tsx

const isRunning = useIsRunning() // from './bridge'

// Correct — reflects actual workflow state
<button disabled={isRunning} onClick={handleSubmit}>
  {isRunning ? 'Processing...' : 'Submit'}
</button>

// WRONG — manual setTimeout does not reflect workflow state
const [loading, setLoading] = useState(false)
setLoading(true)
setTimeout(() => setLoading(false), 2000)

Form validation:

tsx

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):

css

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered reveals */
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 60ms; }
.card:nth-child(3) { animation-delay: 120ms; }

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, margin
• Use will-change: transform sparingly, only on elements that definitely animate
• Always include prefers-reduced-motion override:

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Backgrounds & Depth#

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

css

/* Gradient mesh */
background: radial-gradient(at 20% 20%, hsl(220 80% 60% / 0.3) 0px, transparent 60%),
            radial-gradient(at 80% 80%, hsl(280 70% 50% / 0.2) 0px, transparent 60%),
            hsl(220 20% 8%);

/* Noise overlay */
background-image: url("data:image/svg+xml,..."); /* SVG noise */
background-blend-mode: overlay;
opacity: 0.04;

/* Grain effect with pseudo-element */
.surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/noise.png');
  opacity: 0.03;
  pointer-events: none;
}

Glassmorphism (when appropriate)#

css

.glass-card {
  background: rgba(255, 255, 255, 0.08);  /* dark mode */
  /* OR */
  background: rgba(255, 255, 255, 0.80);  /* light mode — never go below 0.6 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

Shadows#

Use layered shadows for realism:

css

/* 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:

css

/* All clickable elements */
cursor: pointer;
transition: all 150ms ease-out;

/* Hover: always provide visual feedback */
&:hover {
  /* At minimum: one of these — color change, shadow, border, scale */
  background-color: var(--color-primary-hover);
}

/* Active/pressed */
&:active {
  transform: scale(0.98); /* subtle, not jarring */
}

/* Focus (keyboard navigation) */
&:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

Touch target sizes:

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

Form Inputs#

tsx

// Every input needs: label, placeholder, error state, disabled state
<div className="field">
  <label htmlFor={id} className="field-label">{label}</label>
  <input
    id={id}
    aria-describedby={error ? `${id}-error` : undefined}
    aria-invalid={!!error}
    className={`field-input ${error ? 'field-input--error' : ''}`}
    {...props}
  />
  {error && (
    <p id={`${id}-error`} role="alert" className="field-error">{error}</p>
  )}
</div>

Loading States#

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

tsx

// Button loading state
<button disabled={isLoading} onClick={handleSubmit}>
  {isLoading ? (
    <span className="flex items-center gap-2">
      <Spinner size={16} /> Processing...
    </span>
  ) : 'Submit'}
</button>

// Content loading — skeleton screens preferred over spinners for layout areas
<div className="skeleton" style={{ width: '100%', height: 48, borderRadius: 8 }} />

Hover States — Common Rules#

SituationDoDon'tCard hoverColor shift or shadow elevationScale transform that shifts layoutButton hoverDarken background 10%, slight shadowNo visual changeLink hoverColor + underlineOnly underline (too subtle)Icon buttonBackground fill on hoverNothingDestructive actionRed tint on hoverSame 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#

tsx

// Form controls — always associated labels
<label htmlFor="email">Email address</label>
<input id="email" type="email" />

// Icon-only buttons — always labeled
<button aria-label="Close dialog">
  <XIcon size={20} aria-hidden="true" />
</button>

// Status messages — announced to screen readers
<div role="status" aria-live="polite">{statusMessage}</div>
<div role="alert" aria-live="assertive">{errorMessage}</div>

// Images — always alt text
<img src="..." alt="Descriptive text about the image" />
// Decorative images
<img src="..." alt="" aria-hidden="true" />

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:

tsx

// WRONG — sequential, creates waterfall
const user = await fetchUser()
const posts = await fetchPosts(user.id)
const comments = await fetchComments()

// RIGHT — parallel where possible
const [user, comments] = await Promise.all([fetchUser(), fetchComments()])
const posts = await fetchPosts(user.id) // depends on user, fetched after

Bundle Size (CRITICAL)#

tsx

// WRONG — barrel import loads entire library
import { Check, X, ChevronDown } from 'lucide-react'

// RIGHT — direct import (significant size reduction)
import Check from 'lucide-react/dist/esm/icons/check'
import X from 'lucide-react/dist/esm/icons/x'

// Dynamic import for heavy components
const Chart = dynamic(() => import('./Chart'), { ssr: false })
const HeavyEditor = React.lazy(() => import('./HeavyEditor'))

Re-render Optimization#

tsx

// Memoize expensive components
const ExpensiveList = React.memo(({ items }) => {
  return items.map(item => <ListItem key={item.id} item={item} />)
})

// Stable callbacks
const handleClick = useCallback((id: string) => {
  setSelected(id)
}, []) // empty deps — no external references

// Lazy state initialization for expensive initial values
const [state, setState] = useState(() => computeExpensiveDefault())

// Transitions for non-urgent updates (React 18+)
const [isPending, startTransition] = useTransition()
startTransition(() => setSearchQuery(value))

Rendering Performance#

tsx

// Explicit conditional rendering — no implicit falsy renders
// WRONG — renders "0" when count is 0
{count && <Badge count={count} />}

// RIGHT
{count > 0 && <Badge count={count} />}

// Hoist static JSX outside components
const STATIC_HEADER = <h1 className="page-title">Dashboard</h1>

function Page() {
  return <div>{STATIC_HEADER}<Content /></div>
}

Common Pitfalls#

Don'tDoBarrel importsImport from source files directlySequential awaits for independent dataPromise.all()``items.sort() mutating arrayitems.toSorted()Create RegExp inside renderHoist to module levelHeavy objects created in renderHoist or memoizeLoad analytics in critical pathLazy-load with dynamic()Re-render whole tree for local stateExtract to focused child component

---

Phase 9: Light/Dark Mode — Both Must Work#

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

css

/* Light mode defaults */
:root {
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;  /* slate-600 minimum */
  --color-border: #e2e8f0;          /* gray-200 */
}

/* Dark mode */
[data-theme="dark"], .dark {
  --color-bg: #0a0a0f;
  --color-surface: #13131a;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-border: rgba(255,255,255,0.08);
}

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 border-white/10

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#

css

/* Mobile first */
/* Default: 375px — single column, full width */
/* sm: 640px — slightly wider inputs, 2-col options */
/* md: 768px — side-by-side layouts possible */
/* lg: 1024px — full multi-column layouts */
/* xl: 1280px — maximum content width, generous margins */

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:

text

┌─────────────────────────────────┐
│  Header / Title                 │
│  Subtitle / Context             │
├─────────────────────────────────┤
│  Input Field 1                  │
│  Input Field 2                  │
│  Input Field 3                  │
├─────────────────────────────────┤
│                    [Submit CTA] │
└─────────────────────────────────┘

Multi-step wizard:

text

┌─────────────────────────────────┐
│  ●──○──○──○  Step 1 of 4       │
├─────────────────────────────────┤
│  Step Title                     │
│  Step Description               │
│                                 │
│  [Step-specific content]        │
├─────────────────────────────────┤
│  [Back]              [Next →]   │
└─────────────────────────────────┘

Dashboard / data display:

text

┌──────────┬──────────┬──────────┐
│  Metric  │  Metric  │  Metric  │
├──────────┴──────────┴──────────┤
│                                │
│  Chart / Main Content          │
│                                │
├───────────────┬────────────────┤
│  Table        │  Sidebar Info  │
└───────────────┴────────────────┘

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 cursor: pointer
• 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 aria-label
• 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 aria-live="assertive"

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 Promise.all()
• 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 window.MindStudio.submit
• 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)#

MoodDisplayBodyLuxuryCormorant GaramondLoraEditorialPlayfair DisplaySource Serif 4TechnicalSyneJetBrains MonoApproachableNunitoDM SansMinimalFrauncesFigtreeBoldBebas NeueIBM Plex SansModernOutfitManropeOrganicVollkornNunito Sans

Animation Timing Cheat Sheet#

InteractionDurationEasingHover state150msease-outButton active100mseaseTooltip appear150msease-outModal open300mscubic-bezier(0.16, 1, 0.3, 1)Page transition400mscubic-bezier(0.16, 1, 0.3, 1)Stagger delay60ms per item—Reduced motion0.01ms—

Shadow Scale#

LevelValueSubtle0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08)Card0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.10)Modal0 4px 8px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.14)Colored0 8px 24px rgba(PRIMARY_RGB, 0.25)

Responsive Breakpoints (Mobile First)#

BreakpointWidthLayoutdefault375pxSingle columnsm640px2-col optionsmd768pxSide-by-sidelg1024pxFull multi-colxl1280pxMax-width constrained

---

Design Principles — The Foundation#

These principles govern every decision made with this skill:

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.