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 | topic |
| 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:
// 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:
/**
* 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:
- Aesthetic direction and rationale
- Component structure and layout
- Data flow and state management
- Interaction patterns and animations
- 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.75line-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.
: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:
| 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:
: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:
| Export | Type | Purpose |
|---|
submit(values) | function | Sends form data to the workflow and advances to the next block |
uploadFile(file) | 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:
import { submit, useIsRunning } from './bridge'
Never use:
// 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
// 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:
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:
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:
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):
@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:
@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:
/* 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)
.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:
/* 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:
/* 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
// 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:
// 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
| 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
// 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:
// 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)
// 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
// 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
// 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'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.
/* 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
/* 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:
┌─────────────────────────────────┐
│ Header / Title │
│ Subtitle / Context │
├─────────────────────────────────┤
│ Input Field 1 │
│ Input Field 2 │
│ Input Field 3 │
├─────────────────────────────────┤
│ [Submit CTA] │
└─────────────────────────────────┘
Multi-step wizard:
┌─────────────────────────────────┐
│ ●──○──○──○ Step 1 of 4 │
├─────────────────────────────────┤
│ Step Title │
│ Step Description │
│ │
│ [Step-specific content] │
├─────────────────────────────────┤
│ [Back] [Next →] │
└─────────────────────────────────┘
Dashboard / data display:
┌──────────┬──────────┬──────────┐
│ 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
Interaction
Layout & Responsive
Accessibility
Light/Dark Mode (if applicable)
React Performance
MindStudio Compatibility
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 | 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08) |
| 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:
- Discovery before design. Never assume. Ask first, build second.
- Commit fully. A half-executed aesthetic is worse than any aesthetic. Pick a direction and own it.
- The interface serves the workflow. This is inside a MindStudio AI agent. Function is as important as form.
- Unforgettable over safe. Generic is forgettable. Make one bold choice and everything else will follow.
- Accessibility is baseline. No interface ships without passing contrast, label, and keyboard checks.
- Performance is a feature. Fast interfaces feel better. Eliminate waterfalls, control bundle size.
- Details compound. The difference between good and great is 20 small decisions made correctly.
- One question at a time. Never overwhelm users during discovery. Slow down to go faster.
- YAGNI ruthlessly. Every feature that doesn't serve the stated need is a liability.
- Measure twice, build once. Present the design plan before coding. Validate before implementing.
