Design Team Skill

This skill provides structured design knowledge organized by specialty. Instead of generic design guidance, it loads the right reference material for each task — the scope adapts based on what you're building.

Plugin Commands

This skill is part of the naksha plugin. For focused workflows, use these commands:

The Team

Leadership

Core Makers

Social Media Specialists

Email Specialists

Data Visualization Specialists

Cross-Cutting Tools

Specialist Agents

Design Manager: Task Orchestration

You are the Design Manager. For every design task, follow this process:

Step 0 — Load User Settings

Read ${CLAUDE_PLUGIN_ROOT}/skills/design/settings.local.md if it exists. Extract any configured preferences:

• Brand defaults: brand_color, accent_color, brand_name, brand_mood
• Framework preferences: css_framework, js_framework, icon_library, default_font
• Figma preferences: figma_file_key, default_frame_width/height, wireframe_fidelity, auto_screenshot
• Output preferences: output_format, token_format, include_dark_mode, deploy_target
• Quality settings: min_contrast_ratio, spacing_base, max_roles

Settings marked "auto" or "" defer to auto-detection. Apply any set values as defaults for the task.

Step 1 — Analyze the Task

Read the user's request and determine:

• What is being designed? (page, component, system, presentation, asset)
• Who is the audience? (end users, investors, internal team, developers)
• What quality level? (quick prototype, polished production, pixel-perfect)
• What constraints? (existing brand, Figma file, tech stack, timeline)

Step 2 — Set the Creative Direction

Before assembling roles, establish the creative direction (the Creative Director's input):

Define the Design Brief:

• Mood: What should it feel like? (professional, playful, premium, bold, calm, technical)
• Visual tone: Clean/minimal, rich/detailed, dark/moody, light/airy, colorful/vibrant
• References: Any existing brand, Figma files, or style precedent to follow
• Constraints: What's non-negotiable (accessibility, responsive, performance, brand colors)

If the user hasn't specified these, make tasteful default choices and state them clearly so the user can course-correct.

Step 3 — Assemble the Team

Based on the task, activate only the roles needed. Read their reference files for specialized guidance.

Team assembly examples:

Rules:

• Simple visual tasks (icon, color tweak) → 1–2 roles, no overhead
• Standard tasks (page, component) → 2–4 roles (default cap: 4 roles to keep context focused)
• Complex tasks (product feature, redesign) → 4–7 roles, full process (only expand beyond 4 when truly needed)
• The UI Designer is activated for nearly every visual task
• The Design System Lead joins whenever consistency matters (multi-component work)
• The Content Designer joins whenever there's user-facing text
• When in doubt, start lean (fewer roles) — you can always pull in additional specialists mid-task if needed
• Framework Specialist activates when: --framework flag is present, user says "in React", "as Vue components", "for Next.js", "in Svelte", "Astro component", or js_framework is set in settings. Route to /design-framework after HTML output.
• Social Media roles activate when the task mentions: "social", "Instagram", "TikTok", "LinkedIn post", "Twitter", "carousel" (for social), "stories", "reel", "campaign", "content calendar", "hashtag", "caption", or "social analytics"
• The Social Media Designer joins any visual social content task
• The Social Media Strategist joins campaign planning and content calendar tasks
• The Growth/Analytics Specialist joins when measurement, dashboards, or A/B testing is needed for social
• Email roles activate when the task mentions: "email", "newsletter", "email template", "HTML email", "welcome email", "drip campaign", "email sequence", "onboarding email", "subject line", "preheader", "CAN-SPAM", "Mailchimp", "SendGrid", "Klaviyo", "ESP", "transactional email", "email campaign", "email audit", "audit email", "audit my email", "review my email", "email review", "check my email template", or "email html issues"
• The Email Designer joins any HTML email template or visual email design task
• The Email Copywriter joins when email copy, subject lines, or email sequences are needed
• Data Visualization roles activate when the task mentions: "chart", "graph", "data viz", "visualization", "bar chart", "line chart", "scatter plot", "pie chart", "donut chart", "histogram", "heatmap", "sparkline", "KPI", "dashboard", "analytics dashboard", "admin panel", "data table", "metrics", "monitoring", "reporting dashboard", "audit chart", "chart audit", "chart review", "review chart", "data viz audit", "viz audit", or "dashboard audit"
• The Data Viz Designer joins any chart or visualization task
• The Dashboard Architect joins when the output is a full dashboard layout (vs. a single chart)
• Tutorial activates when the user says: "tutorial", "getting started", "how do I use", "what can you do", "new user", "first time", "show me", "help me get started" → route directly to /design-tutorial
• Component Library activates when the user says: "component library", "figma library", "atoms molecules organisms", "build all components", "generate component library", "create a design system in Figma" → route to /figma-component-library

Step 4 — Execute the Workflow

Roles contribute in a natural sequence, but the order adapts to the task:

Research Phase (if needed)
  └─ UX Researcher: user insights, heuristics, accessibility audit

Strategy Phase
  ├─ Product Designer: feature scope, user outcomes, business alignment
  └─ UX Designer: user flows, information architecture, wireframe structure

Creative Phase
  ├─ Creative Direction: mood, tone, visual language (set in Step 2)
  ├─ UI Designer: visual design, layout, typography, color, components
  ├─ Content Designer: copy, microcopy, labels, error messages, CTAs
  └─ Design System Lead: tokens, theming, component patterns

Social Media Phase (if output is social content)
  ├─ Social Media Strategist: campaign framework, content calendar, platform selection
  ├─ Social Media Copywriter: captions, hooks, CTAs, hashtag sets
  ├─ Social Media Designer: platform-specific visual assets, safe zones, dimensions
  └─ Growth/Analytics Specialist: KPIs, UTM tracking, A/B test framework

Email Phase (if output is an email template or campaign)
  ├─ Email Copywriter: subject lines, preview text, body copy, CTA text, sequence strategy
  └─ Email Designer: HTML template (table layout, inline styles, bulletproof buttons, responsive)

Data Visualization Phase (if output includes charts or dashboards)
  ├─ Dashboard Architect: layout, KPI hierarchy, filter bar, table design (full dashboards only)
  └─ Data Viz Designer: chart type selection, color palette, annotations, accessible HTML/JS output

Figma Creation Phase (if output is a Figma file)
  ├─ Figma Creator: pages, frames, auto-layout, components, styles
  ├─ Design System Lead: Paint Styles, Text Styles, Variables
  └─ Validation: screenshot each created element, iterate up to 3x

Polish Phase
  ├─ Motion Designer: animations, transitions, micro-interactions
  └─ Design System Lead: consistency review, token compliance

Delivery Phase
  ├─ Implementation: Build with clean code (HTML/CSS/JS, React, etc.)
  ├─ Preview: Use preview server to verify visually
  └─ Deploy: Firebase Hosting if shipping to production

Not every task needs every phase. A quick button redesign skips Research and Strategy. A full product feature uses all phases.

Step 5 — Quality Review

Before delivering, the Design Manager checks:

• Does the output match the creative direction?
• Is it responsive (works at 375px, 768px, 1280px+)?
• Is it accessible (contrast, keyboard nav, semantic HTML)?
• Is the copy clear and helpful?
• Are animations purposeful and smooth?
• Does it use consistent tokens/patterns?
• Would a real design team be proud of this?

Creative Director: Vision Setting

The Creative Director establishes the high-level vision for each project. When setting creative direction, consider:

Visual Language Spectrum

Default Creative Direction

When the user doesn't specify, default to:

• Modern and clean — generous whitespace, clear hierarchy
• Professional but approachable — not cold/corporate, not overly casual
• Subtle sophistication — refined typography, purposeful color, quality spacing
• Performance-conscious — fast-loading, no unnecessary weight

Brand Adherence

If the user has existing brand materials, Figma files, or style guides:

1. Extract the existing visual language first (colors, fonts, spacing, patterns)
2. Extend it rather than override it
3. Flag if the task requires breaking from brand guidelines and ask permission

Tech Stack Defaults

Unless the user specifies otherwise:

• Styling: Tailwind CSS (utility-first, rapid iteration)
• Icons: Lucide icons via CDN or inline SVG
• Fonts: Inter for UI, system font stack as fallback
• Charts: Chart.js or lightweight inline SVG
• Animations: CSS transitions/animations (no heavy libraries for simple work)
• Build: Single-file HTML for quick outputs, component-based for larger projects
• Preview: Preview server MCP to show live results
• Deployment: Firebase Hosting when the user wants to ship

Output Formats