Prototyp · Vorschau: alle Server aus der offiziellen Registry, alle 30 Minuten synchronisiert. Mit Google anmelden, um Bewertungen zu schreiben.Prototyp · alle 30 Min. aktualisiert
PopNx MCPMCP-Server für alle, die KI nutzen · in einfachen Worten erklärt

Halo Ds

von Halo-design-systemVersion 0.6.0i★ 0iLäuft auf deinem Computer
Name in der Registryio.github.Halo-design-system/halo-ds

So installierst du es

What it does

Props, examples, design tokens and page blocks for the Halo React design system.

  • Connects Läuft auf deinem Computer
  • Account or key No key needed
  • Category Design, Bilder & Audio

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

3/3 Prüfungen bestanden · Läuft auf deinem Computer · ✓ Befehle geprüft am 14. Nov. 2026

Zuerst: Welche KI nutzt du?

Wähle deine App, dann erscheinen die Schritte unten.

Klappt mit Claude, aber erst etwas vorbereiten

Installiere zuerst Node.js auf deinem Computer (nur einmal) · Nur in der Claude-App für den Computer (Windows oder Mac), nicht im Web oder auf dem Handy

Von der KI installieren lassen

Kopiere diese Nachricht in einen Claude-Chat. Die KI prüft deinen Rechner, sagt dir, welche Datei sie ändert, und wartet jedes Mal auf dein OK.

Installiere bitte den MCP server Halo Ds für Claude auf diesem Rechner, in dieser Reihenfolge: 1) Prüfe Node.js mit node -v. Fehlt es, sag mir, dass ich es von https://nodejs.org/en/download installiere; installiere es nicht selbst. 2) Verwende nur diese Konfiguration (von PopNx MCP geprüft): { "mcpServers": { "halo-ds": { "command": "npx", "args": [ "-y", "halo-ds", "mcp" ] } } } 3) Nenne mir den vollständigen Pfad der Datei, die du änderst, oder den Befehl, den du ausführst, und warte auf mein OK. 4) Kein Schlüssel nötig. 5) Führe das Vereinbarte aus und prüfe, dass die Tools von Halo Ds wirklich erscheinen.

Diese Nachricht enthält keinen Schlüssel. Wird einer gebraucht, bittet dich die KI, ihn selbst in die Datei oder das Feld der App einzufügen.

  1. Node.js installieren (falls noch nicht vorhanden)

    Schon installiert? Zuerst prüfen · Öffne das Terminal, gib diesen Befehl ein und drücke Enter

    node -v
    • Eine Versionsnummer wie v26.13.1 = installiert, diesen Schritt überspringen
    • "command not found" (unter Windows "is not recognized") = noch nicht installiert, oder gerade installiert und das Terminal muss neu geöffnet werden
    So öffnest du das Terminal

    Mac: ⌘ + Leertaste drücken, Terminal eingeben, Enter

    Windows: Start öffnen, Windows PowerShell eingeben, dann Öffnen

    Noch nicht installiert: Öffne die offizielle Download-Seite, wähle die LTS-Version und den Klick-Installer: .pkg auf dem Mac · .msi unter Windows. Doppelklicken und bis zum Ende durchklicken. Kein curl-Befehl nötig

    Download-Seite von Node.js öffnen ↗

    Danach das Terminal schließen, neu öffnen und denselben Befehl erneut ausführen. Es muss eine Versionsnummer erscheinen: node -v

    Einmal installieren, gilt für alles, was Node.js braucht

  2. Einstellungsdatei der Claude-Desktop-App öffnen

    SettingsDeveloperEdit Config

  3. Diese Einstellungen einfügen und speichern

    {
      "mcpServers": {
        "halo-ds": {
          "command": "npx",
          "args": [
            "-y",
            "halo-ds",
            "mcp"
          ]
        }
      }
    }
  4. Claude beenden und neu öffnen

  5. Ausprobieren

    Nutze Halo Ds und sag mir, was du für mich tun kannst; zeig mir dann eine Sache

    ✓ Wenn Claude sagt, dass es Halo Ds nutzt, oder ein Werkzeug von Halo Ds in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

