naksha-studio — плагин для Claude Code: дизайн и установка

<div align="center">

# naksha

**Your agency's design brain. Always on, always yours.**

*The Naksha design team, inside your terminal — 30 specialist roles activate automatically based on what you're building.*

<br>

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Claude Code](https://img.shields.io/badge/Claude_Code-Plugin-blueviolet)](https://claude.ai/claude-code)
[![Cursor](https://img.shields.io/badge/Cursor-Rules-black)]()
[![Windsurf](https://img.shields.io/badge/Windsurf-Rules-0099ff)]()
[![Gemini CLI](https://img.shields.io/badge/Gemini_CLI-GEMINI.md-4285F4)]()
[![Copilot](https://img.shields.io/badge/Copilot-Instructions-24292e)]()
[![Autohand Code CLI](https://img.shields.io/badge/Autohand_Code_CLI-AGENTS.md-0A84FF)](https://github.com/autohandai/code-cli)
[![Roles](https://img.shields.io/badge/Specialist_Roles-30-orange)]()
[![Commands](https://img.shields.io/badge/Slash_Commands-70-green)]()
[![Design Knowledge](https://img.shields.io/badge/Design_Knowledge-16000%2B_lines-E8633A)]()

[Quick Start](#-quick-start) · [Commands](#-commands) · [The Team](#-the-team) · [How It Works](#-how-it-works) · [Changelog](CHANGELOG.md)

</div>

---

## 🚀 Quick Start

### Claude Code (full plugin — 70 commands, agents, hooks)

**From the marketplace** (Claude Code 2.1.72+) — run inside Claude Code:

```
/plugin marketplace add https://github.com/Adityaraj0421/naksha-studio.git
/plugin install naksha@naksha
```

**Or from a local clone** (best if you want to edit naksha):

```bash
git clone https://github.com/Adityaraj0421/naksha-studio.git
cd naksha-studio && bash install.sh
```

Then restart Claude Code and try:
```
/design Build a landing page for a SaaS analytics product
```

> **✨ New in v6 — Naksha Live:** watch your design team work in a local dashboard (`/naksha-dashboard setup`), get free instant design lint after every edit (`/design-detect`), see what each command costs (`/naksha-stats`), keep your design system in the open DESIGN.md format (`/design-md`), and teach naksha with `/naksha-vote`. Optional, local-only, no telemetry. See the [CHANGELOG](CHANGELOG.md).

> **✨ New in v5.3 — taste memory:** `/design-variants Design a pricing page` builds three genuinely different directions side by side; tell naksha which you like with `/naksha-taste approve A`, and every later `/design` starts from your taste.

> **✨ New in v5.1 — `/design-reel`:** record the design team working and render a share-able video of it (9:16 + 16:9). `/design-reel Design a pricing page for a SaaS analytics product` → a post-ready clip of your screen being designed, live. [Learn more ↓](#design-reel-task--watch-the-team-new-in-v51)

> **Updates:** Marketplace installs update with `claude plugin update naksha` (it moves when a new version is released). Local clones: `git pull && bash install.sh` — Claude Code runs its own cached copy of the plugin, so re-running the installer is what picks up the new code.

### Cursor

Copy `.cursor/rules/naksha.mdc` to your project's `.cursor/rules/` directory. The design team activates automatically for CSS, HTML, TSX, SVG, and token files.

### Windsurf

Copy `.windsurfrules` to your project root. Windsurf reads it automatically at session start.

### Gemini CLI

Copy `GEMINI.md` to your project root. Gemini CLI reads it at session start.

### VS Code Copilot

Copy `.github/copilot-instructions.md` to your project's `.github/` directory. Copilot Chat and inline completions will apply the design team's rules.

### Autohand Code CLI

Copy `AGENTS.md` to your project root and copy `skills/design/` to `.autohand/skills/naksha-design/`. Autohand Code CLI will read the project instructions and load the Naksha design skill from its project-level skills directory.

---

## 👥 The Team

<!-- naksha:generated roles — edit adapters/, then run: node scripts/build-adapters.js -->
<table>
<tr>
<td align="center" width="14%">

**Design Manager**

Orchestrates

</td>
<td align="center" width="14%">

**Creative Director**

Vision

</td>
<td align="center" width="14%">

**Product Designer**

Strategy

</td>
<td align="center" width="14%">

**UX Designer**

Flows

</td>
<td align="center" width="14%">

**UI Designer**

Visual

</td>
<td align="center" width="14%">

**UX Researcher**

Insights

</td>
<td align="center" width="14%">

**Content Designer**

Copy

</td>
</tr>
<tr>
<td align="center">

**Design System Lead**

Tokens

</td>
<td align="center">

**Motion Designer**

Animation

</td>
<td align="center">

**Illustration Director**

Icons & Art

</td>
<td align="center">

**Presentation Designer**

Decks

</td>
<td align="center">

**Brand Strategist**

Positioning

</td>
<td align="center">

**Print Designer**

Print & PDF

</td>
<td align="center">

**Video/Content Producer**

Scripts

</td>
</tr>
<tr>
<td align="center">

**Social Media Designer**

Social Visuals

</td>
<td align="center">

**Social Media Strategist**

Campaigns

</td>
<td align="center">

**Social Media Copywriter**

Captions

</td>
<td align="center">

**Growth/Analytics Specialist**

Metrics

</td>
<td align="center">

**Email Designer**

HTML Email

</td>
<td align="center">

**Email Copywriter**

Subject Lines

</td>
<td align="center">

**Data Viz Designer**

Charts

</td>
</tr>
<tr>
<td align="center">

**Dashboard Architect**

Layouts

</td>
<td align="center">

**Framework Specialist**

Components

</td>
<td align="center">

**AI Image Director**

Image Gen

</td>
<td align="center">

**AI Video Director**

Video Gen

</td>
<td align="center">

**AI Audio & Voice Producer**

Voiceover & Music

</td>
<td align="center">

**AI Prompt Engineer**

Prompt Systems

</td>
<td align="center">

**Conversational Designer**

Chat & Voice UI

</td>
</tr>
<tr>
<td align="center">

**Spatial Designer**

Spatial & AR

</td>
<td align="center">

**Compliance Designer**

Regulated UX

</td>
<td align="center" colspan="5">

</td>
</tr>
<tr>
<td align="center" colspan="7">

_The skill loads only the references your task actually needs_

</td>
</tr>
</table>
<!-- /naksha:generated roles -->

---

## 🎯 Commands

| Command | What It Does |
|---------|-------------|
| `/design <task>` | Full design workflow with team assembly |
| `/design-review <file or screenshot>` | Quality audit — accepts HTML, Figma URLs, or screenshots for visual AI critique (6 design principles scored 0–10) |
| `/design-system` | Generate, extract, or audit design tokens |
| `/design-md <lint\|import\|export\|page\|show>` | Read, lint (incl. WCAG AA contrast) and write [DESIGN.md](https://github.com/google-labs-code/design.md) design systems; import DTCG/CSS tokens, export DTCG, CSS or Tailwind, and keep `.naksha/design-system/MASTER.md` plus per-page overrides (v6) |
| `/figma <URL>` | Convert Figma designs to production code |
| `/figma-create <task>` | Build pages, wireframes, components in Figma |
| `/ux-audit <brief>` | Audit Figma file against a design brief |
| `/design-handoff` | Developer handoff docs (tokens, specs, APIs) |
| `/figma-responsive` | Generate mobile/tablet variants from desktop |
| `/figma-sync` | Detect design–code drift |
| `/design-present` | Interactive HTML presentation from Figma |
| `/brand-kit <color>` | Complete brand kit from 1–2 colors |
| `/component-docs` | Storybook-style docs from Figma components |
| `/figma-prototype` | Prototype connections between frames |
| `/site-to-figma <URL>` | Capture website → editable Figma design |
| `/ab-variants` | A/B test design variants |
| `/design-sprint` | Guided 5-phase design sprint |
| `/social-content <task>` | Social media visuals (posts, stories, reels, carousels) |
| `/social-campaign <brief>` | Campaign planning with strategy, calendar, and captions |
| `/social-analytics <type>` | Social analytics dashboards and performance reports |
| `/design-framework <fw> [file]` | Convert HTML designs to React, Vue, Svelte, Next.js, or Astro |
| `/email-template <type> for <brand>` | Production HTML email template (responsive, dark mode, cross-client) |
| `/email-campaign <type> for <product>` | Complete multi-email campaign sequence with copy and HTML templates |
| `/email-audit` | Full-spectrum email audit — technical rendering issues + copy/strategy critique (two-phase) |
| `/design-template <category>` | Production web template from gallery (landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, onboarding) |
| `/chart-design <description>` | Accessible chart or data visualization — selects chart type, applies colorblind-safe palette, outputs HTML/CSS/JS |
| `/dashboard-layout <description>` | Complete dashboard — KPI cards, chart areas, filter bar, data table, sidebar, responsive |
| `/data-viz-audit` | Audit chart type, palette, annotations, anti-patterns. Conditional Phase 2: dashboard fit |
| `/design-tutorial [track]` | Interactive guided tour — tracks: quick-start, ui, figma, social, email, data-viz, full |
| `/figma-component-library <description>` | Complete Figma component library — atoms, molecules, organisms with variants, auto layout, component properties |
| `/motion-design <component or page>` | Design micro-interactions, transitions, and animation systems — duration/easing scale, reduced motion fallbacks |
| `/presentation-design <deck type>` | Design a complete presentation deck — pitch deck, product demo, or internal — with slide system and visual hierarchy |
| `/brand-strategy <brand name>` | Define or audit a brand — positioning, visual identity, voice and tone, brand architecture |
| `/illustration-system <scope>` | Design an illustration style guide, icon system, or SVG asset set |
| `/video-script <video type>` | Write a video script, storyboard, or content series plan for demos, explainers, social video, or ads |
| `/gen-image <subject> for <brand>` | Generate a brand-aligned AI image — tool selection (MJ/DALL-E/Ideogram/Firefly/SD), full 6-element prompt, 2 variations, seed strategy |
| `/gen-video <scene> for <platform>` | Generate a shot-by-shot AI video prompt pack — tool selection (Runway/Kling/Sora/Pika/Luma), consistency strategy, platform spec |
| `/gen-audio <voice or music> for <platform>` | Generate an AI audio brief — voiceover (ElevenLabs/Murf) or music/jingle (Suno), timing cues, FTC/EU AI Act compliance |
| `/gen-moodboard <concept> for <brand>` | Generate 3 AI moodboard directions — brand personality extraction, visual style, 4–6 prompts per direction |
| `/prompt-refine <existing prompt>` | Diagnose and optimise any AI gen prompt — annotated critique, optimised version, cross-tool variant |
| `/print-layout <brief>` | Print-ready layout — business cards, certificates, brochures, posters with CMYK, bleed, and crop marks |
| `/print-audit <file>` | Pre-flight audit for print: bleed, CMYK, resolution, font embedding, PDF/X compliance |
| `/pdf-report <brief>` | Multi-page PDF report or document — cover, table of contents, body sections, charts, structured for print or digital |
| `/lint-design <figma_url>` | Design linter — orphan colors, non-token spacing, missing auto-layout, contrast violations, scored by severity |
| `/accessibility-audit` | WCAG 2.1 AA audit — contrast, ARIA, keyboard nav, semantic HTML — with specific code fixes |
| `/design-qa <file or URL>` | Visual QA at 3 breakpoints — token compliance, interaction states, responsive behavior |
| `/design-critique <file>` | Heuristic review — Nielsen's 10 heuristics, visual audit, interaction states; add `--screenshot <path>` for vision-mode critique |

**v4.0.0 — Memory, Pipelines, Vision & Frontier Wings**

| `/naksha-init` | Interactive project setup wizard — writes `.naksha/project.json` (brand, framework, tokens) and creates a design decision log |
| `/naksha-status` | Display current project context and recent design decisions from memory |
| `/pipeline run <name>` | Execute a multi-step design pipeline — `launch-prep`, `brand-audit`, `component-build`, `social-launch` |
| `/design-compare <url1> <url2>` | Side-by-side visual analysis of two URLs — layout, typography, color, UX patterns, "Steal This" recommendations |
| `/competitive-audit <url>` | Extract a competitor's color palette, type system, layout grid, and UX patterns with quality ratings |
| `/design-chatbot <type> [platform]` | Complete chatbot/assistant UI spec — persona, dialog flows, message bubbles, quick replies, error states, accessibility |
| `/design-voice-ui <product> [platform] [screen]` | Voice interface spec — wake word flows, confirmation patterns, hybrid screen layout, SSML, earcon design |
| `/design-spatial <type> [platform]` | Spatial computing spec for visionOS/WebXR — depth hierarchy, window types, ornaments, spatial typography |
| `/design-ar-overlay <use-case> [platform]` | AR overlay spec — anchor strategy, world tracking UI, instruction cards, scan states, occlusion handling |
| `/design-gdpr <type> [jurisdiction]` | GDPR/CCPA consent flows — cookie banner variants, privacy control center, data deletion request flow |
| `/design-compliance --regulation <hipaa\|pci\|ada>` | Compliance design audit or generation — HIPAA PHI handling, PCI payment form isolation, ADA/Section 508 |

**v4.6.0 — CI/CD & Health**

| `/naksha-doctor [--fix]` | Plugin health check — validates command count, references, version consistency, allowed-tools; probes Playwright + Figma MCP availability; `--fix` remediates issues automatically |

**v4.7.0 — Design Intelligence**

| `/design-score <file or URL>` | Quantitative 0–100 design score across 4 dimensions: Accessibility (WCAG), Usability (Nielsen), Visual Quality, Token Compliance — ASCII bar chart, A–F grade |

**v5.0.0 — Project Memory & Design Agent**

| `/naksha-browse <url>` | Browser-vision design research — captures a live URL, extracts layout patterns, typography, color, and UX patterns, stores findings in `.naksha/project.json` for automatic context injection into future design commands |
| `/naksha-remember <constraint>` | Persist a design constraint or component pattern to project memory — classified as `constraint` or `component_pattern` and written to `.naksha/project.json`; context flows automatically into `/design`, `/brand-kit`, `/design-system`, and 3 other commands |

**v5.3.0 — Taste Memory**

| `/design-variants <task> [--count 2-5]` | Build 2–5 genuinely different directions for the same brief (each pair differs on at least two of layout, type, color, density, ornament), side by side in `naksha-variants/index.html`. Leans into your taste profile, with one deliberate "Wildcard" |
| `/naksha-taste [approve\|reject <direction> …]` | Record which directions you approved or rejected; with no arguments, show your taste profile. `/design` and `/design-variants` default to approved traits and avoid rejected ones; signals fade after 90 days |

**v6.0.0 — Naksha Live**

| `/design-detect [files]` | Free, no-AI design lint (22 rules: WCAG contrast, spacing grid, type scale, focus-visible, reduced motion, alt text, clickable divs, hardcoded colors, AI-design clichés) with `--json` and CI exit codes; also runs as a hook after UI edits (v6) |
| `/naksha-stats [--since <date>]` | Tokens and estimated cost per naksha command from your local Claude Code usage, compared against optional budgets in `.naksha/project.json` (v6) |
| `/naksha-dashboard [setup\|start\|stop\|status\|disable]` | Naksha Live (optional, recommended): a local dashboard with a live org chart of the 30 roles, activity stream, project memory, findings and cost. Zero dependencies, 127.0.0.1 only, token-protected; off until you run `setup` (v6) |
| `/naksha-vote helpful\|needs-work <subject> [because …]` | Vote on a design, variant, review finding or command run. Votes stay local in `.naksha/votes.jsonl`, consolidate into evidence-backed taste observations, and calibrate eval judges against what you actually thought (v6) |

<details>
<summary><b>📖 Command details & examples</b></summary>

<br>

### `/design <task>` — Full Design Workflow

Assembles the right specialists and runs the complete workflow:

```
/design Create a 3-tier pricing page with monthly/annual toggle
/design Redesign the onboarding flow for better conversion
/design Build a real-time analytics dashboard
```

### `/design-reel <task>` — Watch the Team _(new in v5.1)_

Runs `/design`, then renders the result as a share-able video of the design team working — vertical (9:16) + landscape (16:9), captioned, with each specialist's contribution narrated over the page they built:

```
/design-reel Design a pricing page for a SaaS analytics product
/design-reel Redesign the settings page --url http://localhost:3000/settings
```

Outputs `reel-9x16.mp4` + `reel-16x9.mp4`, ready to post. `--url` captures a live page for a real before/after wipe; without it, the reel shows the freshly built page. Requires a one-time Node render toolchain (`packages/naksha-reel`, installs on first use) — run `/naksha-doctor` to check, or see [docs/reel-setup.md](docs/reel-setup.md). The clip is a produced re-enactment, end-carded as such.

### `/design-review <file>` — Quality Audit

Runs a structured 5-point audit on existing designs:

```
/design-review ./src/pages/checkout.html
```

Checks: Accessibility (WCAG AA) · Usability Heuristics · Visual Consistency · Content Quality · Motion Design

### `/design-system` — Token Generation

Generate, extract, or audit design tokens:

```
/design-system Generate tokens from brand color #2563eb
/design-system Extract tokens from this Figma file
/design-system Audit existing code for hardcoded values
```

### `/figma <URL>` — Figma to Code

Convert Figma designs to production-ready code:

```
/figma https://figma.com/design/abc123/MyApp?node-id=1-2
```

### `/figma-create <task>` — Create Designs in Figma

Build pages, wireframes, components, and design systems directly inside Figma via the Desktop Bridge:

```
/figma-create Build a 3-screen wireframe for a saved content feature
/figma-create Set up a design system with color tokens and type scale
/figma-create Create a component set for Button with 4 variants
```

Requires the [Figma Desktop Bridge](https://www.figma.com/community/plugin/figma-desktop-bridge) plugin running in Figma Desktop.

### `/ux-audit <brief>` — Audit Against a Design Brief

Audit a Figma file for compliance against a design brief — checks page structure, frame naming, sizes, styles, components, and content:

```
/ux-audit Check the Miles UX Design Challenge submission against the brief
/ux-audit Verify all required screens are present at 1440×900
```

### `/design-handoff` — Developer Handoff Docs

Generate a complete developer handoff document from a Figma file — token maps, spacing specs, component APIs, and production-ready code snippets:

```
/design-handoff Generate handoff for the current Figma file
/design-handoff Export tokens as CSS variables and Tailwind config
```

Outputs: Markdown docs, CSS custom properties, Tailwind config, TypeScript types.

### `/figma-responsive <frame>` — Responsive Variants

Generate mobile (375×812) and tablet (768×1024) variants from a desktop Figma frame:

```
/figma-responsive S3-A / Saved Redesigned
/figma-responsive Create mobile and tablet versions of the dashboard
```

Clones the source frame, adapts layout (grid reflow, sidebar collapse, nav simplification), and validates each breakpoint with screenshots.

### `/figma-sync` — Design-Code Sync

Detect drift between Figma designs and code implementation — compare color tokens, typography, spacing, and components:

```
/figma-sync Check if Figma tokens match our Tailwind config
/figma-sync Compare design system styles against CSS custom properties
```

Outputs a sync report with drift score, per-token comparison tables, and optional patches for both Figma and code.

### `/design-present <type>` — Design Presentation

Generate an interactive HTML presentation from Figma screens:

```
/design-present Create a walkthrough presentation of the dashboard screens
/design-present Build a pitch deck from the product mockups
/design-present Generate a case study presentation
```

Features: keyboard navigation, progress bar, annotations, zoom, dark/light mode, fullscreen.

### `/brand-kit <color> [mood]` — Brand Kit Generation

Generate a complete brand kit from 1-2 colors and a mood:

```
/brand-kit #6366f1 premium
/brand-kit Generate a warm brand from #f59e0b
```

Outputs: 10-shade color palettes, secondary/accent colors, type scale, spacing scale, CSS custom properties, Tailwind config, JSON tokens, Figma styles, and a visual HTML reference page.

### `/component-docs` — Component Documentation

Auto-generate Storybook-style documentation from Figma component sets:

```
/component-docs Document all components in the current Figma file
/component-docs Generate docs for the Button component set
```

Outputs: prop tables, variant grids, usage guidelines, code examples (HTML/React), rendered screenshots.

### `/figma-prototype` — Prototype Connections

Create interactive prototype connections between Figma frames:

```
/figma-prototype Connect all screens in the onboarding flow
/figma-prototype Auto-detect buttons and link them to target screens
```

Supports transition presets: slide, dissolve, move-in. Auto-detects interactive elements (buttons, links, nav items, cards).

### `/site-to-figma <URL>` — Website to Figma

Capture a live website and recreate it as an editable Figma design:

```
/site-to-figma https://example.com
/site-to-figma Capture the hero section of stripe.com
```

Extracts color palette, typography, section structure via Playwright, then rebuilds as auto-layout Figma frames with Paint/Text Styles.

### `/ab-variants <frame> [dimension]` — A/B Test Variants

Generate A/B test design variants from an existing Figma screen:

```
/ab-variants Hero Section layout
/ab-variants Pricing Page cta
/ab-variants Landing Page all
```

Creates control + test variants with layout, CTA, copy, or color changes. Includes testing recommendations (sample size, duration, success metrics).

### `/design-sprint <problem>` — Design Sprint

Guided 5-phase design sprint methodology:

```
/design-sprint Improve signup conversion for our SaaS product
/design-sprint Redesign the checkout experience to reduce abandonment
```

Phases: Understand (problem mapping) → Diverge (8 solution ideas) → Decide (weighted matrix) → Prototype (build testable solution) → Validate (test script + success metrics).

### `/design-framework <framework> [file]` — Framework Conversion

Convert HTML/CSS design output to idiomatic component code:

```
/design-framework react-tailwind ./output/landing-page.html
/design-framework vue ./output/dashboard.html
/design-framework nextjs ./src/app/page.html
/design-framework svelte ./output/component.html
/design-framework astro ./output/hero.html
```

Or trigger inline from `/design`:
```
/design Build a pricing page --framework react-tailwind
/design Create an analytics dashboard --framework nextjs
```

Outputs: TypeScript components with proper interfaces, framework-specific patterns (Server/Client components for Next.js, islands for Astro, runes for Svelte 5), design token mapping to Tailwind config or CSS variables, setup instructions.

Supported frameworks: `react-tailwind` · `vue` (Vue 3 + UnoCSS) · `svelte` (Svelte 5) · `nextjs` (App Router) · `astro`

### `/social-content <task>` — Social Media Visuals

Create platform-optimized social media visuals at exact dimensions with safe zones:

```
/social-content Instagram carousel for a product launch — 5 slides
/social-content TikTok story announcing a new feature
/social-content LinkedIn post about our Series A funding
```

### `/social-campaign <brief>` — Campaign Planning

Plan a social media campaign with strategy, content calendar, caption drafts, and KPI targets:

```
/social-campaign Awareness campaign for fitness app targeting Gen Z on Instagram and TikTok
/social-campaign Product launch for SaaS tool — LinkedIn + Twitter — 2 weeks
/social-campaign Engagement campaign for local restaurant on Instagram
```

Outputs: campaign strategy, 2-week content calendar, first-week caption drafts with hooks and CTAs, KPI targets. Visual assets created separately via `/social-content`.

### `/social-analytics <type>` — Social Analytics

Build analytics dashboards, performance reports, or A/B test frameworks:

```
/social-analytics dashboard for Instagram + TikTok — last 30 days
/social-analytics weekly report for LinkedIn company page
/social-analytics ab-test Compare carousel vs. single-image posts on Instagram
```

### `/email-template <type> for <brand>` — HTML Email Template

Generate a production-ready HTML email template with inline styles, table layout, and bulletproof buttons:

```
/email-template welcome for Acme SaaS — new user signup
/email-template promotional for ShopCo — Black Friday 30% off sale
/email-template transactional for OrderCo — order confirmation with item table
/email-template newsletter for TechBlog — weekly curated articles
```

Outputs: Full HTML with VML buttons (Outlook), mobile-responsive `@media` rules, dark mode, preheader, ESP template variables reference, and QA checklist.

### `/design-template <category>` — Template Gallery

Start from a production-ready template for any page type:

```
/design-template landing-page #6366f1
/design-template dashboard --style dark-tech
/design-template pricing --style bold
/design-template saas #2563eb --dark
/design-template portfolio --style minimal
/design-template ecommerce #f59e0b
```

10 categories: `landing-page` · `dashboard` · `pricing` · `auth` · `blog` · `ecommerce` · `portfolio` · `docs` · `saas` · `onboarding`

Outputs: Full responsive HTML/CSS with CSS custom properties for rebrand, semantic markup, vanilla JS interactions, dark mode, and mobile layout.

### `/email-campaign <type> for <product>` — Email Campaign Sequence

Plan and generate a complete multi-email campaign with copy and HTML templates:

```
/email-campaign welcome-series for Figma-clone SaaS — new signups
/email-campaign product-launch for Naksha v3 — existing users
/email-campaign re-engagement for fitness app — 60-day inactive users
/email-campaign onboarding for project management tool — trial users
```

Outputs: Campaign brief, sequence map with timing, copy for all emails (subject lines, preview text, body, CTAs), full HTML for each email, ESP automation setup notes, A/B test plan.

### `/chart-design <description>` — Chart & Data Visualization

Design any chart with the right chart type, accessible color palette, annotations, and production-ready HTML/CSS/JS:

```
/chart-design monthly revenue trend for 2025
/chart-design part-to-whole breakdown of user acquisition channels
/chart-design scatter plot: ad spend vs conversion rate
/chart-design --library d3 geographic user distribution by US state
```

Applies colorblind-safe palettes (sequential/diverging/categorical), adds contextual annotations, includes ARIA accessibility (role="img", title, desc), responsive tick density, and Chart.js data table fallback. Supports `--library` flag for D3, Recharts, Visx, or vanilla SVG.

### `/dashboard-layout <description>` — Dashboard Layout

Build a complete, production-ready dashboard layout:

```
/dashboard-layout SaaS analytics dashboard with MRR, churn, active users
/dashboard-layout e-commerce admin: orders, revenue, inventory, customer table
/dashboard-layout monitoring dashboard for API performance metrics --style dark-tech
/dashboard-layout --type executive weekly business review for C-suite
```

Outputs full HTML/CSS with sidebar navigation, 4-column KPI card row, primary + secondary chart areas (with `/chart-design` integration hooks), filter bar with date range selectors, sortable data table with pagination, responsive breakpoints (desktop/tablet/mobile), dark mode, and vanilla JS interactions.

### `/design-tutorial [track]` — Interactive Tutorial

New to Naksha? Run a guided tour with real exercises:

```
/design-tutorial                    # shows welcome screen + track selection
/design-tutorial quick-start        # 5 min: run 3 commands, see what each produces
/design-tutorial ui                 # 15 min: build component → extract tokens → handoff
/design-tutorial figma              # 15 min: create in Figma → responsive → prototype
/design-tutorial social             # 15 min: post design → campaign → analytics
/design-tutorial email              # 15 min: welcome template → onboarding sequence
/design-tutorial data-viz           # 15 min: chart design → full dashboard
/design-tutorial full               # 30 min: complete tour of all 9 wings
```

Each track produces real output — you're not just reading docs, you're running commands. The quick-start track covers the three most common commands (`/design`, `/design-review`, `/design-framework`) in under 5 minutes.

### `/figma-component-library <description>` — Figma Component Library Generator

Generate a complete component library in Figma — atoms → molecules → organisms — from a brand description or design token config:

```
/figma-component-library SaaS product with blue primary, minimal style
/figma-component-library e-commerce: product cards, cart, checkout forms
/figma-component-library --scope atoms   # generate only atom-level components
/figma-component-library --config design-tokens.json --framework
```

Generates the full atomic design hierarchy:
- **Atoms** (18 components): Button, Badge, Input, Checkbox, Toggle, Avatar, Spinner, Tooltip, and more — each with all variants and states
- **Molecules** (16 components): Card, Form Field, Alert, Modal, Tabs, Dropdown, Stat Card, Empty State, and more
- **Organisms** (10 components): Nav Bar, Sidebar, Data Table, Hero, Form Section, Pricing Card, and more

All components use auto layout, component properties, and a consistent token foundation. Add `--framework` for companion TypeScript interface specs.

</details>

---

## 🔗 Workflows

Commands chain tog...