第三阶段（48-72小时）：细节打磨与整合

最后24小时基本是在做"让它从70分变成90分"的工作：错误状态处理、代码块复制交互、消息气泡的自适应宽度。

18700行代码的大致模块分布：

• 核心组件库：约6200行
• 样式系统（CSS变量+主题）：约3800行
• 流式输出引擎：约2100行
• Markdown渲染层：约3400行
• 工具函数与状态管理：约3200行

---

第三章：五个可以直接拿走的设计细节

这是本文最有价值的部分。我从18700行里挑出最值得迁移的五个模式，每个都给你能跑的代码。

① 流式输出的光标动画

/ 流式输出光标 /
.streaming-cursor {
display: inline-block;
width: 2px;
height: 1.2em;
background-color: currentColor;
margin-left: 1px;
vertical-align: text-bottom;
animation: cursor-blink 0.8s ease-in-out infinite;
}

@keyframes cursor-blink {
0%, 100% { opacity: 1; }
45%       { opacity: 1; }
55%       { opacity: 0; }
}

// 流式输出控制器
class StreamingController {
constructor(container) {
this.container = container;
this.cursor = document.createElement('span');
this.cursor.className = 'streaming-cursor';
this.isStreaming = false;
}

start() {
this.isStreaming = true;
this.container.appendChild(this.cursor);
}

append(text) {
// 在光标前插入文本
this.container.insertBefore(
document.createTextNode(text),
this.cursor
);
}

stop() {
this.isStreaming = false;
this.cursor.remove();
}
}

为什么这样设计：光标的闪烁节奏（0.8s，非对称的亮暗比）模拟了人类打字时的思考停顿感，比机械的0.5s等间隔闪烁更有"生命感"。

② 消息气泡的自适应宽度

.message-container {
display: flex;
flex-direction: column;
gap: 16px;
}

.message-bubble {
max-width: min(85%, 720px);  / 关键：双重约束 /
width: fit-content;
padding: 12px 16px;
border-radius: 12px;
line-height: 1.6;
}

.message-bubble.user {
align-self: flex-end;
background: var(--color-user-bubble);
}

.message-bubble.assistant {
align-self: flex-start;
max-width: 100%;  / AI回复不限制宽度 /
background: transparent;
}

③ 错误状态的"温柔提示"文案逻辑

Claude的错误提示有一个固定模式：承认问题 → 解释原因（用户能理解的语言）→ 给出下一步。

const ErrorMessages = {
rate_limit: {
title: "稍等一下",
body: "请求有点多，让我喘口气。几秒后可以继续。",
action: "稍后重试"
},
context_too_long: {
title: "对话太长了",
body: "这段对话已经很长了，我可能需要开始一个新的对话才能继续帮你。",
action: "开启新对话"
},
network_error: {
title: "网络好像出了点问题",
body: "检查一下网络连接，然后再试试？",
action: "重新发送"
}
};

function renderError(type) {
const msg = ErrorMessages[type] || ErrorMessages.network_error;
return 

⚠️

${msg.title}
${msg.body}

${msg.action}

;
}

④ 代码块的一键复制（带Toast反馈）

function initCodeBlockCopy() {
document.querySelectorAll('pre code').forEach(block => {
const wrapper = block.parentElement;
const btn = document.createElement('button');
btn.className = 'copy-btn';
btn.textContent = '复制';

btn.addEventListener('click', async () => {
await navigator.clipboard.writeText(block.textContent);
btn.textContent = '已复制 ✓';
btn.classList.add('copied');
setTimeout(() => {
btn.textContent = '复制';
btn.classList.remove('copied');
}, 2000);
});

wrapper.style.position = 'relative';
wrapper.appendChild(btn);
});
}

⑤ 移动端键盘弹出时的布局保护

// 用 visualViewport API 替代 resize 事件
function initMobileKeyboardProtection(inputArea) {
if (!window.visualViewport) return;

window.visualViewport.addEventListener('resize', () => {
const viewportHeight = window.visualViewport.height;
const windowHeight = window.innerHeight;
const keyboardHeight = windowHeight - viewportHeight;

if (keyboardHeight > 100) {
// 键盘弹出
inputArea.style.paddingBottom = ${keyboardHeight}px;

// 滚动到最新消息
scrollToBottom({ behavior: 'instant' });
} else {
// 键盘收起
inputArea.style.paddingBottom = '0';
}
});
}

---

第四章：拆完之后我发现的底层逻辑

从"怎么做"退一步，看"为什么这么做"。

复刻完整套系统之后，我提炼出Claude设计系统的三条隐性原则：

Claude的界面几乎没有多余的按钮和选项。它做的每一个"简化"背后，都是把决策权从用户手里拿走——不是剥夺，是替你做了。字体大小不让你选，行高不让你调，因为它已经调到了最优解。

AI的回答是不可控的，但界面可以让这种不可控"看起来可控"。流式输出的光标、渐进式的内容展示、清晰的"正在思考"状态——这些都在告诉用户：系统在正常工作，只是需要一点时间。

这是最反直觉的一条。大多数产品把"等待"视为需要消灭的负体验，Claude的设计却把等待变成了一种仪式感——你看着内容一个字一个字出现，反而会觉得"它在认真思考"。这种感知上的"努力感"，直接影响用户对回答质量的评价。

---

第五章：普通开发者的最短路径

学了这么多，怎么真正跑起来？

我建议的最小技术栈：

最关键的一步，是接入真正的AI API。

设计系统是皮，API能力是骨。你可以把Claude的界面做得一模一样，但如果后端接的是一个反应迟钝的模型，所有的"光标动画"和"温柔提示"都会显得像在说谎。

我在测试这套复刻系统时，用的是 [api.884819.xyz](https://api.884819.xyz) ——注册即用，不需要邮箱验证，新用户直接有体验token，国产模型（Deepseek、千问等）完全免费。我自己跑这套设计系统的demo验证，稳定性和响应速度都没有问题，省去了很多环境配置的麻烦。

1. 把第三章的流式光标代码跑起来（10分钟）