给 Opus 5.5 搭配这 8 个前端资源，体验如开挂
Opus 5.5 is already strong at frontend. Give it 𝘁𝗵𝗲𝘀𝗲 𝟴 𝘀𝗶𝘁𝗲𝘀 and it feels like…
结构清晰地将 8 个工具按开发痛点分类，并给出了可直接复用的 CLAUDE.md 配置代码，实操性极强。
Opus 5.5 is already strong at frontend. Give it 𝘁𝗵𝗲𝘀𝗲 𝟴 𝘀𝗶𝘁𝗲𝘀 and it feels like cheating: 2,000+ design styles from real product sites, 12,000+ components and templates, and 153 motion effects that come with prompts. You can feed all of it straight to Opus.
Opus 5.5 在前端方面已经很强。给它这 8 个网站，感觉就像开了挂：来自真实产品网站的 2,000+ 种设计风格、12,000+ 个组件和模板，以及附带提示词的 153 种动效。你可以将所有这些直接输入给 Opus。
Sorted by 𝘄𝗵𝗲𝗿𝗲 𝘆𝗼𝘂 𝗴𝗲𝘁 𝘀𝘁𝘂𝗰𝗸 👇
按你卡住的地方排序 👇
No idea what style to go for → Refero Styles: each product site's colors, typography and spacing, written up as a DESIGN.md for AI to read. Pick one, drop it into your project and have Opus follow it → awesome-design-md: a GitHub collection of DESIGN.md files for 74 brands, with 118k stars. Open source under MIT
不知道选什么风格 → Refero Styles：每个产品网站的颜色、排版和间距，都写成 AI 可读的 DESIGN.md 文件。选择一个，放入你的项目，让 Opus 遵循它 → awesome-design-md：GitHub 上 74 个品牌的 DESIGN.md 文件合集，拥有 118k 星。MIT 开源协议
Components look rough → http://21st.dev: React and Tailwind components and templates. Connect its MCP and Claude Code can search it on its own. Copying and installing has a free usage limit → Component Gallery: look up any component and see how 95 design systems handle it
组件看起来粗糙 → http://21st.dev：React 和 Tailwind 组件及模板。连接其 MCP，Claude Code 可以自行搜索它。复制和安装有免费使用限制 → Component Gallery：查找任何组件，查看 95 个设计系统如何处理它
Motion feels flat → Kinetics: spring-physics animations. For each one you can copy the CSS, the React, or a ready-made AI prompt
动效显得平淡 → Kinetics：基于弹簧物理学的动画。对于每一个，你可以复制 CSS、React 代码或现成的 AI 提示词
Need a demo video → whatships: 2,000+ product launch videos. Pick one in your category, send it over, and have Opus tile its frames into one image and match it → HyperFrames: Claude Code writes the video in HTML, and HyperFrames renders it to MP4
需要演示视频 → whatships：2,000+ 个产品发布视频。选择你类别中的一个，发送过去，让 Opus 将其帧拼接成一张图片并匹配 → HyperFrames：Claude Code 用 HTML 编写视频，HyperFrames 将其渲染为 MP4
Done, but something still feels off → Impeccable: a set of design commands you install in Claude Code. bolder, distill and polish turn "make it look better" into specific changes
完成了，但感觉还是有点不对劲 → Impeccable：一套你在 Claude Code 中安装的设计命令。bolder、distill 和 polish 将“让它看起来更好”转化为具体的修改
Send this to Claude Code so it remembers the list 👇
将此发送给 Claude Code，让它记住这个列表 👇
"Add a section called Frontend references to ~/.claude/CLAUDE.md. Use it only when building a new page, when I say something looks bad, or when I name one of these sites. For small changes, just do the work: - Style: pick a DESIGN.md that fits the product from http://styles.refero.design or VoltAgent/awesome-design-md on GitHub. Put it in the project root and add an @ import for it in the project's CLAUDE.md, so from then on everything follows its colors, typography and spacing. - Components: check http://21st.dev first, and call its MCP directly if it's installed. It has a free usage limit, so tell me what you're looking for before you call it. Then check http://component.gallery to see how mature design systems handle the same component. - Motion: get a ready-made prompt or React code from http://kinetics.colorion.co. - Demo videos: I'll pick reference videos on http://whatships.com and send them to you. Tile the frames into one image to see the pacing and transitions, then build it with HyperFrames (http://hyperframes.dev). - If it still feels off when it's done: run it through polish and distill from Impeccable (http://impeccable.style). The project's existing design system and components come first. Outside references only fill in what hasn't been decided yet. If an MCP, skill or command-line tool you need isn't installed, ask me whether to install it, and don't imitate it yourself. If you can't read a page's actual content, stop and ask me to paste it in. Don't fill anything in from memory. Every time you use an outside reference, tell me which one and what you changed. Show me what you'll add first, and don't write it until I confirm."
"在 ~/.claude/CLAUDE.md 中添加一个名为 Frontend references（前端参考）的部分。仅在新建页面、我说某处看起来不好，或我提到这些网站中的某一个时才使用它。对于小改动，直接完成工作即可： - 样式：从 http://styles.refero.design 或 GitHub 上的 VoltAgent/awesome-design-md 中选择一个适合产品的 DESIGN.md。将其放入项目根目录，并在项目的 CLAUDE.md 中添加一个 @ import 引用，以便从此所有元素都遵循其颜色、排版和间距。 - 组件：先检查 http://21st.dev，如果已安装则直接调用其 MCP。它有免费使用限额，因此在调用前告诉我你在寻找什么。然后查看 http://component.gallery，了解成熟的设计系统如何处理相同组件。 - 动效：从 http://kinetics.colorion.co 获取现成的提示词或 React 代码。 - 演示视频：我会从 http://whatships.com 挑选参考视频并发送给你。将帧拼接成一张图片以观察节奏和过渡效果，然后使用 HyperFrames（http://hyperframes.dev）进行构建。 - 如果完成后仍感觉不对劲：通过 Impeccable（http://impeccable.style）的 polish 和 distill 功能进行处理。 项目的现有设计系统和组件优先。外部参考仅用于补充尚未确定的内容。如果你需要的 MCP、技能或命令行工具未安装，请询问我是否要安装，不要自行模仿。如果你无法读取页面的实际内容，请停止并让我粘贴进来。不要凭记忆填充任何内容。每次使用外部参考时，告诉我使用了哪一个以及你做了哪些更改。先展示你要添加的内容，在我确认之前不要编写代码。"
更进一步：量化金融体系
看懂新闻只是起点——沿量化金融路径，把它变成能交付的工程能力