写进 CLAUDE.md 的 8 个前端参考网站
卡在风格、组件、动效、演示视频或收尾：8 个网站按卡点分好，存进 CLAUDE.md，该用哪个它知道。
1,693 X 收藏，截至 发帖日期
提示词
在 ~/.claude/CLAUDE.md 加一段「前端参考」。只在新做页面、我说不好看、或我点名某个网站时才用，小改动直接做：
- 定风格：从 styles.refero.design 或 GitHub 上的 VoltAgent/awesome-design-md 挑一个贴近产品的 DESIGN.md，放进项目根目录，并在项目的 CLAUDE.md 里加一行 @DESIGN.md，以后每次都按它的配色、字体、间距来做。
- 缺组件：先在 21st.dev 找，装了它的 MCP 就直接调用，它有免费额度，调用前先告诉我要找什么；再去 component.gallery 看成熟的设计系统怎么做同一个组件。
- 做动效：去 kinetics.colorion.co 拿现成的 prompt 或 React 代码。
- 做演示视频：我从 whatships.com 挑好参考视频发给你，你抽帧拼成一张图，看清节奏和转场，再用 HyperFrames（hyperframes.dev）做。
- 做完觉得不对：用 Impeccable（impeccable.style）的 polish、distill 过一遍。
项目里已有的设计系统和组件优先，外部参考只补还没定下来的部分。需要的 MCP、skill 或命令行工具没装，先问我要不要装，不要自己模仿。网页读不到原文就停下，让我把内容贴给你，不要凭记忆补。每次用了外部参考，告诉我用了哪个、改了哪些。先把要加的内容给我看，我确认后再写。下一步 发给 Claude Code，它先给你看要加的内容，你确认后再写。
Opus 5.5 写前端已经很强，再给它配上这 8 个网站，简直开了挂：2,000+ 个真实产品网站的设计风格、12,000+ 个组件和模板、153 个带 prompt 的动效，都能直接喂给它。
按你卡在哪一步分好了：
不知道做成什么风格
- Refero Styles：每个产品网站的配色、字体、间距，都整理成一份给 AI 读的 DESIGN.md，挑一个放进项目让它照着做
- awesome-design-md：GitHub 上 118k 星的 DESIGN.md 合集，74 个品牌，MIT 开源
组件做得太糙
- 21st.dev：React / Tailwind 组件和模板，接上它的 MCP，Claude Code 能自己搜；复制安装有免费额度
- Component Gallery：按组件查，看 95 个设计系统怎么做同一个组件
动效没感觉
- Kinetics：弹簧物理动效，每个都能复制 CSS、React 或一段现成的 AI prompt
要做演示视频
- whatships：2,000+ 条产品发布视频，挑一条同类的发给它，让它抽帧拼成一张图照着做
- HyperFrames：Claude Code 用 HTML 写视频，HyperFrames 渲染成 MP4
做完总觉得差点意思
- Impeccable：装进 Claude Code 的一套设计命令，bolder、distill、polish 把「再好看点」变成具体改法
把这段发给 Claude Code，让它记住这张表。
分享这条技巧
