/design-tutorial

name: design-tutorial
description: Interactive guided tour of Naksha — learn commands through real exercises, discover workflows, and get oriented in under 10 minutes
allowed-tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep", "mcp__*"]
triggers:
  - tutorial
  - getting started
  - learn design studio
  - how do I use
  - what can you do
  - help me get started
  - show me what you can do
  - first time
  - new user
  - onboarding
arguments: "$ARGUMENTS"

/design-tutorial

Interactive guided tour of Naksha. Choose a track below and complete a real exercise — you'll produce actual output by the end.

**Usage:** `/design-tutorial` or `/design-tutorial <track>`

**Tracks:**

• `/design-tutorial quick-start` — 5-minute overview: run 3 commands, see what each produces
• `/design-tutorial ui` — Build a UI component from scratch → token extraction → developer handoff
• `/design-tutorial figma` — Create a component in Figma, add responsive variants, generate prototype
• `/design-tutorial social` — Design a post, plan a campaign, build a performance dashboard
• `/design-tutorial email` — Build a welcome email template and a 3-email onboarding sequence
• `/design-tutorial data-viz` — Design a bar chart, then build a full analytics dashboard
• `/design-tutorial ai-visual-gen` — Generate image prompts, video briefs, and moodboards
• `/design-tutorial print-pdf` — Build a print layout, PDF report, and run a preflight audit
• `/design-tutorial conversational` — Design a chatbot UI, voice interface, and pipeline chain
• `/design-tutorial spatial` — Build a visionOS spec, AR overlay, and audit a competitor
• `/design-tutorial compliance` — Generate GDPR consent flow, HIPAA audit, and set up project memory
• `/design-tutorial full` — Complete tour: all wings, all workflows (~45 min)

---

Step 1: Detect Track

Parse `$ARGUMENTS`:

• If empty → show **Welcome Screen** (step 2A)
• If matches a track name → jump to that track's exercise (step 3)
• If unclear → show Welcome Screen

---

Step 2A: Welcome Screen

If no track is given, display this orientation:

╔══════════════════════════════════════════════════════════════════╗
║                    Welcome to Naksha                      ║
║                         v4.8.0 · 60 commands                    ║
╚══════════════════════════════════════════════════════════════════╝

Naksha assembles specialist roles for any design task.
You give a goal. The right experts activate automatically.

━━━ What it can do ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  UI & Web Design          /design /design-system /brand-kit
  Figma-Native             /figma-create /figma-responsive /figma-prototype
  Design QA                /design-review /ux-audit /design-handoff
  Social Media             /social-content /social-campaign /social-analytics
  Email                    /email-template /email-campaign
  Data Visualization       /chart-design /dashboard-layout
  Framework Code           /design-framework (React/Vue/Svelte/Next.js/Astro)
  Templates                /design-template (10 production-ready layouts)
  AI Visual Gen            /gen-image /gen-video /gen-audio /gen-moodboard /prompt-refine
  Print / PDF              /pdf-report /print-layout /print-audit
  Frontier Wings           /design-chatbot /design-voice-ui /design-spatial /design-ar-overlay
                           /design-gdpr /design-compliance
  Memory & Pipelines       /naksha-init /naksha-status /pipeline /design-compare /competitive-audit

━━━ Choose a learning track ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  1. quick-start   5 min  See 3 commands in action right now
  2. ui           15 min  Build a component, extract tokens, handoff to dev
  3. figma        15 min  Create in Figma, add responsive variants, prototype
  4. social       15 min  Post design → campaign → analytics dashboard
  5. email        15 min  Welcome template → onboarding sequence
  6. data-viz     15 min  Chart design → full dashboard
  7. ai-visual-gen  15 min  Generate images, video briefs, audio specs, moodboards
  8. print-pdf      15 min  Build a print layout, PDF report, preflight audit
  9. full           45 min  Complete tour: all wings, all workflows (~45 min)
 10. conversational 15 min  Chatbot UI → voice interface → pipeline chaining
 11. spatial        15 min  visionOS spec → AR overlay → competitive audit
 12. compliance     15 min  GDPR consent → HIPAA audit → project memory

Reply with a number or track name to begin.

---

Step 3: Track Exercises

TRACK: quick-start

**Goal:** Run 3 commands back-to-back. See what Naksha produces.

---

**Exercise 1 of 3 — Design a UI Component**

Run this command now (copy it exactly):

/design a primary button with hover, focus, and disabled states

> **What to watch for:** Notice how the response assembles a team (UI Designer + Accessibility Auditor), produces semantic HTML with CSS custom properties, and includes WCAG contrast ratios. This is one command doing what would take a designer + developer 20 minutes.

Once you see the output, continue to Exercise 2.

---

**Exercise 2 of 3 — Review What You Just Built**

Take the HTML from Exercise 1 and run:

/design-review [paste the HTML output here]

> **What to watch for:** The Design Critique role evaluates against heuristics, the Accessibility Auditor runs WCAG checks. You get a scored report with specific fixes. This is the QA loop — build, review, iterate.

---

**Exercise 3 of 3 — Generate a Framework Component**

Run:

/design-framework react-tailwind [paste the HTML from Exercise 1]

> **What to watch for:** The Framework Specialist converts generic HTML/CSS to idiomatic React + Tailwind with TypeScript interfaces, proper prop types, and composable component structure. This is the design-to-code pipeline in one command.

---

**Quick-start complete.** You've seen:

• `/design` → HTML/CSS with specialist knowledge
• `/design-review` → scored quality audit
• `/desig