Brainless: Shadcn components that look like Claude Code, Codex and Grok

背景

随着 AI 编程助手（如 Claude Code、Codex、Grok）的流行，它们的交互界面风格也逐渐成为开发社区模仿的对象。这些工具通常采用深色主题、终端式输出、思考过程动画以及简洁的定价区块等设计元素。shadcn/ui 是 React 生态中广泛使用的组件库，以其可定制的、无样式的原子化组件闻名。近期出现了一组名为 Brainless 的 shadcn 组件，专门用于复现上述 AI 工具的视觉风格，帮助开发者快速搭建类似外观的落地页或产品界面。

核心内容

Hacker News 上的一篇帖子展示了 Brainless 的用法。帖子标题为：“Brainless: Shadcn components that look like Claude Code, Codex and Grok”。正文是一段终端模拟输出，演示了如何将一个定价区块（pricing block）添加到 landing page 中。

具体流程如下：

1. 执行命令 bunx shadcn add brainless/pricing，该命令使用 Bun（或 bunx）包管理器，通过 shadcn 的 CLI 安装名为 brainless/pricing 的组件，并输出“Added 1 block · 2 files”。
2. 随后对 app/page.tsx 文件进行更新，输出显示“Updated app/page.tsx with 3 additions”，并在代码片段中展示修改内容：
   • 原来已有 <Features /> 组件；
   • 新增一行：<Pricing tiers={TIERS} />（位于第 42 行）；
   • 该行后紧跟一个空行（ ）和第 43 行的 <Footer />。
3. 命令执行后，终端进入一个模拟“思考”状态，显示“Thinking… (0s · ↑ 0 tokens · esc to interrupt)”，并附带“xhigh · /effort”和“auto mode on (shift+tab to cycle) · ← for agents”等提示，这直接模仿了 Claude Code、Codex 等 AI 编程助手的交互界面（包括思考时间、token 计数、快捷键提示等）。

整个演示表明，Brainless 不仅提供了类似 AI 工具的视觉组件（如定价卡片），还通过终端界面模拟了 AI 工具的整个使用体验。

关键要点

• Brainless 是一组 shadcn 组件，专门设计成模仿 Claude Code、Codex 和 Grok 等 AI 界面的外观。
• 使用方式与普通 shadcn 组件完全一致，通过 bunx shadcn add 命令安装，如 bunx shadcn add brainless/pricing。
• 示例中展示了 pricing 组件，它接受 tiers 属性，用于展示不同定价层级。
• 安装过程本身也复制了 AI 编程助手的交互风格，包括思考动画、token 计数、快捷键提示等，让开发者从安装到使用全程获得沉浸式体验。
• 代码修改量很小（仅 3 处增加），即可将定价区块集成到现有 landing page。

意义与影响

• 降低仿制 AI 工具 UI 的门槛：过去要复现 Claude Code、Codex 的视觉风格需手动编写大量 CSS 和组件逻辑；Brainless 提供现成的、与 shadcn 生态兼容的组件，大幅提升开发效率。
• 推动 shadcn 组件生态的垂直化：shadcn 原本定位通用原子化组件，Brainless 的出现表明可以针对特定产品设计语言（如 AI 编程助手）构建主题组件，为后续更多垂直定制组件铺路。
• 深化“元设计”概念：通过安装过程本身也模拟 AI 工具界面，Brainless 让工具本身成为自身设计理念的展示。这种自指性（self-referential）的做法有助于开发者更直观理解组件的使用场景。
• 加快 AI 工具界面的标准化：当多款 AI 编程助手采用相似风格（深色终端、思考动画、简洁卡片），同类组件的积累可能催生一套事实 UI 规范，降低用户跨工具的学习成本。
• 潜在局限：组件仅复制外观，未涉及实际 AI 功能；过度追求视觉模仿可能导致与产品自身品牌冲突。开发者需在“像 Claude Code”与“保持独特品牌”之间权衡。