ChatGPT kann Halo Ds noch nicht verbinden

Halo Ds läuft auf deinem Computer, aber ChatGPT verbindet nur Server, die im Web laufen

Das kannst du stattdessen tun

A · Eine App nutzen, die Halo Ds verbinden kann

  • Installiere zuerst Node.js auf deinem Computer (nur einmal) · Nur in der Claude-App für den Computer (Windows oder Mac), nicht im Web oder auf dem Handy
  • Installiere zuerst Node.js auf deinem Computer (nur einmal)
  • Installiere zuerst Node.js auf deinem Computer (nur einmal)
  • Installiere zuerst Node.js auf deinem Computer (nur einmal)

B · Andere in Design, Bilder & Audio, die mit ChatGPT funktionieren

Aus den meistgenutzten derselben Kategorie, nur solche, die per Adresse ohne Schlüssel verbinden

Klappt mit Claude Code, aber erst etwas vorbereiten

Installiere zuerst Node.js auf deinem Computer (nur einmal)

Von der KI installieren lassen

Kopiere diese Nachricht in einen Claude Code-Chat. Die KI prüft deinen Rechner, sagt dir, welche Datei sie ändert, und wartet jedes Mal auf dein OK.

Installiere bitte den MCP server Halo Ds für Claude Code auf diesem Rechner, in dieser Reihenfolge: 1) Prüfe Node.js mit node -v. Fehlt es, sag mir, dass ich es von https://nodejs.org/en/download installiere; installiere es nicht selbst. 2) Verwende nur diese Konfiguration (von PopNx MCP geprüft): claude mcp add --scope user halo-ds -- npx -y halo-ds mcp 3) Nenne mir den vollständigen Pfad der Datei, die du änderst, oder den Befehl, den du ausführst, und warte auf mein OK. 4) Kein Schlüssel nötig. 5) Führe das Vereinbarte aus und prüfe, dass die Tools von Halo Ds wirklich erscheinen.

Diese Nachricht enthält keinen Schlüssel. Wird einer gebraucht, bittet dich die KI, ihn selbst in die Datei oder das Feld der App einzufügen.

  1. Node.js installieren (falls noch nicht vorhanden)

    Schon installiert? Zuerst prüfen · Öffne das Terminal, gib diesen Befehl ein und drücke Enter

    node -v
    • Eine Versionsnummer wie v26.13.1 = installiert, diesen Schritt überspringen
    • "command not found" (unter Windows "is not recognized") = noch nicht installiert, oder gerade installiert und das Terminal muss neu geöffnet werden
    So öffnest du das Terminal

    Mac: ⌘ + Leertaste drücken, Terminal eingeben, Enter

    Windows: Start öffnen, Windows PowerShell eingeben, dann Öffnen

    Noch nicht installiert: Öffne die offizielle Download-Seite, wähle die LTS-Version und den Klick-Installer: .pkg auf dem Mac · .msi unter Windows. Doppelklicken und bis zum Ende durchklicken. Kein curl-Befehl nötig

    Download-Seite von Node.js öffnen ↗

    Danach das Terminal schließen, neu öffnen und denselben Befehl erneut ausführen. Es muss eine Versionsnummer erscheinen: node -v

    Einmal installieren, gilt für alles, was Node.js braucht

  2. Terminal öffnen

    Mac: Command+Leertaste drücken und Terminal tippen · Windows: PowerShell öffnen

  3. Diesen Befehl einfügen und Enter drücken

    claude mcp add --scope user halo-ds -- npx -y halo-ds mcp
  4. /mcp in Claude Code eingeben

    Halo Ds sollte in der Liste als verbunden erscheinen

  5. Ausprobieren

    Nutze Halo Ds und sag mir, was du für mich tun kannst; zeig mir dann eine Sache

    ✓ Wenn Claude Code sagt, dass es Halo Ds nutzt, oder ein Werkzeug von Halo Ds in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit Cursor, aber erst etwas vorbereiten

