1/ 如何通过 Claude Code + Skills 提升您的网站设计 我用 vibe-coded 制作了这个网站。它是功能性的，但缺乏活力 然后我发现了 Claude Skills，让它焕发了生机 这是我的确切工作流程 🧵

2/ AI生成的前端问题在于： - 它们看起来都一样 - 安全的颜色选择（蓝色按钮，白色背景） - 通用的组件样式 - 没有个性或独特性 我最初的网站还不错，功能齐全，但没有我想要的那种火花

4/ 回到我网站的例子，我进行了以下步骤来利用 Claude Skills： 1. 在我的项目中打开了 claude 代码 2. 运行：> explain claude skills（以了解我项目中可用的功能） 3. 调用了前端设计技能 4. 它返回了一个详细的前端设计概念，而不是通用的 只需一个命令，Claude 就从一个基本的代码助手转变为设计专家。

仅使用Claude代码将为您提供一个功能齐全的网站，但这是一个通用网站。 使用Claude代码 + 技能可以为您提供一个生产级且独特的网站，并使其生动起来。 技能为Claude提供了专门的上下文，改变了它解决问题的方式。 前端设计技能特别避免了“通用AI美学”的陷阱。

6/ 自己试试吧！ 1. 安装 Claude Code 2. 打开你的前端项目 3. 调用前端设计技能 4. 安装你的技能 5. 描述你当前的设计 + 你想要的氛围 6. 让它用实际的设计思维重建 如果你们喜欢这个视频，我会做更多这样的工作流程视频，因为我自己也在进行大量实验！