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:
| Command | Use when | |---------|----------| | /design <task> | Full design workflow with team assembly | | /design-review <file or screenshot> | Audit an existing design — accepts HTML files, Figma URLs, screenshots (visual AI critique), or preview servers | | /design-system | Generate or extract design tokens | | /figma <URL> | Convert a Figma design to production code | | /figma-create <task> | Create designs directly in Figma (pages, components, styles) | | /ux-audit <brief> | Audit a Figma file against a design brief | | /design-handoff | Generate developer handoff docs (tokens, specs, component APIs) | | /figma-responsive | Generate mobile/tablet variants from a desktop Figma frame | | /figma-sync | Detect drift between Figma designs and code implementation | | /design-present | Generate an HTML presentation from Figma screens | | /brand-kit | Generate a complete brand kit from colors and mood | | /component-docs | Auto-generate component documentation from Figma | | /figma-prototype | Create interactive prototype connections in Figma | | /site-to-figma | Capture a live website and recreate in Figma | | /ab-variants | Generate A/B test design variants from a Figma screen | | /design-sprint | Guided 5-phase design sprint methodology | | /social-content <task> | Design social media visual content (posts, stories, reels, carousels) | | /social-campaign <brief> | Plan a social media campaign with strategy, calendar, and captions | | /social-analytics <type> | Build social analytics dashboards, reports, or A/B test frameworks | | /design-framework <fw> [file] | Convert HTML design output to React, Vue, Svelte, Next.js, or Astro components | | /email-template <type> for <brand> | Generate a production-ready HTML email template (inline styles, table layout, responsive) | | /email-campaign <type> for <product> | Plan and build a complete multi-email campaign sequence | | /email-audit <email or HTML> | Full-spectrum audit — technical rendering issues (Phase 1) and copy/strategy critique (Phase 2) | | /design-template <category> | Production-ready web template from gallery: landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, onboarding | | /chart-design <description> | Design a chart or data visualization — selects chart type, applies accessible color palettes, outputs HTML/CSS/JS | | /dashboard-layout <description> | Build a complete dashboard layout — KPI cards, charts, filter bar, data table, sidebar, responsive | | /data-viz-audit <chart or description> | Audit a chart for type selection, accessible palette, annotations, and anti-patterns. Conditional Phase 2 audits dashboard layout fit | | /design-tutorial [track] | Interactive guided tour — quick-start, ui, figma, social, email, data-viz, or full (30 min complete tour) | | /figma-component-library <description> | Generate a complete Figma component library — atoms, molecules, organisms with variants, auto layout, component properties | | /pdf-report <subject> for <brand> | Generate a multi-page print-ready report layout with named pages, running headers/footers, typography system, and CSS @page output | | /print-layout <artifact> for <brand> | Design a single print artifact (business card, certificate, brochure, invoice) with bleed, safe zone, CMYK color documentation, and print-ready HTML/CSS | | /print-audit <layout or description> | Audit a print layout for bleed, safe zone, CMYK color mode, font embedding, and page break rules. Conditional Phase 2 reviews brand consistency | | /lint-design [nodeId] | Scan a Figma file for design quality issues — orphan colors, spacing violations, non-standard type sizes, missing auto-layout, detached styles | | /design-critique [nodeId] | UX heuristic review of Figma screens against Nielsen's 10 heuristics + visual design audit | | /design-score | Quantitative 0–100 design quality score across Accessibility, Usability, Visual Quality, and Token Compliance | [url | file | --screenshot <path>] | | /design-qa <file> | Visual QA on an HTML/CSS implementation — responsive breakpoints, token compliance, interactive states, motion quality | | /accessibility-audit <file> | Full WCAG AA audit — contrast ratios, keyboard navigation, semantic HTML, ARIA, touch targets | | Memory & Pipelines | | | /naksha-init | Set up project memory — stores brand colors, font, framework, token format in .naksha/project.json | | /naksha-status | Display current project context and last 10 design decisions from .naksha/memory.md | | /naksha-doctor | Run all naksha quality checks and report the plugin's health status — structural validation, metadata consistency, behavioral smoke, legacy branding guard | | /naksha-help | Quick-reference for all commands — browse by category or look up a specific command | | /pipeline <action> | Run a multi-step design pipeline: run <name>, list available pipelines, show <name> to preview steps | | Vision & Intelligence | | | /design-compare <url1> <url2> | Capture two live sites via Playwright, side-by-side design analysis: layout, type, color, UX patterns | | /competitive-audit <url> | Capture a competitor site, extract design system patterns, output rated "Steal This" recommendations | | Conversational UI Wing | | | /design-chatbot [type] [platform] [brief] | Design chatbot/assistant UI: dialog flows, bubble spec, quick replies, error states, accessibility | | /design-voice-ui [type] [platform] [screen] | Design voice interface: wake word flows, confirmation patterns, earcon spec, hybrid screen layout | | Spatial & AR Wing | | | /design-spatial [app-type] [platform] [brief] | Design spatial computing UI for visionOS/WebXR: window selection, depth hierarchy, ornaments, typography | | /design-ar-overlay [use-case] [platform] | Design AR overlay: anchor strategy, world tracking states, instruction cards, confirmation overlays | | Compliance Wing | | | /design-gdpr [product] [jurisdiction] [categories] | Design GDPR/CCPA consent flows: cookie banners, privacy control center, data deletion request UI | | /design-compliance --regulation <hipaa\|pci\|ada> | Audit or generate regulation-specific UI: HIPAA PHI fields, PCI payment forms, ADA accessibility specs |
The Team
Leadership
| Role | Responsibility | Reference | |------|---------------|-----------| | Design Manager | Analyzes the task, assembles the team, orchestrates workflow, ensures delivery | This file (SKILL.md) | | Creative Director | Sets the visual and conceptual vision, defines the mood, tone, and creative direction | This file (below) |
Core Makers
| Role | Expertise | When to activate | Reference | |------|-----------|-----------------|-----------| | Product Designer | End-to-end UX, business impact, feature scoping, user outcomes | Full product features, business-facing design, end-to-end flows | references/product-designer.md | | UX Designer | User journeys, wireframes, information architecture, prototypes | Complex flows, multi-step processes, navigation, user-task analysis | references/ux-designer.md | | UI Designer | Visual aesthetics, typography, color, layout, interactive elements | Any task that needs to look polished — almost every visual task | references/ui-designer.md | | UX Researcher | User behavior insights, usability heuristics, accessibility audit | When assumptions about users need validation, or accessibility matters | references/ux-researcher.md | | Content Designer | Interface text, microcopy, UX writing, tone of voic