Installiere zuerst Node.js auf deinem Computer (nur einmal)

Von der KI installieren lassen

Kopiere diese Nachricht in einen Cursor-Chat. Die KI prüft deinen Rechner, sagt dir, welche Datei sie ändert, und wartet jedes Mal auf dein OK.

Installiere bitte den MCP server Halo Ds für Cursor auf diesem Rechner, in dieser Reihenfolge: 1) Prüfe Node.js mit node -v. Fehlt es, sag mir, dass ich es von https://nodejs.org/en/download installiere; installiere es nicht selbst. 2) Verwende nur diese Konfiguration (von PopNx MCP geprüft): { "mcpServers": { "halo-ds": { "command": "npx", "args": [ "-y", "halo-ds", "mcp" ] } } } 3) Nenne mir den vollständigen Pfad der Datei, die du änderst, oder den Befehl, den du ausführst, und warte auf mein OK. 4) Kein Schlüssel nötig. 5) Führe das Vereinbarte aus und prüfe, dass die Tools von Halo Ds wirklich erscheinen.

Diese Nachricht enthält keinen Schlüssel. Wird einer gebraucht, bittet dich die KI, ihn selbst in die Datei oder das Feld der App einzufügen.

  1. Node.js installieren (falls noch nicht vorhanden)

    Schon installiert? Zuerst prüfen · Öffne das Terminal, gib diesen Befehl ein und drücke Enter

    node -v
    • Eine Versionsnummer wie v26.13.1 = installiert, diesen Schritt überspringen
    • "command not found" (unter Windows "is not recognized") = noch nicht installiert, oder gerade installiert und das Terminal muss neu geöffnet werden
    So öffnest du das Terminal

    Mac: ⌘ + Leertaste drücken, Terminal eingeben, Enter

    Windows: Start öffnen, Windows PowerShell eingeben, dann Öffnen

    Noch nicht installiert: Öffne die offizielle Download-Seite, wähle die LTS-Version und den Klick-Installer: .pkg auf dem Mac · .msi unter Windows. Doppelklicken und bis zum Ende durchklicken. Kein curl-Befehl nötig

    Download-Seite von Node.js öffnen ↗

    Danach das Terminal schließen, neu öffnen und denselben Befehl erneut ausführen. Es muss eine Versionsnummer erscheinen: node -v

    Einmal installieren, gilt für alles, was Node.js braucht

  2. Mit diesem Button Cursor öffnen

    In Cursor öffnen

    Cursor fragt nach einer Bestätigung; klicke Install

  3. KI-Chat in Cursor im Agent-Modus öffnen

  4. Ausprobieren

    Nutze Halo Ds und sag mir, was du für mich tun kannst; zeig mir dann eine Sache

    ✓ Wenn Cursor sagt, dass es Halo Ds nutzt, oder ein Werkzeug von Halo Ds in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Cursor abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit VS Code, aber erst etwas vorbereiten

Installiere zuerst Node.js auf deinem Computer (nur einmal)

Von der KI installieren lassen

Kopiere diese Nachricht in einen VS Code-Chat. Die KI prüft deinen Rechner, sagt dir, welche Datei sie ändert, und wartet jedes Mal auf dein OK.

Installiere bitte den MCP server Halo Ds für VS Code auf diesem Rechner, in dieser Reihenfolge: 1) Prüfe Node.js mit node -v. Fehlt es, sag mir, dass ich es von https://nodejs.org/en/download installiere; installiere es nicht selbst. 2) Verwende nur diese Konfiguration (von PopNx MCP geprüft): { "servers": { "halo-ds": { "type": "stdio", "command": "npx", "args": [ "-y", "halo-ds", "mcp" ] } } } 3) Nenne mir den vollständigen Pfad der Datei, die du änderst, oder den Befehl, den du ausführst, und warte auf mein OK. 4) Kein Schlüssel nötig. 5) Führe das Vereinbarte aus und prüfe, dass die Tools von Halo Ds wirklich erscheinen.

