adityaraj0421/naksha-studio

---

🚀 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

---

🎯 Commands

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 | Execute a multi-step design pipeline — launch-prep, brand-audit, component-build, social-launch | | /design-compare | Side-by-side visual analysis of two URLs — layout, typography, color, UX patterns, “Steal This” recommendations | | /competitive-audit | Extract a competitor’s color palette, type system, layout grid, and UX patterns with quality ratings | | /design-chatbot [platform] | Complete chatbot/assistant UI spec — persona, dialog flows, message bubbles, quick replies, error states, accessibility | | /design-voice-ui [platform] [screen] | Voice interface spec — wake word flows, confirmation patterns, hybrid screen layout, SSML, earcon design | | /design-spatial [platform] | Spatial computing spec for visionOS/WebXR — depth hierarchy, window types, ornaments, spatial typography | | /design-ar-overlay [platform] | AR overlay spec — anchor strategy, world tracking UI, instruction cards, scan states, occlusion handling | | /design-gdpr [jurisdiction] | GDPR/CCPA consent flows — cookie banner variants, privacy control center, data deletion request flow | | /design-compliance --regulation | 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 | 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 | 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 | 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 |

---

🔗 Workflows

Commands chain together. Each command suggests relevant next steps:

---

🚦 CI/CD Design Checks

Add automatic design quality checks to every PR. The included GitHub Action runs when HTML/CSS files change, posts a score card as a PR comment, and fails CI if quality drops below the threshold.

Setup: Copy the workflow to your repo:

cp .github/workflows/design-check.yml /your-repo/.github/workflows/
cp scripts/design-lint.js /your-repo/scripts/

PR comment example:

✅ Design Quality Check — Score: 94/100

| Severity | File | Check | Issue |
|----------|------|-------|-------|
| 🟡 Warning | src/dashboard.html | CSS token compliance | 7 hardcoded hex colors found |

Local run:

node scripts/design-lint.js src/**/*.html src/**/*.css

Configure via .design-lint.json in your repo root (copy from .design-lint.json.example):

{ "failThreshold": 80, "ignorePatterns": ["dist/**"] }

Score formula: 100 − (errors × 10) − (warnings × 3)

---

🧠 Project Memory (v5)

Naksha can remember your project’s design constraints across sessions. Run /naksha-init once to create a .naksha/project.json file with your brand colors, font, voice, and framework. Commands like /design, /brand-kit, /design-system, /design-score, and /accessibility-audit read this file automatically — no copy-pasting context every time.

Three ways to build memory:

Memory is stored in .naksha/project.json. Commit it to share context with your team, or add .naksha/ to .gitignore to keep it local. The Stop hook automatically applies any memory-write blocks emitted during a session — so constraints written mid-conversation are persisted without manual saves.

Run /naksha-status to see the current context, and /naksha-doctor to validate the full plugin health.

---

⚙️ How It Works

When you run a command, the Design Manager reads your request and assembles the right specialist roles from skills/design/references/. Each role contributes its knowledge — UI Designer for color and typography, Motion Designer for animation, Design System Lead for tokens, and so on. The assembled team runs the full workflow: research, strategy, creative, build, and delivery.

Adaptive loading: A simple button redesign loads 1–2 references. A full product feature loads 4–7 references with the complete workflow.

---

🤖 Agents

Background agents run in parallel with your main work. Foreground agents run interactively.

---

🔍 Auto-Detection

The plugin automatically detects your project context at session start:

Recommendations adapt to match your stack — no manual configuration needed.

---

⚙️ Configuration

Create skills/design/settings.local.md (gitignored) to set defaults:

brand_color: "#6366f1"
accent_color: "#f59e0b"
brand_name: "MyProduct"
brand_mood: "professional"

css_framework: "tailwind"
default_font: "Inter"
icon_library: "lucide"

include_dark_mode: true
min_contrast_ratio: 4.5
spacing_base: 8

deploy_target: "firebase"

Settings marked "auto" or left empty defer to auto-detection. The Design Manager reads these at the start of every task.

---

📁 What’s Inside

naksha/
├── .claude-plugin/plugin.json          # Plugin manifest (v5.0.0)
├── skills/design/
│   ├── SKILL.md                        # Design Manager orchestration
│   ├── settings.local.md              # User-configurable preferences
│   └── references/                     # 32 specialist role knowledge bases
│       ├── product-designer.md         # End-to-end UX, feature scoping
│       ├── ux-designer.md              # Flows, wireframes, IA
│       ├── ui-designer.md              # Color, typography, layout, components
│       ├── ux-researcher.md            # Heuristics, accessibility, edge cases
│       ├── content-designer.md         # Microcopy, errors, tone of voice
│       ├── design-system-lead.md       # 3-tier tokens, theming, dark mode, Figma styles
│       ├── motion-designer.md          # Timing, easing, micro-interactions, FLIP
│       ├── figma-workflow.md           # Figma MCP tools, design-to-code + creation
│       ├── figma-creation.md           # Figma API patterns via Desktop Bridge
│       ├── deployment.md              # Preview server, Firebase Hosting
│       ├── social-media-designer.md    # Platform specs, safe zones, visual systems
│       ├── social-media-strategist.md  # Campaign planning, content calendar, KPIs
│       ├── social-media-copywriter.md  # Captions, hooks, hashtag strategy
│       ├── growth-analytics-specialist.md # Metrics, dashboards, A/B testing
│       ├── email-designer.md           # HTML email, responsive, dark mode, ESPs
│       ├── email-copywriter.md         # Subject lines, sequences, deliverability
│       ├── data-viz-designer.md        # Chart type selection, colorblind-safe palettes
│       ├── dashboard-architect.md      # KPI layouts, filter systems, data tables
│       ├── framework-specialist.md     # React/Vue/Svelte/Next.js/Astro patterns
│       ├── template-gallery.md         # 10 production web templates
│       ├── presentation-designer.md    # Slide systems, pitch decks, data storytelling
│       ├── brand-strategist.md         # Positioning, visual identity, brand architecture
│       ├── illustration-director.md    # Icon systems, SVG standards, style taxonomy
│       ├── video-content-producer.md   # Scripts, storyboards, short-form pacing
│       ├── conversational-designer.md  # Chatbot UI, VUI, dialog flows, persona systems
│       ├── spatial-designer.md         # visionOS HIG, WebXR, depth layers, gaze/gesture
│       └── compliance-designer.md      # GDPR/CCPA consent UX, HIPAA, PCI, ADA compliance
├── commands/                           # 63 slash commands
├── agents/                             # 7 specialist agents
├── hooks/hooks.json                    # SessionStart + PreToolUse + Stop hooks
├── scripts/
│   ├── detect-design-context.sh        # Project stack detection
│   └── run-evals.sh                    # Eval structure validator
├── evals/
│   ├── evals.json                      # 161 eval cases (prompt + assertion specs)
│   └── fixtures/                       # 63 output fixtures for behavioral smoke tests
├── assets/                             # Social preview + demo images
├── CHANGELOG.md                       # Version history
└── CONTRIBUTING.md                    # Contributor guide

---

🛠 Tech Stack Defaults

All defaults adapt when the plugin detects your project uses a different stack.

---

Quality check

Run all quality gates locally:

bash scripts/quality-check.sh

Checks: metadata consistency (meta/stats.json vs filesystem vs README badges), behavioral smoke evals (pre-captured command output fixtures), legacy branding guard.

---

📦 Installation

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

Restart Claude Code to load the plugin. To update: git pull (no reinstall needed).

---

Requirements

• Claude Code CLI
• Optional MCP servers for Figma + Preview capabilities — see MCP Setup Guide

---