Setup

Setup

Hướng dẫn tích hợp 1thay Design System vào dự án của bạn — từ CSS đơn giản đến Figma MCP.

---

Cách 1: CSS CDN (nhanh nhất)

Copy file CSS chứa toàn bộ design tokens và components:

<link rel="stylesheet" href="https://docs.1thay.com/styles/custom.css" />

Sau đó dùng ngay CSS variables trong code:

.my-button {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--rounded-md);
  font-family: var(--font-body);
}

---

Cách 2: Astro + Starlight (docs site)

DùngAstro Starlight để tạo trang tài liệu như docs.1thay.com:

npm create astro@latest -- --template starlight
cd my-docs

Sau đó copy src/styles/custom.css từ repo 1thay vào project của bạn.

---

Cách 3: Figma MCP (designer)

Kết nối trực tiếp Figma với code qua MCP:

# Cài Figma MCP server
npm install -g figma-console-mcp

# Thêm vào .mcp.json trong project
{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"]
    }
  }
}

Cần Figma Personal Access Token + Figma Desktop Bridge plugin.

Sau khi kết nối, có thể:

• Lấy design tokens trực tiếp từ Figma
• Sync tokens sang code (CSS, Tailwind, DTCG)
• Tạo component từ Figma design

---

Cách 4: Full repo (contributor)

git clone https://github.com/kien-day/1thay.git
cd 1thay
npm install
npm run dev

Cấu trúc file tokens

src/
├── styles/
│   └── custom.css          ← Toàn bộ design tokens + components CSS
├── content/docs/
│   ├── foundation/         ← Introduction, tokens, grid, type, colors
│   ├── components/         ← 18 component pages
│   └── guides/             ← Brand, a11y, principles, style guide
└── public/
    ├── logo-icon.svg       ← Logo light mode
    └── logo-icon-white.svg ← Logo dark mode

Cập nhật logo

Chép đè file SVG trong public/:

• logo-icon.svg — logo cho light mode
• logo-icon-white.svg — logo cho dark mode