开发者分享Claude Fable 5应用设计Prompt及代码

✨ Claude Fable 5 在设计应用方面简直太棒了。这就是我用的提示词 ↓

❤️‍🔥 一键获取完整提示词，以及更多用于制作惊艳动画移动应用和网站的提示词：--- 创建一个居中放置在深色背景（#050410）上的单手机屏幕样机（393x820px）。

手机边框圆角为 28px，无边框，深度阴影为 (0 30px 80px rgba(0,0,0,0.6))。手机背景为 #0c0a16。

内部使用 CSS transform 将内容区域（300x626px）放大 1.31 倍。

**字体：** - Google 字体：Inter (300-700) 和 Quicksand (300-700) - 自定义字体 "Qanelas-Heavy“ 加载自： - woff2: - woff:

**导航栏**（顶部，内边距 25px 16px 0 16px，flex 两端对齐）： - 左侧：Logo 文字 ”nova“（Quicksand 600，白色）+ ”pay“（Quicksand 300，#e7e3f2）+ 一个 10px 的紫色圆点（#7f52ef），左侧外边距 5px - 右侧：两个药丸按钮： - ”What is?“ — 9.5px Inter 400，颜色 #d9d5e8，1px 实心边框 rgba(255,255,255,0.3)，内边距 9px 13px，圆角 999px - ”Create a team“ — 9.5px Inter 500，颜色 #a483f5，1.5px 实心边框 #504081，内边距 9px 13px，圆角 999px

**虚影文字**（绝对定位，top -19px，left -19px）： - ”ONE GLOBE, ONE FUTURE“（每两个词后换行） - Qanelas-Heavy 68px，行高 0.72，颜色 #16112b，不透明度 0.5，大写

**Hero 区块**（margin-top 44px）： - 锁图标圆形（44px，背景 #01010e，居中放在卡片上方）： - SVG 锁图标 18px，描边 #7f52ef，描边宽度 2，旋转 -12 度 - Hero 卡片（宽度 94%，最大 290px，居中，内边距 12px 18px，圆角 20px）： - 背景：linear-gradient(120deg, rgba(203,191,255,0.11), rgba(203,191,255,0.09)) - 背景滤镜：blur(18px) - 文字：”THE COMPETITION IS LIVE NOW!“ — Qanelas-Heavy 37px，行高 0.98，颜色 #7442e9，大写，左对齐，white-space nowrap，在 ”THE“ 和 ”COMPETITION“ 后换行

**如何获胜区块**（居中，margin-top 26px）： - 徽章药丸：”HOW TO WIN BIG!“ — 9px Inter 600，颜色 #d9d5e8，背景 #17142a，圆角 999px，内边距 5px 11px，左侧有一个 6px 紫色圆点（#7f52ef） - 下方文字（margin-top 16px）：”Transfer $1 Around the world, Win $30,000!“ — 18px Inter 400，行高 1.25，颜色 #f2f0f8，左对齐，在 ”the“ 后换行

**视频/地球区块**（绝对定位，left 0，right 0，bottom -100px，高度 540px，溢出隐藏）： - class 为 ”globe-img“ 的视频元素： - src: - 自动播放，静音，循环，playsinline - 定位：绝对定位，left 50%，bottom 0，transform translateX(-50%)，宽度 135% - 渐变遮罩覆盖层（::after 伪元素）：容器底部 100px 高度，高度 20%，从透明渐变到 #060410

**倒计时条**（绝对定位，bottom 44px，居中，宽度 272px，高度 40px）： - 从左到右分层排列的 4 个重叠药丸分段，z-index 依次递增： - 分段 1（left:0，全宽）：时钟 SVG 图标（11px，描边 #b7a4f0）+ ”12 days“ — 背景 rgba(33,24,62,0.72) - 分段 2（left:70px）：”23 hs“ — 背景 rgba(38,28,72,0.78) - 分段 3（left:126px）：”12 min“ — 背景 rgba(44,33,84,0.84) - 分段 4（left:182px）：”30 seconds“ — 背景 rgba(50,38,96,0.9) - 所有分段：10.5px Inter 600，颜色 #f4f1fb，圆角 9999px - 标签（”days", "hs", "min", "seconds“）：字重 400，颜色 #cabfe6

**”left to win!" 文字**（绝对定位，bottom 26px，居中，12px Inter 500，颜色 #f4f1fb）

**全局缩放：** 出于展示目的，整部手机以 zoom: 0.78 渲染。