《Brainless：复刻AI编码助手终端UI的shadcn组件库》

标签：#前端 #shadcn #React #AI终端UI #ClaudeCode #Codex

总结：
Brainless 是一个 shadcn/ui 组件注册表，提供一套可复用的 React 组件，精准还原 Claude Code、OpenAI Codex 和 Grok 等 AI 编码助手的终端风格界面。开发者可通过 npx shadcn@latest add 一键安装，快速构建具有"Agent 味"的交互界面。

文章要点：
1. 精准还原终端风格：组件库完整复刻了 Claude Code、Codex、Grok 等主流 AI 编码助手的终端界面，包括待办列表、计划展示、思考过程等核心 UI 元素
2. 像素级细节还原：从实际终端截图出发，逐帧对比"已发布"与"捕获"版本，修正了行间距、符号对齐、颜色处理等细节差异，确保视觉体验与真实终端一致
3. shadcn 生态原生支持：作为官方注册表组件，可直接通过 shadcn CLI 安装，与现有项目无缝集成，无需额外配置
4. 开源可扩展：代码托管在 GitHub，开发者可自由查看源码、提交改进，甚至基于其设计思路构建自己的 Agent 风格界面

URL：https://brainless.swerdlow.dev/

brainless

Claude Code, Codex, and Grok interfaces as shadcn components.

《shadcn/typeset 发布：为HTML内容打造统一排版系统》

标签：#前端 #shadcn #CSS排版 #Markdown渲染 #流式内容

总结：
shadcn/typeset 是一个面向 HTML 和 Markdown 的轻量排版系统，只需一个 CSS 文件和一个 typeset 类，即可为博客、文档、聊天流等场景提供统一且可灵活调节的文本样式，专为流式输出场景优化。

文章要点：
1. 开箱即用：只需在容器上添加 typeset 类，内部所有 HTML 元素（标题、段落、列表、表格、代码块等）自动获得优雅排版
2. 三旋钮控制：通过 --typeset-size（字号）、--typeset-leading（行高）、--typeset-flow（间距）三个 CSS 变量，轻松为不同场景（聊天、文档、博客）定制专属节奏
3. 流式友好：设计上避免了新内容块插入时导致已有内容样式重排的问题，非常适合 AI 聊天、流式输出等实时渲染场景
4. 完全可控：文件直接存在于你的项目中，无额外依赖包或配置层，真正做到了"你拥有它"

URL：https://ui.shadcn.com/docs/changelog/2026-07-typeset

Shadcn

July 2026 - Introducing shadcn/typeset

A complete typography system for HTML, from blog posts to streaming chat. One CSS file you own.