他山之石，可以攻玉。——《诗经·小雅·鹤鸣》

写字的人有一桩隐秘的功课：先去看别人怎么写。可看的姿势很要紧——是站在别人的字帖前发呆，还是把帖借回去，磨自己的墨？下面这六处，是我近来常去的地方。它们各管一摊：有的教你看形，有的催你动手，有的帮你看清这个行当正往哪儿走。我管它们叫「取景地」——取景是为了构图，不是把别人的风景搬进自己的画。

每一处，我都尽量写清四件事：它主要做什么、怎么上手、怎样吃成自己的，以及怎么接进 Codex 一类的工作流。愿它不止是一份收藏夹，更是一张施工图。

Awwwards#

网页设计界的「奥斯卡」，每天从全球挑出几件好东西，从设计、可用性到创意逐项点评给分。它的价值不在「好看」二字，而在让你看见一群人如何把审美落成可交付的工程——原来一次滚动、一个转场，是可以被认真计算过的。我常用它来对着当日获奖站临摹排版与动效的节奏，遇到合意的，先用 AI 拆一遍骨架，再动手改出自己的版本。只是别忘了：拆解是为了看清结构，剖面图不是新房子。

主要功能　每日收录全球优质网站，由评委从 Design、Usability、Creativity、Content 四个维度打分，评出 Site of the Day、Honorable Mention、Developer Award 等；另有 Collections（自建收藏夹）、Academy（课程）与 Market（招聘与资源）。说它是一间「当日的当代设计展厅」并不为过。

怎么使用　先按 category（Portfolio、E-commerce、Animation……）或 tag 缩小范围，再看评委评语——分数只看趋势，评语才讲门道。缩略图不足以说明问题，要真正点进站点，亲手滚一遍、点一遍，把经得起细看的收进自己的 collection，攒成一份私人参考库。

如何转化为自己的　别抄配色与版式，抽取可迁移的「结构件」——栅格与留白的节奏、滚动叙事的段落划分、转场用的缓动曲线、信息层级的处理。把这些写成自己的「设计规律清单」，再用自己的内容重做一版。抄的是方法，不是皮肤。

接进工作流　看到一个中意的站，用 AI Website Cloner，或把网址交给能联网的 harness（Codex、Claude Code 配一个可取页面的 MCP），让它输出该页的 DOM 骨架、关键 CSS 变量与动效实现（GSAP / Lenis / Framer Motion）。你只把「机制」搬进项目，皮肤换成自己的。也可以把「我想要 Awwwards 级别的滚动叙事」直接写成需求，交给 Codex 落地。

React Bits#

一个专注「动」的开源 React 组件库，每件组件都可自定义，看中了直接复制代码，或把提示词拿走。它接住的，是那种「知道这里该有动静，却懒得从零写起」的尴尬。我常用它给页面添一点克制的生气，但复制之前必先读懂它为何这样动——动效是语法，不是贴纸。代码终究是别人咀嚼过的饭，吞下去之前，请先自己嚼一嚼。

主要功能　开源的动画与交互 React 组件库，分 Text Animations、Animations、Components、Backgrounds 几类；每个组件提供 JS-CSS / JS-Tailwind / TS-CSS / TS-Tailwind 四种变体，可在网页预览里实时调参数，一键 copy code，或 copy prompt（一段写给 AI 的提示词）。

怎么使用　挑组件 → 选与自己技术栈匹配的变体（本项目是 TS + Tailwind）→ 在预览里把 props 调到满意 → 复制代码粘进项目，按文档补装 gsap、motion 一类依赖；若懒得改，就把 copy prompt 丢给 AI 生成。

如何转化为自己的　四种变体只差写法，真正的功夫在源码——读懂它如何用 useRef 与 gsap 驱动时间线，再改速度、缓动与触发时机。更进一步，是把几个常客封装成你自己的动效原语（如 <Reveal>、<Magnetic>），统一收口，而不是任代码散落各处；顺手尊重 prefers-reduced-motion，并留意体积。

接进工作流　把 copy prompt 交给 Codex / Claude Code，让它按你的设计 token（颜色、节奏、可访问性）改写；也可以让它把组件转成你项目的框架版本（比如 Astro 里的 Svelte）。改完在 harness 里跑 lint 与构建，用 CI 兜底。

MotionSites#

面向 AI 编程的动态网页提示词与模板库，各类页面的方案与提示词都能翻到，像一间堆满半成品的木工房。它顺手的地方在于「给起点」——你告诉 AI 大概要什么，剩下拍板的仍是你的审美。我常用它来给一个模糊的念头找参照，却从不直接照搬：模板是骨架，血肉得自己长。

