登录 开始使用

在你的模型里
使用 8pt

8pt CLI 和 MCP 把全部组件、模板、主题、图标和 Skill 交给你的模型。在终端、Claude Code、Codex、Cursor、Trae 里说需求，它自己去库里找。

获取 API Key接入文档

安装与登录

  1. 01

    全局安装一次

    npm i -g @8pt-dev/cli
8pt login
  2. 02

    锁定 8pt 审美

    在项目根目录运行，把 8pt 设计规范写进 AGENTS.md、CLAUDE.md、Cursor 和 Copilot 规则：模型做任何界面都先查 8pt，只用 8pt 的模板、组件和主题。

    8pt init
8pt install-skill
  3. 03

    开始取用

    搜索并把组件装进项目，源码和接入提示词放在 components/8pt/<slug>/。

    8pt search "定价切换"
8pt add pricing-toggle

包名是 @8pt-dev/cli，命令是 8pt；不想全局安装可以用 npx @8pt-dev/cli <命令>。8pt login 会打开浏览器创建 API Key 并保存到本机。CI 或脚本里跳过登录：用 --api-key <key> 或环境变量 API_KEY_8PT。

接入 Claude Code

  1. 01

    获取 API Key

    登录后在设置 › API Key 创建，Builder 方案可用。

  2. 02

    添加 8pt MCP

    把 <你的 API Key> 换成刚创建的 Key。

    claude mcp add --transport http 8pt https://8pt.dev/api/mcp \
  --header "Authorization: Bearer <你的 API Key>"
  3. 03

    锁定 8pt 审美

    在项目根目录运行一次，模型做任何界面都会先调用 design_ui，只用 8pt 的模板、组件和主题。

    npx @8pt-dev/cli init
  4. 04

    直接提需求

    说「做一个记账 App 官网」，模型会按 8pt 规范匹配模板和组件，并附上区块与组件的对照。

API Key 只保存在你的机器上，请勿提交到代码仓库。

接入 Codex

  1. 01

    获取 API Key

    登录后在设置 › API Key 创建，Builder 方案可用。

  2. 02

    添加 8pt MCP

    把 <你的 API Key> 换成刚创建的 Key。

    # ~/.codex/config.toml
# 先在终端设置：export EIGHTPT_API_KEY=<你的 API Key>
[mcp_servers.8pt]
url = "https://8pt.dev/api/mcp"
bearer_token_env_var = "EIGHTPT_API_KEY"
  3. 03

    锁定 8pt 审美

    在项目根目录运行一次，模型做任何界面都会先调用 design_ui，只用 8pt 的模板、组件和主题。

    npx @8pt-dev/cli init
  4. 04

    直接提需求

    说「做一个记账 App 官网」，模型会按 8pt 规范匹配模板和组件，并附上区块与组件的对照。

API Key 只保存在你的机器上，请勿提交到代码仓库。

接入 Cursor

  1. 01

    获取 API Key

    登录后在设置 › API Key 创建，Builder 方案可用。

  2. 02

    添加 8pt MCP

    把 <你的 API Key> 换成刚创建的 Key。

    // ~/.cursor/mcp.json
{
  "mcpServers": {
    "8pt": {
      "url": "https://8pt.dev/api/mcp",
      "headers": { "Authorization": "Bearer <你的 API Key>" }
    }
  }
}
  3. 03

    锁定 8pt 审美

    在项目根目录运行一次，模型做任何界面都会先调用 design_ui，只用 8pt 的模板、组件和主题。

    npx @8pt-dev/cli init
  4. 04

    直接提需求

    说「做一个记账 App 官网」，模型会按 8pt 规范匹配模板和组件，并附上区块与组件的对照。

API Key 只保存在你的机器上，请勿提交到代码仓库。

接入 Trae

  1. 01

    获取 API Key

    登录后在设置 › API Key 创建，Builder 方案可用。

  2. 02

    添加 8pt MCP

    把 <你的 API Key> 换成刚创建的 Key。

    // Trae → 设置 → MCP → 手动添加（JSON）
{
  "mcpServers": {
    "8pt": {
      "url": "https://8pt.dev/api/mcp",
      "headers": { "Authorization": "Bearer <你的 API Key>" }
    }
  }
}
  3. 03

    锁定 8pt 审美

    在项目根目录运行一次，模型做任何界面都会先调用 design_ui，只用 8pt 的模板、组件和主题。

    npx @8pt-dev/cli init
  4. 04

    直接提需求

    说「做一个记账 App 官网」，模型会按 8pt 规范匹配模板和组件，并附上区块与组件的对照。

API Key 只保存在你的机器上，请勿提交到代码仓库。

接入 其他客户端

  1. 01

    获取 API Key

    登录后在设置 › API Key 创建，Builder 方案可用。

  2. 02

    添加 8pt MCP

    把 <你的 API Key> 换成刚创建的 Key。

    // 任何支持 Streamable HTTP 的 MCP 客户端
{
  "name": "8pt",
  "transport": "http",
  "url": "https://8pt.dev/api/mcp",
  "headers": { "Authorization": "Bearer <你的 API Key>" }
}
  3. 03

    锁定 8pt 审美

    在项目根目录运行一次，模型做任何界面都会先调用 design_ui，只用 8pt 的模板、组件和主题。

    npx @8pt-dev/cli init
  4. 04

    直接提需求

    说「做一个记账 App 官网」，模型会按 8pt 规范匹配模板和组件，并附上区块与组件的对照。

API Key 只保存在你的机器上，请勿提交到代码仓库。

然后直接问你的模型

接入一次，8pt 的工具就会出现在模型的工具列表里。

design_ui

做界面前先调用：按需求返回设计规则、匹配的模板、组件和主题

search_components

按描述搜索组件，返回名称、分类和预览地址

get_component

取回组件的完整源码与适配提示词

list_templates

列出整页模板

get_template

取回模板源码

list_skills

列出可用 Skill 与权限

get_skill

取回 Skill 的全部文件

get_theme

取回主题变量

search_icons

按含义搜索图标并返回 SVG

你想做什么？

CLI 的常用命令。完整说明见文档。

找组件并安装

按描述搜索，把源码和接入提示词装进项目。

8pt add <slug>

安装 Skill

把 Skill 的全部文件写进 Claude、Codex、Cursor 的 skills 目录。

8pt skill <slug>

取模板

取回整页模板的搭建提示词和 HTML。

8pt template <slug>

用主题

取回主题的 CSS 变量，写进你的样式表。

8pt theme <slug> --out theme.css

找图标

按名称取回 SVG，统一 24px 和 currentColor。

8pt icons <名称>

锁定审美

把 8pt 设计规范写进项目规则，模型只用 8pt 的素材做界面。

8pt init

接入方式和每个工具的说明都写在MCP 文档里。CLI、MCP 和 API Key 需要 Builder 方案。