Diese Nachricht enthält keinen Schlüssel. Wird einer gebraucht, bittet dich die KI, ihn selbst in die Datei oder das Feld der App einzufügen.

  1. Node.js installieren (falls noch nicht vorhanden)

    Schon installiert? Zuerst prüfen · Öffne das Terminal, gib diesen Befehl ein und drücke Enter

    node -v
    • Eine Versionsnummer wie v26.13.1 = installiert, diesen Schritt überspringen
    • "command not found" (unter Windows "is not recognized") = noch nicht installiert, oder gerade installiert und das Terminal muss neu geöffnet werden
    So öffnest du das Terminal

    Mac: ⌘ + Leertaste drücken, Terminal eingeben, Enter

    Windows: Start öffnen, Windows PowerShell eingeben, dann Öffnen

    Noch nicht installiert: Öffne die offizielle Download-Seite, wähle die LTS-Version und den Klick-Installer: .pkg auf dem Mac · .msi unter Windows. Doppelklicken und bis zum Ende durchklicken. Kein curl-Befehl nötig

    Download-Seite von Node.js öffnen ↗

    Danach das Terminal schließen, neu öffnen und denselben Befehl erneut ausführen. Es muss eine Versionsnummer erscheinen: node -v

    Einmal installieren, gilt für alles, was Node.js braucht

  2. Mit diesem Button VS Code öffnen

    In VS Code öffnen

    VS Code fragt nach einer Bestätigung; klicke Install

  3. KI-Chat in VS Code im Agent-Modus öffnen

  4. Ausprobieren

    Nutze Halo Ds und sag mir, was du für mich tun kannst; zeig mir dann eine Sache

    ✓ Wenn VS Code sagt, dass es Halo Ds nutzt, oder ein Werkzeug von Halo Ds in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von VS Code abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Andere Apps mit MCP, etwa Windsurf, Zed oder Gemini CLI, fügen Server unterschiedlich hinzu. Sieh in der App-Liste nach

Alle Apps mit MCP ansehen →

JSON-Einstellungen stehen unten unter „Für Entwickler“

Hängst du fest? Frag Leute, die Halo Ds nutzen💬 Diskussion →
Für Entwickler: Terminal-Befehle und JSON-Einstellungen

Auf deinem Computer installiert

Claude Code

claude mcp add --scope user halo-ds -- npx -y halo-ds mcp

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "halo-ds": {
      "command": "npx",
      "args": [
        "-y",
        "halo-ds",
        "mcp"
      ]
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "halo-ds": {
      "command": "npx",
      "args": [
        "-y",
        "halo-ds",
        "mcp"
      ]
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "halo-ds": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "halo-ds",
        "mcp"
      ]
    }
  }
}

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Auf einen Blick

Downloads pro Wochei
394/Wo.
Verbindung
Läuft auf deinem Computer
Neueste Versioni
0.6.0
In der Registry veröffentlichti
14. Nov. 2026
Code zuletzt geänderti
15. Nov. 2026
Entwickler
Halo-design-system
Pakete
npm: halo-ds
Registry-Status
Aktiv

Welche Apps ihn nutzen können

Basierend darauf, wie sich dieser Server verbindet, und auf der eigenen Doku jeder App, geprüft am 10. Nov. 2026.

Laufen auf deinem Computer in

ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast

Alle Apps, mit Vor- und Nachteilen →