主要功能　收录 hero、滚动、3D、转场等各类效果的 prompt 与实现方案，面向 v0 / Cursor / Codex / Claude 等 AI 编程工具，复制一段提示词即可生成雏形。

怎么使用　按类型或风格搜到目标效果 → 复制 prompt → 在 AI 编程工具里生成 → 本地跑起来与原效果对照。要紧的是：别把生成物原样上线。

如何转化为自己的　把它当「起点模板」。替换品牌、文案与图片，重定动画节奏，删掉一切不需要的装饰；更进一步，把 prompt 拆成「结构 / 动效 / 数据」三块，只保留你真正用得上的那一块。模板是骨架，血肉得自己长。

接进工作流　让 Codex 一次只改一个维度——先定结构，再上动效，最后接真实数据（内容集合、CMS）——避免大爆炸式的重写。每一步都在 harness 里跑检查（astro check、biome、构建），让改动始终可回退。

开源世界的「今日风向」，可按时间与语言筛，看得见最近谁在写什么、什么正被围观。偏工程，少花哨，适合想知道「大家此刻在解决什么问题」的人。我常用它来给学习找一个具体的把手——与其空谈方向，不如挑一个当红项目，把它真正读懂。

主要功能　展示近期热门开源项目，可按 daily / weekly / monthly 与编程语言筛选，直接看到 star 增长与仓库简介，偏工程化参考。

怎么使用　先定时间窗与语言，再看项目——README 讲了什么、issue 里在吵什么、最近一次提交是几天前。三者一比，便知它是「值得读」还是「已经凉」。

如何转化为自己的　不做「收藏家」。挑一个项目，只吃透它的一个具体设计——目录怎么分层、状态怎么管、构建脚本怎么编排——把这一条搬进自己的项目，并写一句笔记说清「为什么这样更好」。读透一个点，胜过收藏一百个仓库。

接进工作流　把仓库地址交给能读代码的 harness（Codex CLI、Claude Code、Copilot Workspace），让它「总结该仓库的架构与关键实现，并列出可引入的最小改动清单」；再让它在你自己的仓库里试做一次小重构，跑测试验证。让 AI 当你的读码副驾，但结论得你签字。

Product Hunt#

新工具、新产品每天在此首发，检索完善，社群活跃。比起读新闻，这里更像看别人把念头做成生意的现场：同样的需求，有人做成了镰刀，有人做成了镜子。我常用它来观摩一个点子如何被包装、定价、传播，顺带掂量自己那些挥之不去的想法。

主要功能　新产品与 AI 工具的发布、投票平台，含日榜 / 周榜 / 月榜、Topics、Collections，以及评论区与 Maker 回复；产品页汇集定价、官网与团队信息，检索与分类都称得上完善。

怎么使用　先逛 Topics（AI、Dev Tools、Design Tools……）→ 看 launch 文案与首图（这里最值得学的其实是「定位」）→ 翻评论区找真实反馈 → 收进 collection，当作竞品档案。

如何转化为自己的　不追「新」，追「被验证的需求」。把上榜产品的「一句话价值主张」记下来，反推它戳中的痛点，再问一句：有没有我能做得更窄、更好的角度？

接进工作流　把若干个产品页喂给 harness，让它「对比这几家的定位差异，输出一张差异化对照表，并给出三个可切入的空白点」，作为你写需求文档的起点。检索交给它，创意仍归你——商业化落地案例看多了，才知道自己的那点巧思该往哪儿放。

Indie Hackers#

独立开发者的茶桌，讲的多是一人一桌如何把产品养起来的实情。它不给鸡汤，给的是过程与数字。我常用它来给「一个人能做点什么」这件事找参照，看别人如何从零走到一，再回头看自己脚下。

主要功能　独立开发者社区，有 interviews（营收与增长访谈）、products、groups、milestones，满是从零到一的真实数字。

怎么使用　读 interviews 看别人如何起步、增长、变现；进 groups 提问与互助；翻 milestones 找可复制的路径。数字比口号可信。

如何转化为自己的　把它当「路线图库」。挑一个与自己方向相近的案例，拆成「第一周、第一个月」能落地的动作；别人踩过的坑，就是你省下的时间。

接进工作流　让 harness 把一篇访谈提炼成可执行的 checklist（技术选型、定价、获客渠道、时间线），再逐条对照你的实际情况删改——把别人的地图，改成自己的路线。

看过了，终究要落笔。参考是照进屋里的月光，能照亮案头，却照不出你要写的那个字——他山之石可以攻玉，但攻出来的那方玉，得长成你自己的模样。这六处只是起点，用法也只是脚手架：抄结构、拆机制、换皮肤，剩下的那一笔，永远得你自己来。**参考是起点，创意才是终点。**愿你去取景，也终有一日，成为别人的景。