海外热门教程：用Claude Opus 5搭建功能丰富网站

一条时长16分钟、用Claude Opus 5制作相当精致网站的讲解视频在海外引发热议。..

■ 使用的工具共4种
・Pinterest：寻找参考设计，搜索关键词「real estate award winning website」，复制一张结果即可
・Higgsfield：生成并加工首屏海报图，区分使用GPT Image 2和Nano Banana 2
・Figma：制作原型并截图，用于给Claude下达指令
・Claude Opus 5：实现网站本体，使用Tailwind + 视差滚动

■ 制作流程
① 将Pinterest的参考图调整为正面朝向，处理成素材
② 分别导出前景（仅房屋、背景透明）和背景（8K分辨率）
③ 将字体和Tailwind配置传给Claude，让它实现首屏海报
④ 在Figma制作原型，把截图传给Claude，下达修改指示

核心在于第④步「不用文字描述」的指令给出方式👇🧵

第④步的内容是最实用的。

一般情况下人们会用文字来回沟通，比如「再做大一点」「靠上对齐」，但这位制作者是在Figma里粗略做出完成效果，把截图直接发给Claude。

实际使用的提示词是这样的：

「请按照参考图片修改。把标题换成大尺寸的WINTER文字，在它下方放两个按钮，注意按钮要移动到说明文字的上方。把前景图片再往下挪一点，让WINTER能保持大尺寸完整显示。整体位置大致和图片一致就可以」

视差滚动的制作方法也很简单，只要把文字夹在第②步拆分好的前景图和背景图之间就行。给前景设置z-index，通过滚动制造速度差就完成了。

适配移动端也只需要一句「移动端把内容放到标题下方，桌面端保持现有布局」就搞定了。

顺便一提，16分钟的视频里，Claude出场是从5分30秒开始的。

前半部分全是Pinterest找参考和生成图片，设计决策都是由人来做的。Opus 5负责的是代码实现部分。（不过说回来，反倒感觉这类辅助工具的相关知识绕了一圈后变得更重要了。..）

而这种分工其实和Anthropic官方本周发布的内容观点一致。

「比起文字描述设计或者直接给截图，用HTML做设计原型能得到更好的结果」

意思就是不要用文字描述给规格，而是要用Claude非常熟悉的格式传递信息。这个视频正好实操演示了这个观点。

如果要模仿的话，顺序就是：复制一张参考→拆分前景和背景素材→整理好配置一开始传过去→之后都用原型截图发指令。

原视频在这里👇

能用来制作精致游戏的提示词在这里：