用 Claude 重构作品集

我折腾了一个星期，想用 Claude 把自己那个一眼就能看出是 AI 生成的烂网页重构成高级感十足的 Portfolio，结果却陷入了一个极其诡异的怪圈：无论我换多少种配色方案，无论我怎么改 UI 风格，最后出来的东西全都长着一张“管理后台”的脸。

说白了，我以为我在做设计，其实我一直在让 AI 给我写一个“数据库查询界面”。

陷入“仪表盘”陷阱的实操复盘

最初我发现原站的 UX 简直是灾难，连 Gemini 都在帮我找茬，说我的配色和布局充满了廉价的 AI 味。于是我尝试了一套标准的工作流：
1. 使用 Impeccable 作为设计指南。
2. 喂给 Claude Design 各种风格描述。
3. 尝试了从紫色到彩虹色，再到各种莫兰迪色系的各种配色方案。

结果极其挫败，我跟 Claude 迭代了不下 10 个版本，每一个我都觉得很难看。我后来才意识到一个致命的逻辑错误：我给出的指令全是关于“展示数据”的。

我一直在要求它加“过滤器（Filters）”、“计数器（Counts）”、“下拉菜单（Dropdowns）”和“搜索框（Search）”。这些元素组合在一起，本质上不是一个展示个人魅力的作品集，而是一个冷冰冰的、用来管理文件的“文件柜（Filing Cabinet）”。它太像一个 Dashboard 了，完全抹杀了作为“人”的存在感。

那个让设计瞬间变高级的指令

在几乎要放弃的时候，我不再去纠结具体的颜色或组件，而是给 Claude 下了一个非常感性的指令：

Stop building a dashboard. I want an "artsy page", not a data management interface. 
Focus on personality and visual rhythm, not just information density.

就这一句话，Claude 的输出逻辑才真正发生了转变。它不再执着于堆砌功能组件，而是开始理解什么是“视觉节奏”。

为了彻底摆脱那种“AI 模板感”，我总结了一套目前正在实操的视觉避坑指南，大家如果用 Claude 写前端，可以直接把这几条塞进 System Prompt 里：

• 严禁使用 Eyebrow Text： 别在每个 Section 顶部都加一行那种小小的、灰色的分类标签，那是典型的模板套路。
• 单色调原则： 全局只选一个核心强调色（Accent Color），通过调整透明度（Opacity）来做层次，千万别搞那种五颜六色的乱炖。
• 字体对冲： 必须使用两组截然不同的字体——一组要有强烈的性格（Personality），用于标题；另一组必须保证极致的可读性，用于正文。
• 打破对称： 强制要求布局使用 Offset（偏移）和不对称设计，别让所有元素都乖乖地排在网格里，那太像数据库了。

现在的版本虽然还没达到完美，但起码它看起来像是一个“人”的作品，而不是一个自动生成的文档索引页。