Was er kann

Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 16. Nov. 2026

  • ✓ Bestanden

    Entwickler passt zum Repo

    Der Registry-Name wurde mit dem GitHub-Konto Halo-design-system bestätigt, dem das Repo gehört

  • ✓ Bestanden

    Wird noch gepflegt

    Code zuletzt geändert: gestern

  • ✓ Bestanden

    Hat eine Lizenz

    Nutzt MIT

  • – Nicht zutreffend

    Endpunkt antwortet

    Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet

  • – Nicht zutreffend

    Anmeldung mit OAuth

    Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen

  • … Noch nicht geprüft

    Keine versteckten Anweisungen in Tool-Beschreibungen

    Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen

Veröffentlichte Schwachstellen (OSV.dev)

Keine Einträge auf OSV.dev für halo-ds@0.6.0

Prüft nur diese Paketversion, nicht alle Abhängigkeiten · geprüft 15. Nov. 2026

Was wir prüfen → · JSON

Entwickler: neue Prüfung anfordern oder falsche Angaben melden

Diskussion

Fragen, Tipps teilen oder melden, dass etwas nicht geht. Sortiert nach „hilfreich“.

Noch keine Beiträge. Stell die erste Frage oder teile einen Tipp.

Beiträge hier stammen von Nutzern, nicht vom PopNx-Team.

Anmelden, um zu posten

Nutzerbewertungen

Noch keine Bewertungen

Anmelden, um eine Bewertung zu schreiben

Im Vergleich mit anderen in Design, Bilder & Audioi

  • Mehr Sterne als 0 % der anderen 3100 Server in dieser Kategorie
  • Neuer in der Registry veröffentlicht als 94 % der anderen 3100 Server in dieser Kategorie
  • Basischecks gleich gut wie oder besser als bei 100 % der anderen 3100 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist Halo Ds sicher?

Er hat 3 von 3 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.

Läuft er auf meinem Computer oder in der Cloud?

Er läuft auf deinem Computer. Deine KI-App startet ihn bei Bedarf, und die Daten laufen nicht über die Server des Entwicklers (außer der Server ruft selbst einen Onlinedienst auf).

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt gestern geändert, und die neueste Version (0.6.0) kam vorgestern in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Node.js auf deinem Computer.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Pascal 3D Editor, Figma MCP Server, Remocn: Remotion MCP server, Harness, ChatCut

Ähnliche Alternativen

Gleiche Kategorie, andere Entwickler, Befehle bereits geprüft. Offizielle zuerst, dann nach Sternen.

So liest du eine Karte:↓ Downloads pro Wochei★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

Pascal 3D Editor

Create, inspect, validate, and save editable 3D building scenes with Pascal's MCP server.

von pascalorgWeit verbreitet↓ 1037/Wo.★ 25.518 Sterne des ganzen ReposAktualisiert vor 3 Tagen

Computer oder Cloud✓ vom Dienst · pascal.app

Figma MCP Server

The Figma MCP server brings Figma design context directly into your AI workflow.

von figmaWeit verbreitet★ 2193Aktualisiert vor 13 Monaten

Läuft in der Cloud✓ vom Dienst · mcp.figma.com

Remocn: Remotion MCP server

Hosted MCP for Remotion videos: search Remocn components, read docs, plan a video, preview it.

von RemocnWachsend★ 1726Aktualisiert vor 6 Tagen

Läuft in der Cloud✓ vom Dienst · remocn.dev

Harness

Start Claude Code and Codex agents the person can watch, wait for them and read their answers.

von autonomous-aiWachsend↓ 109/Wo.★ 1490Aktualisiert vor 28 Tagen

Läuft auf deinem Computer✓ harness.autonomous.ai

ChatCut

AI video editor for agents: cut footage, add captions and motion graphics, export editable edits.

von ChatCut-IncWachsend★ 1041Aktualisiert vor 17 Tagen

Läuft in der Cloud✓ vom Dienst · chatcut.io
  • Pascal 3D Editor — In der Cloud oder auf deinem Rechner · Kein Schlüssel nötig
  • Figma MCP Server — Läuft in der Cloud, keine Installation · Kein Schlüssel nötig · Im Verzeichnis von Claude
  • Remocn: Remotion MCP server — Läuft in der Cloud, keine Installation · Kein Schlüssel nötig
  • Harness — Wird auf deinem Rechner installiert · Kein Schlüssel nötig
  • ChatCut — Läuft in der Cloud, keine Installation · Kein Schlüssel nötig

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

