给Opus 5.5喂8个站点资源，前端开发像开了挂

Opus 5.5在前端开发方面已经很强了。给它加上这8个网站，体验就像开了挂：超过2000种来自真实产品网站的设计风格、超过12000个组件和模板，还有153种带提示词的动态效果。你可以把所有这些直接输入给Opus。按你卡壳的场景分类整理好了👇

不知道选什么风格？→ Refero Styles：每个产品网站的配色、排版和间距都整理成了AI可读的DESIGN.md文件。选一个放到你的项目里，让Opus跟着它做就行。
→ awesome-design-md：GitHub上的一个集合，包含74个品牌的DESIGN.md文件，已经获得11.8万星标，基于MIT协议开源。

组件看起来粗糙？现成的React和Tailwind组件和模板。连接它的MCP后，Claude Code就能自动搜索。复制和安装有免费使用限额。
→ Component Gallery：你可以搜索任意组件，查看95个设计系统是怎么处理它的。

动态效果太单调？→ Kinetics：基于弹性物理的动画。每种动画你都可以直接复制CSS、React代码，或是现成的AI提示词。

需要演示视频？→ whatships：包含超过2000个产品发布视频。选一个你所在品类的视频发过去，让Opus把视频帧拼接成一张图并匹配效果。
→ HyperFrames：Claude Code把视频写成HTML，HyperFrames再把它渲染成MP4。

做完了，但还是觉得哪里不对？→ Impeccable：你可以在Claude Code中安装一套设计命令。bolder、distill和polish可以把“让它更好看”转换成具体的修改。

把下面这段发给Claude Code，让它记住这个列表👇
“在~/.claude/CLAUDE.md中添加一个名为前端参考资料的部分。只有在构建新页面、我说某个地方不好看，或者我提到这些网站中的某一个时才使用它。对于小修改，直接按以下规则处理：
- 风格：从GitHub上的VoltAgent/awesome-design-md选一个符合产品的DESIGN.md。把它放到项目根目录，在项目的CLAUDE.md中添加@导入，这样之后所有内容都会遵循它的配色、排版和间距。
- 组件：先检查，如果已经安装了对应MCP就直接调用。它有免费使用限额，所以调用前告诉我你要找什么。然后检查成熟的设计系统是怎么处理同一个组件的。
- 动态：从这里获取现成的提示词或React代码。
- 演示视频：我会选好参考视频发给你。把帧拼接成一张图来查看节奏和转场，然后用HyperFrames构建。
- 如果做完之后还是觉得不对：用Impeccable的polish和distill处理一遍。

项目现有的设计系统和组件优先。外部参考资料只用来补充还没确定的内容。如果你需要的MCP、技能或命令行工具没有安装，询问我是否要安装，不要自己模仿。如果你读不到页面的实际内容，停下来让我粘贴进去。不要靠记忆填充内容。每次你使用外部参考，都要告诉我用了哪一个、做了什么修改。先展示你要添加的内容，在我确认后再编写。”