Naksha Studio plugin for Grok Build
A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 30 roles, 70 commands, 16,000+ lines of expert design knowledge. Your agency's design brain, inside your terminal.
How to install Naksha Studio in Grok Build
grok plugin install Adityaraj0421/naksha-studio --trustReview before you trust it. --trust lets this plugin's hooks, MCP servers and scripts run code on your computer. It's a community repo that neither xAI nor GrokStacks has reviewed, so read its code first.
We install this repo directly: Grok Build 1.0.62 can't install it through its own marketplace file. Then start a new Grok session, or press r in /plugins, to load it.
Command format: Grok Build's plugin guide
What we checked: on Oct 18, 2026 it installed with grok 1.0.62 and Grok found 70 skills, 70 slash commands, 1 subagent. That's an install check only: we haven't run it in a live Grok session.
What it contains
Skills (25)
design— 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.ab-variants— Generate A/B test design variants from an existing Figma screen — alternate layouts, CTA placements, color treatments, and copy variations.accessibility-audit— Full WCAG AA accessibility audit on an HTML file — contrast ratios, keyboard navigation, semantic HTML, ARIA usage, touch targets, and label associations.brand-kit— Generate a complete brand kit from a logo and 1-2 brand colors — full palette, type scale, icon style, component tokens, and Figma styles.brand-strategy— Define or audit a brand — positioning, visual identity system, voice and tone, and brand architecture.chart-design— Design a chart or data visualization — selects the right chart type, applies accessible color palettes, adds annotations, and outputs production-ready HTML/CSS/JScompetitive-audit— Capture a competitor website with Playwright and extract its color system, typography, layout patterns, and 'steal this' recommendations.component-docs— Auto-generate component documentation from Figma — props, variants, usage guidelines, spacing specs, and code snippets in Storybook-style format.dashboard-layout— Design and build a complete dashboard layout — sidebar navigation, KPI cards, chart areas, data tables, filter bar, and responsive behavior. Outputs production-ready HTML/CSS.data-viz-audit— Audit a data visualization for chart type selection, accessible color palette, annotations, and anti-patterns. Optionally audits dashboard layout fit when context is provided. Outputs a scored checklist and corrected code.design-ar-overlay— Design an AR overlay interface — anchor strategy, world tracking UI, scan states, confirmation overlays, and occlusion handling.design-chatbot— Design a complete chatbot or conversational assistant UI — dialog flows, message bubbles, quick replies, typing indicators, error states, and accessibility.design-compare— Capture two websites with Playwright and produce a structured side-by-side design comparison — layout, color, typography, navigation, and 'steal this' recommendations.design-compliance— Audit or generate regulation-specific UI patterns for HIPAA, PCI DSS, or ADA compliance. Use --regulation <hipaa|pci|ada> to target a specific standard.design-critique— UX heuristic review of Figma screens — evaluates against Nielsen's 10 heuristics, visual design quality, spacing, color, typography hierarchy, and interaction states.design-detect— Free, deterministic design lint: runs naksha's no-LLM rule engine on files (or your git changes) and explains every finding by role with concrete fixes.design-framework— Convert HTML/CSS design output to framework-specific component code. Supports web: React+Tailwind, Vue 3+UnoCSS, Svelte 5, Next.js App Router, Astro. Native mobile: Flutter, React Native, SwiftUI, Jetpack Compose.design-gdpr— Design GDPR/CCPA-compliant consent flows — cookie banners, consent hierarchy, privacy controls, and data deletion request UI.design-handoff— Generate a developer handoff document from a Figma file — spacing specs, token maps, component APIs, and production-ready code snippets.design-md— Work with DESIGN.md files, the open YAML-tokens-plus-prose design system format: lint (structure, references, WCAG AA contrast), import tokens (DTCG JSON or CSS variables), export to DTCG, CSS, or Tailwind, and manage the project's MASTER.mdesign-present— Generate an interactive HTML presentation from Figma screens — annotated walkthrough with transitions, speaker notes, and keyboard navigation.design-qa— Visual QA on an HTML/CSS implementation — checks responsive behavior at mobile/tablet/desktop, design token compliance, interactive states (hover, focus, active), and motion quality.design-reel— Record naksha's design team working — turn a /design run into a share-able vertical + landscape video reel (the 30-role team redesigning a screen, live).design-review— Review an existing design for quality — accessibility, usability, visual consistency, content, and motion. Accepts HTML files, Figma URLs, preview servers, or screenshots for visual AI critique. Every finding is written to naksha-review/findesign-score— Quantitative 0–100 design quality score across Accessibility, Usability, Visual Quality, and Token Compliance.
Subagents (7)
naksha:accessibility-auditor— Use this agent to run a comprehensive WCAG AA accessibility audit on a design. Trigger when reviewing designs for accessibility, checking contrast ratios, testing keyboard navigation, or validating senaksha:design-critic— Use this agent to run a structured 3-pass UX critique — heuristics, accessibility, and content quality. Trigger when the user wants a thorough pre-launch design review, when designs need a second opinnaksha:design-critique— Use this agent to perform an automated UX heuristic review of Figma screens. Trigger when the user wants feedback on their design, a UX audit of screens, or a critique before presenting/submitting thenaksha:design-lint— Use this agent to lint a Figma file for common design issues — inconsistent spacing, orphan colors, non-standard type sizes, missing auto-layout, detached styles, and accessibility violations. Returnsnaksha:design-qa— Use this agent to run visual QA on a design implementation — checking responsive behavior across breakpoints, token/design system compliance, interactive states, and motion quality. Trigger after builnaksha:design-token-extractor— Use this agent to extract design tokens from CSS, SCSS, JavaScript, or Tailwind config files. Trigger when the user wants to document their token system, migrate tokens between formats, audit token conaksha:figma-creator— Use this agent to create visual designs directly in Figma using the Desktop Bridge. Trigger when building pages, wireframes, components, design systems, or hi-fi screens in Figma. Also trigger when th
Hooks (1)
hooks— PostToolUse, PreCompact, PreToolUse, SessionEnd, SessionStart, Stop, SubagentStop, UserPromptSubmit
About this listing
Naksha Studio is a community plugin on GitHub by Adityaraj0421, written as a Claude Code plugin that Grok Build installs. We install-checked it in Grok; we haven't run it in a live session or reviewed its code. When we installed it, Grok found 25 skills, 7 subagents, 1 hook. Its license is MIT. We checked commit f5275255d1c5. It's one of 143 listings in the Design category on GrokStacks.
Stacks Weekly: every new Grok Build and Codex plugin, every Tuesday.
One short email for GrokStacks and CodexStacks readers, with each new plugin's install line and what it ships. Subscribe and get the free starter list: 20 Grok Build plugins worth installing first.
You'll get a confirmation email first. Unsubscribe anytime.
Naksha Studio FAQ
How do I install Naksha Studio in Grok Build?
Run grok plugin install Adityaraj0421/naksha-studio --trust. We install-checked this command in Grok Build. We install this repo directly: Grok Build 1.0.62 can't install it through its own marketplace file. Then start a new Grok session, or press r in /plugins, to load it.
Is Naksha Studio an official Grok Build plugin?
No. Naksha Studio is a community plugin on GitHub by Adityaraj0421, not in xAI's official Grok Build marketplace. We checked that it installs and what Grok loads from it, but haven't run it in a live Grok session or reviewed its code.
What does Naksha Studio include?
According to what Grok loaded in our install check, Naksha Studio includes 25 skills, 7 subagents, 1 hook: design, ab-variants, accessibility-audit, brand-kit, brand-strategy, chart-design….
Details
- Type
- Plugin
- Category
- Design
- Source
- Community Claude Code plugin, installs in Grok
- License
- MIT
- Author
- Adityaraj0421
- Version
- 6.0.0
- Keywords
- accessibility, ai, claude-code, claude-code-plugin, component-library, data-visualization, design, design-system, email-template, figma, frontend, open-source
- Source repo
- https://github.com/Adityaraj0421/naksha-studio
- Checked commit
f5275255d1c5- Homepage
- https://github.com/Adityaraj0421/naksha-studio/releases/latest
- Checked by GrokStacks
- Install-checked in Grok Build on Oct 18, 2026; not run in a live session
Something wrong or missing? Submit or improve this listing. Marketplace listings also refresh automatically every night.
For maintainers: badge and embeds
Maintain Naksha Studio? Add the badge; it links to this page.
Markdown
[](https://grokstacks.com/p/naksha-studio/)HTML
<a href="https://grokstacks.com/p/naksha-studio/"><img src="https://grokstacks.com/badge.svg" alt="Listed on GrokStacks" width="164" height="28"></a>Embed card (static HTML and inline CSS, no JavaScript). Preview:
<a href="https://grokstacks.com/p/naksha-studio/" style="display:block;max-width:380px;box-sizing:border-box;padding:14px 16px;border:1px solid #2a2e3c;border-radius:12px;background:#0a0b0f;color:#e8eaf0;font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-decoration:none"><span style="display:block;font-size:16px;font-weight:700;color:#e8eaf0">Naksha Studio</span><span style="display:block;margin:2px 0 8px;font-size:12px;color:#9aa0b1">Community plugin for Grok Build · 25 skills, 7 subagents, 1 hook</span><span style="display:block;margin:0 0 10px;color:#c9cdd8">A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 30 roles, 70 commands, 16,000+…</span><span style="font-size:12px;font-weight:600;color:#7c9cff">View on GrokStacks →</span></a>Markdown summary
**[Naksha Studio on GrokStacks](https://grokstacks.com/p/naksha-studio/)**: Community plugin for Grok Build with 25 skills, 7 subagents, 1 hook. Install: `grok plugin install Adityaraj0421/naksha-studio --trust`More on badges, embeds and keeping your listing up to date: GrokStacks for plugin authors.
Also in Design
3dicon
One prompt in, a looping animated 3D icon out — with real transparency. A Claude Code skill.
3dviz Pro Max
Agent skill for creative 3D visualization: turn an idea into a Three.js/Blender scene worth exploring. Claude Code + Codex plugin, 223 recipes, 440 knowledge records, 22 proved kits, 37 runnable studies.
Adobe Premiere Pro MCP
Adobe Premiere Pro MCP. Tools for AI-driven video editing via MCP, for Codex, Claude, and other MCP clients.
Agent Sprite Forge
Agent Skill for generating 2D sprite sheets and map, transparent PNG frames, and animated GIFs from prompts.
Agent Storyboard
本地优先的 Agent 视频分镜工作台：让 Codex、Claude Code 通过 MCP 写分镜、生成图片/视频素材和配音，并自动回填。Local-first storyboard workbench for AI agents (Codex, Claude Code).
AI Business Skills
138 bilingual AI marketing skills (69 VN + 69 Global) for Claude Code, OpenCode, Codex, VS Code. Four role SOP packs — content, design, performance, leader ops — plus strategy, personal brand, AI avatar, dropshipping, design master, knowledge library. 4 regions (US/EU/SEA/LATAM) + Vietnam 2025-2026. Companion: opa-kit.