naksha

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

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

Quick Start · Commands · The Team · How It Works · Changelog

---

🚀 Quick Start

Claude Code (full plugin — 63 commands, agents, hooks)

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 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 ↓

Updates: Just git pull inside the repo — no reinstall needed. The plugin is a live symlink to your local clone.

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

Design Manager

Orchestrates

Creative Director

Vision

Product Designer

Strategy

UX Designer

Flows

UI Designer

Visual

UX Researcher

Insights

Content Designer

Copy

Design System Lead

Tokens

Motion Designer

Animation

Social Media Designer

Social Visuals

Social Media Strategist

Campaigns

Social Media Copywriter

Captions

Growth/Analytics Specialist

Metrics

Email Designer

HTML Email

Email Copywriter

Subject Lines

Data Viz Designer

Charts

Dashboard Architect

Layouts

Presentation Designer

Decks

Brand Strategist

Positioning

Illustration Director

Icons & Art

Video/Content Producer

Scripts

AI Image Director

Image Gen

AI Video Director

Video Gen

AI Audio & Voice Producer

Voiceover & Music

AI Prompt Engineer

Prompt Systems

Print Designer

Print & PDF

The skill loads only the references your task actually needs

---

🎯 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
/figma <URL>	Convert Figma designs to production code
/figma-create <task>	Build pages, wireframes, components in Figma
/ux-audit	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	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	Production HTML email template (responsive, dark mode, cross-client)
/email-campaign <type> for	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	Define or audit a brand — positioning, visual identity, voice and tone, brand architecture
/illustration-system <scope>	Design an illus