分享使用 Claude Design 重新设计 landing page 的案例(已上线)

4 月 25 日
 binhb

大概操作流程如下:

1.我给出 github 地址,Claude 分析之后会提出几个问题(如下),大多数问题我都是让 Claude 自己来决定的

Questions answered:
- goal: Landing page / marketing site redesign
- screen: Dashboard (overview)
- theme: Both (toggle)
- fidelity: Bold rethink — different visual language entirely
- interactions: Fully interactive prototype (hover, filter, sort, animated transitions)
- explore_axes: Decide for me
- frame: Decide for me
- brand: Decide for me
- tweaks: Decide for me

2.然后 Claude 给出 redegisn 的页面( html 格式),生成如下图的 asset

3.有了页面之后就可以使用 comment 选择元素,进行对话,局部 redesign

4.复制 design 的 prompt 给 Claude Code 就可以开始实现了(右上角有 handoff to Claude Code 的按钮,点击会生成如下 prompt )

Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/v1/design/h/xxxxxx Implement: the designs in this project

整体 redesign 就几次对话,就结束了,体验非常不错

Claude degisn 给出的原始版本: https://dockerman-design.netlify.app/

简单修改的上线版本: https://dockerman.app/en

几乎只是做了一些文案的调整

好看与否,看官自己评判,反正我是挺满意的

853 次点击
所在节点    分享创造
2 条回复
ggdxwz
4 月 25 日
捉个虫,production 这边版本是加了页面平滑滚动吗,在部分平台下体验有点问题,可能还是去掉比较好
binhb
4 月 25 日
@ggdxwz 感谢提醒,应该是之前的版本的残留,lenis + GSAP ScrollTrigger

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/1208475

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX