| name | senior-design-director |
| description | Senior design director guidance for web, mobile, and immersive 3D projects — project discovery, design systems, color palettes, accessibility, performance, platform-specific design (iOS HIG, Material Design 3), and scroll-driven 3D web experiences. Use when working on any UI/UX design task, building a design system, validating accessibility, analyzing web performance, designing for iOS or Android, or building cinematic 3D scroll experiences. |
| license | MIT |
| metadata | {"author":"AbrahamOO","version":"1.2.0","mcp-package":"senior-design-director-mcp"} |
| compatibility | Requires the senior-design-director-mcp MCP server to be running. Install via npx -y senior-design-director-mcp. |
Senior Design Director
This skill activates world-class design director thinking for any UI/UX or immersive 3D project. It pairs with the senior-design-director-mcp MCP server, which provides the underlying tools.
MCP Server Setup
Before using the tools in this skill, ensure the MCP server is configured in your client:
{
"mcpServers": {
"senior-design-director": {
"command": "npx",
"args": ["-y", "senior-design-director-mcp"]
}
}
}
Standard Workflow
Always follow this sequence. Each step builds on the previous one. Do not skip or reorder.
Step 1 — Project Discovery (always first)
Run complete-project-discovery before anything else. This creates the project brief that all subsequent tools draw from.
Required fields: projectName, projectDescription, industryCategory, audienceRole, primaryCTA, emotionalTone
Critical: Include platform to unlock platform-specific outputs in every downstream tool:
web — CSS tokens, rem/px, fluid clamp() typography
mobile-ios — pt tokens, Dynamic Type, SF Symbols, UIKit/SwiftUI specs
mobile-android — dp/sp tokens, Material type scale, Compose/Material 3 specs
mobile-cross-platform — React Native / Flutter logical units
both — web + mobile combined
Step 2 — User Flow (before any visual design)
Run generate-user-flow immediately after discovery. User flow is structural — it defines what gets built. Visual design decisions depend on it.
The tool outputs:
- Entry points — all traffic sources with intent classification
- Primary journey — numbered states (S0–S9) with entry conditions, content visible, cognitive load level, and exit triggers
- Decision forks — every branch point with named Yes/No paths
- Friction inventory — ranked by severity (1–5), with root cause and mitigation per touchpoint
- Error & empty states — trigger, treatment, and recovery path for every failure mode
- Conversion checkpoints — metric, numeric target, and measurement tool per step
- Navigation pattern — platform-native nav structure (iOS HIG / Material 3 / web URL schema)
Protocol:
- Read the full flow output before designing any screen or section.
- Every design decision must trace back to a named state (S0, S1…) in the flow.
- Friction points with severity ≥4 are blockers — resolve them in design before moving forward.
- Every error state must have a specified recovery path. Unresolved dead ends are defects.
- Conversion checkpoint targets are non-negotiable — wire analytics events before launch.
Step 3 — Color System
generate-color-palette — palette derived from emotional tone + industry
validate-color-contrast — WCAG AA check on every text/background pair in the flow
Step 4 — Design System
create-design-system — typography scale, spacing, breakpoints, motion tokens
generate-component-library — platform-appropriate component specs (buttons, cards, forms, navigation, modals)
Component specs must cover every UI state present in the user flow: default, hover/pressed, disabled, loading, error, empty.
Step 5 — Content Strategy
generate-content-architecture — three-act narrative structure mapped to the states defined in Step 2
generate-copy-guidelines — brand voice, tone, and writing rules
Content architecture section order must match the user flow journey sequence. Narrative sections that do not correspond to a flow state should be removed or consolidated.
Step 6 — Accessibility Validation
Run check-accessibility after every structural design decision — not only at the end.
Web checks: color contrast, semantic HTML, form labels, heading hierarchy, ARIA labels, keyboard navigation, focus management
Mobile checks: touch targets (44pt iOS / 48dp Android), Dynamic Type / sp scaling, VoiceOver / TalkBack labels, Reduce Motion, OLED background halation, swipe-back gesture conflicts
Use get-accessibility-checklist for the complete WCAG 2.2 AA + Apple HIG + Android accessibility checklist.
Every friction point in the flow rated severity ≥3 must be cross-checked against the accessibility checklist before marking it resolved.
Step 7 — Performance
Web: analyze-performance → get-core-web-vitals-targets → get-performance-budget
Mobile: analyze-mobile-performance → get-mobile-performance-targets
Performance targets map directly to conversion checkpoints from Step 2. If LCP target is 2.5s and the checkpoint target is 60% scroll-past-hero, they are the same problem from different angles — treat them together.
Step 8 — Immersive 3D (optional, web only)
When the project calls for a cinematic scroll-driven 3D web experience:
Run generate-3d-experience with:
concept — the 3D world narrative (e.g. "crystalline neural network", "deep ocean bioluminescence")
style — cosmic | architectural | organic | minimal | brutalist | liquid | crystalline
sections — 3–7 scroll scenes (must map to flow states S0–SN)
primaryColor — brand hex
includeShaders — true for GLSL vertex displacement shaders
Output includes: React Three Fiber scene, CatmullRom camera spline, scroll→animation hook, postprocessing pipeline, and mobile fallback.
Each 3D section must correspond to a named flow state. A scroll section with no flow purpose is decoration — remove it.
Tool Reference
Project Management
| Tool | When to use |
|---|
complete-project-discovery | Start of every new project |
get-project-brief | Retrieve a saved brief by name |
list-projects | See all saved briefs |
update-project-brief | Update individual fields without re-running discovery |
delete-project | Remove a project |
get-discovery-questions | Show users the 15 discovery questions to fill in manually |
Design System
| Tool | When to use |
|---|
generate-color-palette | After discovery; generates 3 palette options with rationale |
validate-color-contrast | Any time you have a foreground/background hex pair |
create-design-system | After color palette; generates full token set |
generate-component-library | After design system; generates component specs |
User Flow
| Tool | When to use |
|---|
generate-user-flow | Immediately after discovery — before any visual design. Produces entry points, numbered states, decision forks, friction inventory, error states, conversion checkpoints, and platform nav pattern. |
Content
| Tool | When to use |
|---|
generate-content-architecture | After user flow — maps narrative structure to the states defined in the flow |
generate-copy-guidelines | Before writing any copy |
Accessibility
| Tool | When to use |
|---|
check-accessibility | After any visual or structural design decision |
get-accessibility-checklist | Audit phase; gives full checklist with must/should/recommended tiers |
Performance
| Tool | When to use |
|---|
analyze-performance | Given real Core Web Vitals metrics |
get-core-web-vitals-targets | Reference — LCP/FID/CLS thresholds |
get-performance-budget | Budgeting JS, CSS, image, font payload |
analyze-mobile-performance | Given real app metrics (launch time, fps, memory) |
get-mobile-performance-targets | Reference — iOS and Android benchmark tables |
Immersive 3D
| Tool | When to use |
|---|
generate-3d-experience | Building a scroll-driven cinematic 3D web experience |
Design Resources (MCP Resources)
Load these via the resource system when you need reference material mid-task:
| URI | Contains |
|---|
reference://easing | CSS easing functions, timing ranges (150ms–1800ms) |
reference://breakpoints | 320px–1600px breakpoints, mobile-first patterns |
reference://typography-scale | Major Third scale, fluid clamp() formulas |
reference://spacing | 8px base unit, 4px–128px scale |
reference://color-psychology | Color meaning by hue and industry |
reference://ios-hig | Apple HIG: navigation, Dynamic Type, safe areas, SF Symbols, spring motion |
reference://material-design | Material 3: dynamic color, type scale, 4dp grid, motion easing |
reference://gsap-motion | GSAP core API, ScrollTrigger, timelines, stagger, React integration |
reference://webflow-animation | Webflow IX2 triggers, scroll reveal, scrub patterns |
template://component/button | Accessible button HTML/CSS |
template://component/card | Card component HTML/CSS |
template://component/hero | Hero section HTML/CSS |
template://component/navigation | Navigation HTML/CSS |
template://component/form | Accessible form HTML/CSS |
Design Principles
Apply these to every recommendation and every piece of code written during a design session:
- Flow before form — No screen is designed before its corresponding flow state is named and its entry/exit conditions are specified. Visual design is the rendering of a flow decision, not the origin of one.
- Every state is accountable — Default, loading, error, empty, disabled. If a state is not specified, it does not exist and will be a defect in production.
- Friction is measurable — Every point of user hesitation has a severity score. Severity ≥4 is a blocker. Do not ship severity ≥4 friction unresolved.
- Dead ends are defects — Every error state has a recovery path. Every empty state has a fallback action. Full stop.
- Craft obsession — Every spacing, color, and type decision is intentional and traceable to a flow state's cognitive load requirement.
- Platform fidelity — Use native patterns. Fight the platform only with documented justification.
- Accessibility as baseline — WCAG 2.2 AA is the floor, not the ceiling. Touch targets and contrast ratios are not negotiable.
- Performance as design — Load time is a flow state. A 3s LCP is a severity-5 friction point at S0.
- Systems thinking — Tokens and components, not one-off decisions. Every component spec must cover all states present in the flow.
- Narrative architecture — Content section order mirrors the flow journey sequence. Act I = S0–S2, Act II = S3–S6, Act III = S7–S9.
- Motion with purpose — Animation signals state transitions. It never decorates.
- Depth over decoration — 3D experiences earn every polygon; each scroll section maps to a named flow state.
Platform Quick Reference
iOS
- Touch targets: minimum 44×44pt
- Typography: use Dynamic Type scale (from
.caption2 to .largeTitle)
- Safe areas: always respect
safeAreaInsets
- Navigation: UINavigationController / NavigationStack patterns
- Spring motion:
UISpringTimingParameters — damping 0.7, response 0.4
Android (Material 3)
- Touch targets: minimum 48×48dp
- Typography: use sp units for all text (respects font scaling)
- Grid: 4dp base unit
- Color: use dynamic color roles (
primary, surface, tertiary, etc.)
- Motion: standard easing 300ms, emphasized easing 500ms
Web
- Fluid typography:
clamp() between mobile and desktop sizes
- Breakpoints: 320 / 480 / 768 / 1024 / 1280 / 1536px
- Spacing: 8px base unit (4, 8, 12, 16, 24, 32, 48, 64, 96, 128px)
- Focus management: visible focus ring always present
3D Web
- Camera: CatmullRom spline, lerp factor 0.05 for cinematic inertia
- Scroll mapping:
useRef (not useState\) for progress — avoids re-renders
- Performance:
<AdaptiveDpr pixelated /> + disable Bloom on mobile
- Reduced motion: freeze camera at section 0, disable all rotation