> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
> Use this file to discover all available pages before exploring further.

# CTOR

> 用於建置、除錯與部署 BRICKS 應用的 AI 代理 IDE

export const FeatureCard = ({ icon, title, description, href }) => (
  <a href={href} className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline hover:border-[#e2924b]/40 hover:shadow-lg hover:shadow-[#e2924b]/5 transition-all duration-200">
    <div className="flex items-center gap-3 mb-3">
      <span className="text-2xl">{icon}</span>
      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">{title}</h3>
    </div>
    <p className="text-sm text-gray-500 dark:text-gray-400 m-0 leading-relaxed">{description}</p>
  </a>
);

export const StepItem = ({ number, title, description, href, linkText }) => (
  <div className="flex gap-4">
    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[#e2924b] flex items-center justify-center">
      <span className="text-sm font-bold text-white">{number}</span>
    </div>
    <div className="pb-8">
      <h4 className="text-sm font-semibold text-gray-900 dark:text-white m-0">{title}</h4>
      <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 mb-1">{description}</p>
      {href && <a href={href} className="text-sm font-medium text-[#e2924b] hover:text-[#d4863f] no-underline">{linkText} →</a>}
    </div>
  </div>
);

<div className="max-w-5xl mx-auto px-6 py-16">
  <div className="mb-16">
    <div className="flex items-center gap-4 mb-6">
      <img src="https://mintcdn.com/bricks-207cc1f2/-Outo6kaDlAzpH-5/logo/icon-ctor.png?fit=max&auto=format&n=-Outo6kaDlAzpH-5&q=85&s=d07e1b9edda5184d1d70d67d05b8fc5e" alt="CTOR" className="w-16 h-16 rounded-2xl" width="100" height="100" data-path="logo/icon-ctor.png" />

      <div>
        <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white tracking-tight m-0">
          CTOR
        </h1>

        <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 border border-amber-200 dark:border-amber-800/40 mt-2">
          <span className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />

          預覽版
        </span>
      </div>
    </div>

    <p className="text-xl text-gray-600 dark:text-gray-300 font-medium mb-2">
      使用 AI 代理 <span className="text-[#e2924b]">建置、除錯與部署 BRICKS 應用。</span>
    </p>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-8 leading-relaxed">
      CTOR 是整合 AI 代理的桌面 IDE，透過聊天即可讀寫程式碼、執行指令、預覽執行中的應用，並部署您的 <a href="/zh-Hant/ctor-pkg" className="text-[#e2924b] hover:text-[#d4863f] no-underline font-medium">bricks-ctor</a> 應用。
    </p>

    <div className="flex flex-wrap gap-3">
      <a href="/zh-Hant/ctor/guide/installation" className="inline-flex items-center px-5 py-2.5 rounded-lg bg-[#e2924b] hover:bg-[#d4863f] text-white text-sm font-medium no-underline transition-colors">
        開始使用
      </a>

      <a href="https://bricks.tools" className="inline-flex items-center px-5 py-2.5 rounded-lg border border-gray-300 dark:border-white/15 text-gray-700 dark:text-gray-300 text-sm font-medium no-underline hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
        了解 BRICKS
      </a>
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">功能特色</h2>

    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <FeatureCard icon="🤖" title="AI 代理對話" description="與可讀取、寫入、編輯檔案並執行 shell 指令的 AI 代理互動。" href="/zh-Hant/ctor/guide/agent-usage" />

      <FeatureCard icon="🧠" title="多模型支援" description="可選擇 Anthropic、OpenAI、Google、GitHub Copilot 或任何 OpenAI 相容的服務商。" href="/zh-Hant/ctor/reference/models" />

      <FeatureCard icon="⚡" title="技能系統" description="以可重複使用的指示集擴充代理，用於特定工作流程與領域知識。" href="/zh-Hant/ctor/reference/skills" />

      <FeatureCard icon="🔌" title="MCP 整合" description="透過 Model Context Protocol 連接外部工具伺服器，擴充更多能力。" href="/zh-Hant/ctor/reference/mcp" />

      <FeatureCard icon="🚀" title="部署與預覽" description="一鍵將應用部署至 BRICKS 伺服器並於本機預覽。" href="/zh-Hant/ctor/guide/deployment" />

      <FeatureCard icon="🤝" title="子代理" description="將工作委派給具有專屬工具與指示的子代理，可全域或依專案設定。" href="/zh-Hant/ctor/reference/sub-agents" />

      <FeatureCard icon="🔗" title="ACP 支援" description="透過 Agent Client Protocol 將 acpx、OpenClaw 等外部工具連接至桌面代理。" href="/zh-Hant/ctor/reference/acp" />

      <FeatureCard icon="📂" title="多專案" description="於單一視窗中開啟多個專案，支援個別的工作階段與側邊欄導覽。" href="/zh-Hant/ctor/guide/project-setup" />
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">快速開始</h2>

    <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-8">
      <StepItem number="1" title="安裝應用程式" description="為 macOS 或 Linux 下載 CTOR。" href="/zh-Hant/ctor/guide/installation" linkText="安裝指南" />

      <StepItem number="2" title="登入" description="使用一次性通行碼驗證您的 BRICKS 工作區。" href="/zh-Hant/ctor/guide/authentication" linkText="驗證指南" />

      <StepItem number="3" title="開啟專案" description="開啟現有專案目錄或建立新專案。" href="/zh-Hant/ctor/guide/project-setup" linkText="專案設定" />

      <StepItem number="4" title="開始建置" description="與 AI 代理對話以建置您的應用。" href="/zh-Hant/ctor/guide/agent-usage" linkText="使用 AI 代理" />
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">下載</h2>

    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <a href="https://cdn.bricks.tools/bricks-project-desktop/release/CTOR-arm64.dmg" className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline hover:border-[#e2924b]/40 hover:shadow-lg hover:shadow-[#e2924b]/5 transition-all duration-200 text-center">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0">macOS</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">Apple Silicon (ARM64)</p>

        <span className="inline-flex items-center px-3 py-1.5 rounded-lg bg-[#e2924b]/10 text-[#e2924b] text-xs font-medium group-hover:bg-[#e2924b] group-hover:text-white transition-colors">
          下載 .dmg
        </span>
      </a>

      <a href="https://cdn.bricks.tools/bricks-project-desktop/release/CTOR-x86_64.AppImage" className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline hover:border-[#e2924b]/40 hover:shadow-lg hover:shadow-[#e2924b]/5 transition-all duration-200 text-center">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0">Linux x64</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">Intel / AMD (x86\_64)</p>

        <span className="inline-flex items-center px-3 py-1.5 rounded-lg bg-[#e2924b]/10 text-[#e2924b] text-xs font-medium group-hover:bg-[#e2924b] group-hover:text-white transition-colors">
          下載 .AppImage
        </span>
      </a>

      <a href="https://cdn.bricks.tools/bricks-project-desktop/release/CTOR-arm64.AppImage" className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline hover:border-[#e2924b]/40 hover:shadow-lg hover:shadow-[#e2924b]/5 transition-all duration-200 text-center">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0">Linux ARM64</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">ARM (aarch64)</p>

        <span className="inline-flex items-center px-3 py-1.5 rounded-lg bg-[#e2924b]/10 text-[#e2924b] text-xs font-medium group-hover:bg-[#e2924b] group-hover:text-white transition-colors">
          下載 .AppImage
        </span>
      </a>
    </div>
  </div>

  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6">
      <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">系統需求</h3>

      <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-2 m-0 p-0 list-none">
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> macOS (Apple Silicon) 或 Linux (x64 / arm64)</li>
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> 已安裝並加入 PATH 的 <a href="https://bun.sh" className="text-[#e2924b] no-underline hover:text-[#d4863f]">Bun</a> 執行環境</li>
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> <a href="https://bricks.tools" className="text-[#e2924b] no-underline hover:text-[#d4863f]">BRICKS</a> 工作區帳號</li>
      </ul>
    </div>

    <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6">
      <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">支援語言</h3>

      <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-2 m-0 p-0 list-none">
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> English</li>
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> 繁體中文</li>
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> 日本語 (Japanese)</li>
      </ul>
    </div>
  </div>
</div>