adityaraj0421

naksha-studio

<div align="center"> # 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.* <br> [](LICENSE) [](https://claude.ai/claude-code) []() []() []() []() [](https://github.com/autohandai/code-cli) []() []() []() [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 — 62 commands, agents, hooks) ```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 ``` > **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 <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"> **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> </tr> <tr> <td align="center"> **Email Copywriter** Subject Lines </td> <td align="center"> **Data Viz Designer** Charts </td> <td align="center"> **Dashboard Architect** Layouts </td> <td align="center"> **Presentation Designer** Decks </td> <td align="center"> **Brand Strategist** Positioning </td> <td align="center"> **Illustration Director** Icons & Art </td> <td align="center"> **Video/Content Producer** Scripts </td> </tr> <tr> <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" colspan="3"> </td> </tr> <tr> <td align="center"> **Print Designer** Print & PDF </td> </tr> <tr> <td align="center" colspan="7"> _The skill loads only the references your task actually needs_ </td> </tr> </table> --- ## 🎯 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 <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 | <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-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 together. Each command suggests relevant next steps: | Workflow | Pipeline | |----------|----------| | Design from scratch | `/design` → `/design-review` → `/design-system` → `/figma-create` | | Figma-native | `/figma-create` → `/ux-audit` → `/figma-prototype` → `/figma-responsive` | | Design-to-code | `/figma` → `/design-review` → `/figma-sync` | | Brand setup | `/brand-kit` → `/figma-create` → `/design-handoff` | | Stakeholder review | `/figma-create` → `/design-present` → `/ab-variants` | | Full product sprint | `/design-sprint` → `/figma-create` → `/figma-prototype` → `/design-present` | | Social media launch | `/social-campaign` → `/social-content` → `/social-analytics` | | Social content creation | `/brand-kit` → `/social-content` → `/ab-variants` | | Design-to-React | `/design` → `/design-framework react-tailwind` → `/design-review` | | Design-to-Next.js | `/design` → `/design-framework nextjs` → `/figma-sync` | | Email launch sequence | `/brand-kit` → `/email-template` → `/email-campaign` | | Email + social campaign | `/email-campaign` → `/social-campaign` → `/social-analytics` | | Template to production | `/design-template` → `/design-framework react-tailwind` → `/design-system` | | Template to Figma | `/design-template` → `/figma-create` → `/component-docs` | | Data viz pipeline | `/dashboard-layout` → `/chart-design` → `/design-framework` | | Full analytics build | `/brand-kit` → `/dashboard-layout` → `/chart-design` → `/design-handoff` | | First-time user | `/design-tutorial quick-start` → `/design-tutorial <track>` → `/design <task>` | | Full design system | `/brand-kit` → `/figma-component-library` → `/design-handoff` → `/design-framework` | | Brand launch | `/brand-strategy` → `/brand-kit` → `/illustration-system` → `/social-content` | | Pitch deck | `/brand-strategy` → `/presentation-design` → `/design-present` | | Motion system | `/design-system` → `/motion-design` → `/design-review` | | Video + social | `/video-script` → `/social-content` → `/social-campaign` | | Full identity system | `/brand-strategy` → `/brand-kit` → `/illustration-system` → `/figma-component-library` | | Project setup | `/naksha-init` → `/brand-kit` → `/design-system` → `/design` | | Pre-launch pipeline | `/pipeline run launch-prep` | | Competitor research | `/competitive-audit` → `/design-compare` → `/design` | | Chatbot + voice | `/design-chatbot` → `/design-voice-ui` → `/design-system` | | Spatial app | `/design-spatial` → `/design-ar-overlay` → `/design-system` | | GDPR + compliance | `/design-gdpr` → `/design-compliance --regulation ada` | | Design quality gate | `/design` → `/design-score` → `/design-review` | | Plugin health check | `/naksha-doctor` → `/naksha-doctor --fix` | --- ## 🚦 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: ```bash 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:** ```bash node scripts/design-lint.js src/**/*.html src/**/*.css ``` **Configure** via `.design-lint.json` in your repo root (copy from `.design-lint.json.example`): ```json { "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:** | Command | What It Does | |---------|-------------| | `/naksha-init` | Interactive wizard — sets brand color, font, voice, framework, token format | | `/naksha-browse <url>` | Capture live site patterns (layout, type, color, UX) and store as `browser_findings` | | `/naksha-remember <constraint>` | Persist constraints (`grid is 8px`, `no dark mode`, `WCAG AA required`) or component patterns | 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 | Agent | What It Does | Runs In | |-------|-------------|---------| | **accessibility-auditor** | Comprehensive WCAG AA compliance audit with specific code fixes | Background | | **design-qa** | Visual QA at 3 breakpoints, token compliance scoring, interaction state check | Background | | **figma-creator** | Creates pages, frames, components, and styles directly in Figma via Desktop Bridge | Foreground | | **design-critique** | Automated UX heuristic review — Nielsen's 10 heuristics, visual audit, interaction states + 4-dimension scoring | Foreground | | **design-lint** | Scans Figma files for orphan colors, non-standard spacing, low contrast, missing auto-layout (haiku model) | Foreground | | **design-token-extractor** | Extracts design tokens from CSS/Figma files — color, typography, spacing, shadows (haiku model) | Background | | **design-score** | Quantitative design scorer — derives Accessibility, Usability, Visual Quality, Token Compliance dimensions | Foreground | 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: | Detects | How | |---------|-----| | CSS Framework | Tailwind, PostCSS, Bootstrap | | JS Framework | React, Vue, Svelte, Next.js, Nuxt, Angular, Astro, Remix, SolidJS | | TypeScript | `tsconfig.json` | | Build Tool | Vite, Webpack, Turborepo | | CSS-in-JS | styled-components, Emotion, vanilla-extract | | Component Library | Radix UI, Chakra, MUI, Mantine, shadcn/ui | | Design Tokens | `.tokens.json`, `tokens.css`, Style Dictionary | | Figma | `.figmarc`, Code Connect files | | Deployment | `firebase.json` | | Documentation | `.storybook/` directory | Recommendations adapt to match your stack — no manual configuration needed. --- ## ⚙️ Configuration Create `skills/design/settings.local.md` (gitignored) to set defaults: ```yaml 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/ # 62 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 ``` <details> <summary><b>Design knowledge breakdown (15,000+ raw lines)</b></summary> | File | Lines | Covers | |------|-------|--------| | **figma-creation.md** | **693** | **Figma Desktop Bridge API, async patterns, auto-layout, component sets, paint/text styles, variables, wireframe patterns, annotations, screenshot validation** | | design-system-lead.md | 427 | 3-tier tokens, theming, dark mode, Figma paint/text style creation, component sets | | motion-designer.md | 360 | Timing, easing functions, transitions, micro-interactions, reduced motion | | **design-lint.md** | **335** | **6 lint rule categories, orphan colors, contrast, non-standard spacing, auto-layout quality, component hygiene, scored reports** | | **design-sprint.md** | **327** | **5-phase sprint: Understand, Diverge, Decide, Prototype, Validate — problem framing, ideation, decision matrix, test plans** | | **site-to-figma.md** | **310** | **Website capture via Playwright, style extraction, Figma recreation as auto-layout frames with Paint/Text Styles** | | **brand-kit.md** | **301** | **HSL shade generation, secondary color derivation, type scale, spacing scale, CSS/Tailwind/JSON/Figma outputs** | | **figma-responsive.md** | **298** | **Responsive variant generation, layout analysis, breakpoint adaptation, grid reflow, sidebar collapse** | | **design-handoff.md** | **278** | **Developer handoff docs, token maps, spacing specs, component APIs, CSS/Tailwind/TypeScript exports** | | SKILL.md | 300 | Design Manager orchestration, team assembly, workflow phases, output formats | | **design-critique.md** | **263** | **UX heuristic review, Nielsen's 10 heuristics, visual audit, interaction states, critique reporting** | | **component-docs.md** | **262** | **Auto-generated Storybook-style docs, prop tables, variant grids, usage guidelines, code examples** | | **figma-prototype.md** | **258** | **Prototype connections, interactive element detection, transition presets, flow specification** | | **figma-sync.md** | **252** | **Design-code drift detection, token comparison, typography/spacing sync, patch generation** | | **ab-variants.md** | **248** | **A/B test variant generation, layout/CTA/copy/color changes, testing recommendations** | | figma-workflow.md | 246 | Figma MCP tools, design-to-code, Figma-native creation workflow | | ui-designer.md | 243 | Color theory, type scale, grid, components, responsive patterns | | ux-designer.md | 239 | User flows, IA, wireframing, interaction design, usability | | **design-present.md** | **233** | **Interactive HTML presentations, keyboard nav, annotations, walkthrough/pitch/case-study types** | | content-designer.md | 229 | Microcopy, error formulas, empty states, tone, number formatting | | ux-audit.md | 219 | Figma file compliance auditing, brief parsing, structural/style/component checks | | ux-researcher.md | 207 | Nielsen's heuristics, WCAG AA checklist, mental models, edge cases | | deployment.md | 198 | Preview server, Firebase Hosting, image/CSS/font optimization | | figma-create.md | 150 | Create designs in Figma command — pages, wireframes, components, design systems | | figma-creator.md | 142 | Figma creation specialist agent — layout building, component creation, validation | | design.md (command) | 107 | Full design workflow — team assembly, creative direction, implementation, quality review | | figma.md (command) | 108 | Figma-to-code workflow — analysis, layout mapping, comparison, refinement | | design-review.md (cmd) | 89 | 5-point quality audit — accessibility, usability, visual, content, motion | | design-system.md (cmd) | 84 | Token generation, extraction, auditing — CSS variables, Tailwind, JSON | | product-designer.md | 140 | Feature scoping, user outcomes, business alignment, design patterns | | design-qa.md | 127 | Visual QA at 3 breakpoints, token compliance, interaction states | | accessibility-auditor.md | 105 | WCAG AA compliance, color contrast, semantic HTML, keyboard nav | </details> --- ## 🛠 Tech Stack Defaults | Category | Default | Why | |----------|---------|-----| | Styling | Tailwind CSS | Utility-first, rapid iteration | | Icons | Lucide | Clean, consistent, tree-shakeable | | Fonts | Inter | Optimized for UI, great readability | | Charts | Chart.js / SVG | Lightweight, no heavy deps | | Animations | CSS transitions | No JS libraries for simple motion | | Preview | Claude Preview MCP | Live results in your editor | | Deployment | Firebase Hosting | One-command deploy | All defaults adapt when the plugin detects your project uses a different stack. --- ### Quality check Run all quality gates locally: ```bash 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 ```bash 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](https://claude.ai/claude-code) CLI - **Optional MCP servers** for Figma + Preview capabilities — see [MCP Setup Guide](MCP-SETUP.md) --- <div align="center"> **Built with Claude Code** [Report Issues](https://github.com/Adityaraj0421/naksha-studio/issues) · [Changelog](CHANGELOG.md) · [MIT License](LICENSE) </div>