Halo Design System

An open-source design system for designers and developers: a Figma library and a React component library built from the same design tokens, with light and dark mode.

📖 Website and docs: https://halo-design-system.github.io/Halo-design-system/

🧪 Component playground (Storybook): https://halo-design-system.github.io/Halo-design-system/storybook/

  • 56 components in Figma and React, with 2,125 Figma variants
  • 288 design tokens and 42 text styles, in light and dark
  • 1,512 icons, 100 illustrations, 3,719 emojis, 271 flags and 1,489 brand logos
  • 8 ready-made blocks and 7 example apps you can click through on the site
  • An MCP server, a CLI and a Claude Code plugin, so AI assistants build with Halo correctly

Free and open source under the MIT licence. Current version: 0.5.0 on npm.

Packages

PackageDescription
@halo-ds/tokensDesign tokens as CSS variables (light + dark), JSON and JS, generated from Figma
@halo-ds/reactReact components
halo-dsCLI and MCP server: npx halo-ds init, theme, add, docs and mcp
figma-pluginFigma plugin: search every component and place it on the canvas
halo-ds pluginClaude Code plugin: skills to build, review, theme and migrate UI
siteThe website: docs, components, foundations and the live example apps
docsStorybook: live documentation and component playground

Using Halo

npx halo-ds init

This installs Halo and asks for the mode and a brand colour. Or install it yourself:

npm install @halo-ds/react

That is all the setup: the styles, the design tokens and the Geist font load by themselves when you use a component.

import { Button } from '@halo-ds/react';

Switch themes with the data-theme attribute on : light (default), dark, or system (follows the OS).

Every token is a CSS variable starting with --halo-, so your own styles can use them too:

.card {

background: var(--halo-surface-primary); color: var(--halo-text-primary); padding: var(--halo-spacing-md); border-radius: var(--halo-radius-sm); }

Make it yours
  • Quick: run npx halo-ds theme "#2F6BFF" with your brand colour, or pick one on the website. It sets your brand colour in light and dark. No rebuild needed.
  • Full: change the variables in your copy of the Figma file, export them, and rebuild the tokens so design and code match.

The Theming page walks through both.

Use it with AI assistants

Add the MCP server so your assistant knows every component's props, examples and rules:

claude mcp add halo -- npx -y halo-ds mcp

Setup for Cursor, VS Code, Windsurf and others: https://halo-design-system.github.io/Halo-design-system/docs/ai

Working on Halo

Requirements: Node.js 22.12+ and pnpm (npm install -g pnpm). The project pins its own Node 24 runtime, which pnpm downloads automatically.

pnpm install     # install dependencies

pnpm dev # build tokens and start Storybook at http://localhost:6006 pnpm build # build every package pnpm typecheck # type-check every package

Project structure
packages/

tokens/ figma/ ← Figma variable exports (source of truth) scripts/build.mjs → dist/tokens.css, tokens.json, index.js react/ src/ ← components cli/ the halo-ds CLI and MCP server figma-plugin/ plugins/ halo-ds/ the Claude Code plugin apps/ site/ the website, with the live example apps in src/live docs/ Storybook (foundations pages + component stories) video/ the launch video (Remotion) docs/ design notes (e.g. dark-mode mapping)

Design → code workflow
  1. Design the component in Figma using Halo variables (never raw hex values).
  2. Build it in packages/react/src/components/ / using the matching CSS variables.
  3. Add a .stories.tsx so it appears in Storybook.
  4. Review it in Storybook in both light and dark mode.

See CONTRIBUTING.md for details.

License

MIT. The Figma library also includes emojis, icons, flags and brand logos from other open-source projects; see THIRD_PARTY_NOTICES.md for their licences and required credits.