设计师分享用Claude Code做高质感动效UI的实操流程

很多人问我怎么用Claude Code做出这种视觉和动效都到位的应用界面，今天把完整搭建流程分享出来。

首先要说明，这些界面大多经过了多轮提示词迭代。如果你指望一次生成就得到最终效果，大概率只会停留在粗糙的初稿阶段。我会先告诉Claude这个应用的功能，再分享几个UI和动效参考，之后再逐步迭代。

UI参考素材我一般从Mobbin和Pinterest上找。有些界面如果先在Figma里设计好，能更快得到正确结果。之后我会把Figma设计稿和Claude生成的版本放在一起，明确指出需要修改的地方。

我通常会给Claude发一个动效参考。大概5%到10%的情况下，找不到合适的参考片段，或者动画比较复杂，我会在Figma里做2到3个状态的原型。比如这个滑动界面，我就在Figma里做了三个状态，交给Claude并解释了所有状态的逻辑和运行方式。

之后我会测试应用。一个转场在参考片段里看起来很棒，实际点击操作时可能还是会觉得慢。而且我通常还会把标题往上挪2像素，因为我的设计师习惯还在驱使我这么做。

如果你喜欢这类内容，可以关注我，看更多设计加Claude Code的实验。另外，如果你是创始人，正在找能同时设计产品并把MVP落地的人，可以私信我，很乐意讨论项目。