Halo Ds

Name: Halo Ds
Author: Halo-design-system

โดย Halo-design-systemรุ่น 0.5.0i★ 0iรันบนเครื่อง

ชื่อใน registryio.github.Halo-design-system/halo-ds

วิธีติดตั้ง

ใช้ทำอะไรได้

ยังไม่มีคำอธิบายภาษาไทย ดูข้อเท็จจริงด้านล่าง หรือเปิดคำอธิบายต้นฉบับจากผู้ทำ

ต่อแบบ ติดตั้งในเครื่อง
บัญชีหรือคีย์ ไม่ต้องใส่คีย์
หมวด ออกแบบ ภาพ และเสียง

คำอธิบายต้นฉบับจากผู้ทำ (อังกฤษ)

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

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ผลตรวจผ่าน 3/3 · ทำงานบนเครื่องคุณ · ✓ ตรวจคำสั่งแล้ว 13 พ.ย. 2569

ขั้นแรก: คุณใช้ AI ตัวไหน

Claudeเว็บ · แอป · มือถือChatGPTเว็บClaude CodeTerminalCursorโปรแกรมเขียนโค้ดVS Codeโปรแกรมเขียนโค้ดอื่น ๆโปรแกรมอื่น

เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง

ต่อกับ Claude ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว) · ใช้ได้เฉพาะแอป Claude บนคอม (Windows หรือ Mac) ไม่ใช่บนเว็บหรือมือถือ

ลง Node.js ในเครื่อง
ทำครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
เปิดหน้าดาวน์โหลด Node.js ↗
ทำแล้ว
เปิดไฟล์ตั้งค่าของแอป Claude บนคอม
SettingsDeveloperEdit Config
ทำแล้ว

วางค่าตั้งนี้แล้วบันทึกไฟล์

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

ทำแล้ว

ปิดแอป Claude แล้วเปิดใหม่
ทำแล้ว
ลองเลย
ใช้ Halo Ds บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Claude บอกว่ากำลังใช้ Halo Ds หรือมีชื่อเครื่องมือของ Halo Ds ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ChatGPT ยังต่อ Halo Ds ไม่ได้

Halo Ds ต้องติดตั้งในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะตัวที่ทำงานบนเว็บ

คุณทำแบบนี้แทนได้

ก · ใช้แอปที่ต่อ Halo Ds ได้

ดูขั้นตอนสำหรับ Claude →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว) · ใช้ได้เฉพาะแอป Claude บนคอม (Windows หรือ Mac) ไม่ใช่บนเว็บหรือมือถือ
ดูขั้นตอนสำหรับ Claude Code →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
ดูขั้นตอนสำหรับ Cursor →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
ดูขั้นตอนสำหรับ VS Code →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ข · ตัวอื่นในหมวด ออกแบบ ภาพ และเสียง ที่ต่อกับ ChatGPT ได้

เลือกจากตัวที่ใช้มากในหมวดเดียวกัน เฉพาะตัวที่ต่อด้วยที่อยู่ได้โดยไม่ต้องใส่คีย์

Pascal 3D Editor✓ ChatGPT
Semiotic✓ ChatGPT
TypeUI✓ ChatGPT

ต่อกับ Claude Code ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ลง Node.js ในเครื่อง
ทำครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
เปิดหน้าดาวน์โหลด Node.js ↗
ทำแล้ว
เปิด Terminal
Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell
ทำแล้ว
3
วางคำสั่งนี้แล้วกด Enter
```
claude mcp add --scope user halo-ds -- npx -y halo-ds mcp
```
ทำแล้ว
พิมพ์ /mcp ใน Claude Code
ต้องเห็น Halo Ds ในรายการและขึ้นว่าเชื่อมต่อแล้ว
ทำแล้ว
ลองเลย
ใช้ Halo Ds บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Claude Code บอกว่ากำลังใช้ Halo Ds หรือมีชื่อเครื่องมือของ Halo Ds ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ต่อกับ Cursor ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ลง Node.js ในเครื่อง
ทำครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
เปิดหน้าดาวน์โหลด Node.js ↗
ทำแล้ว
กดปุ่มนี้เพื่อเปิด Cursor
เปิดใน Cursor
Cursor จะถามยืนยันการติดตั้ง ให้กด Install
ทำแล้ว
เปิดแชตของ AI ใน Cursor โหมด Agent
ทำแล้ว
ลองเลย
ใช้ Halo Ds บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Cursor บอกว่ากำลังใช้ Halo Ds หรือมีชื่อเครื่องมือของ Halo Ds ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ VS Code ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ลง Node.js ในเครื่อง
ทำครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
เปิดหน้าดาวน์โหลด Node.js ↗
ทำแล้ว
กดปุ่มนี้เพื่อเปิด VS Code
เปิดใน VS Code
VS Code จะถามยืนยันการติดตั้ง ให้กด Install
ทำแล้ว
เปิดแชตของ AI ใน VS Code โหมด Agent
ทำแล้ว
ลองเลย
ใช้ Halo Ds บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า VS Code บอกว่ากำลังใช้ Halo Ds หรือมีชื่อเครื่องมือของ Halo Ds ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม

ดูโปรแกรมที่ใช้ MCP ทั้งหมด →

ค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง

ติดตรงไหน? ถามคนที่ใช้ Halo Ds อยู่💬 พูดคุย →

สำหรับคนเขียนโค้ด: คำสั่ง Terminal และค่าตั้ง JSON

ติดตั้งในเครื่อง

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"
      ]
    }
  }
}

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

สรุป

ดาว GitHub i: 0
ดาวน์โหลดต่อสัปดาห์i: 394/สัปดาห์
license i: MIT
การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
รุ่นล่าสุดi: 0.5.0
หมวดi: ออกแบบ ภาพ และเสียง
ส่งเข้า registryi: 8 พ.ย. 2569
แก้โค้ดล่าสุดi: 9 พ.ย. 2569
ผู้ทำ: Halo-design-system
แพ็กเกจ: npm: halo-ds
repo: Halo-design-system/Halo-design-system
สถานะใน registry: ใช้งานอยู่

ใช้กับโปรแกรมไหนได้

ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569

ติดตั้งบนเครื่องได้ใน

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

ดูโปรแกรมทั้งหมดพร้อมข้อดีข้อเสีย →

คู่มือที่เกี่ยวข้อง

เรื่องที่ 8เช็ก 5 ข้อก่อนติดตั้ง MCP ไม่ให้ข้อมูลรั่วใช้เวลาราว 2 นาทีต่อตัว ดูจากหน้าของตัวนั้นบนเว็บเรา และหน้าขออนุญาตของโปรแกรม AI ก่อนกดยอมอ่าน 4 นาที

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 14 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub Halo-design-system ซึ่งเป็นเจ้าของ repo
✓ ผ่าน
ยังมีคนดูแล
มีการแก้โค้ดล่าสุด 5 วันที่ผ่านมา
✓ ผ่าน
มีสัญญาอนุญาต (license)
ใช้ MIT
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

พูดคุย

ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์

ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย

ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx

เข้าสู่ระบบด้วย Google เพื่อโพสต์

รีวิวจากผู้ใช้

ยังไม่มีรีวิว

เข้าสู่ระบบด้วย Google เพื่อเขียนรีวิว

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

ดาวมากกว่า 0% ของอีก 3035 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 85% ของอีก 3035 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 3035 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Halo Ds ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 3 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด 5 วันที่ผ่านมา และส่งรุ่นล่าสุด (0.5.0) เข้า registry 6 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Figma Context MCP, AutoClip, Next AI Draw.io

ตัวอื่นในหมวดเดียวกัน

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Figma Context MCP

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

โดย GLipsใช้กันมาก↓ 152.1K/สัปดาห์★ 16.2Kอัปเดต 5 เดือนที่ผ่านมา

รันบนเครื่อง

ติดตั้ง

AutoClip

Clip long videos into short clips with covers and captions. Local CLI and MCP.

โดย zhouxiaokaใช้กันมาก↓ 205/สัปดาห์★ 10.4Kอัปเดต 17 วันที่ผ่านมา

รันบนเครื่อง

ติดตั้ง

Next AI Draw.io

draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand

โดย DayuanJiangใช้กันมาก↓ 21.7K/สัปดาห์★ 36.9K ดาวรวมทั้งรีโปอัปเดต เมื่อวาน

รันบนเครื่อง

ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

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

Package	Description
`@halo-ds/tokens`	Design tokens as CSS variables (light + dark), JSON and JS, generated from Figma
`@halo-ds/react`	React components
`halo-ds`	CLI and MCP server: `npx halo-ds init`, `theme`, `add`, `docs` and `mcp`
`figma-plugin`	Figma plugin: search every component and place it on the canvas
`halo-ds` plugin	Claude Code plugin: skills to build, review, theme and migrate UI
`site`	The website: docs, components, foundations and the live example apps
`docs`	Storybook: 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

Design the component in Figma using Halo variables (never raw hex values).
Build it in packages/react/src/components/ / using the matching CSS variables.
Add a .stories.tsx so it appears in Storybook.
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.

Halo Ds

ใช้ทำอะไรได้

ติดตั้ง

ลง Node.js ในเครื่อง

เปิดไฟล์ตั้งค่าของแอป Claude บนคอม

วางค่าตั้งนี้แล้วบันทึกไฟล์

ปิดแอป Claude แล้วเปิดใหม่

ลองเลย

คุณทำแบบนี้แทนได้

ลง Node.js ในเครื่อง

เปิด Terminal

วางคำสั่งนี้แล้วกด Enter

พิมพ์ /mcp ใน Claude Code

ลองเลย

ลง Node.js ในเครื่อง

กดปุ่มนี้เพื่อเปิด Cursor

เปิดแชตของ AI ใน Cursor โหมด Agent

ลองเลย

ลง Node.js ในเครื่อง

กดปุ่มนี้เพื่อเปิด VS Code

เปิดแชตของ AI ใน VS Code โหมด Agent

ลองเลย

ติดตั้งในเครื่อง

สรุป

ใช้กับโปรแกรมไหนได้

คู่มือที่เกี่ยวข้อง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

พูดคุย

รีวิวจากผู้ใช้

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

คำถามที่พบบ่อย

ตัวอื่นในหมวดเดียวกัน

Figma Context MCP

AutoClip

Next AI Draw.io

README จากผู้ทำ

Halo Design System

Packages

Using Halo

Make it yours

Use it with AI assistants

Working on Halo

Project structure

Design → code workflow

License