创作者Nil_phy_dreamer →@Nil_phy_dreamer 使用 Claude Code · Sonnet 4.6完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗Prompt
我正在做一个动画加载器和图标库，这是我的第二个项目。这个周末我尝试为它构建一个落地页。但我做了一个实验，完全用 claude code：Sonnet 4.6 来构建它。 我对它第一次生成的结果相当满意。 这是我使用的确切提示词 > 我想让你为这个库创建一个落地页。 1. hero 区域 2. 带 CTA 按钮的功能展示，以及任何你认为重要的版块，从 components 文件夹里取用所有组件，例如 Heading.tsx、paragraph.tsx 使用 `max-w-5xl`， 颜色：以白色和黑色为基础（使用 tailwindcss 中的 neutral、stone 和 white） 我想在落地页中使用一种特定的图案，让它成为受 tailwindplus 主页启发的用心设计 下面是这个网格图案，请像专业设计工程师一样有目的、有品味地使用它 <div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10"> <div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10"> <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300"> <img src="/img/logo.svg" class="mb-11.5 h-6 dark:hidden" alt="Tailwind Play" /> <img src="/img/logo-dark.svg" class="mb-11.5 h-6 not-dark:hidden" alt="Tailwind Play" /> <hr class="my-6 w-full border-(--pattern-fg)" /> <p class="mb-3">Want to dig deeper into Tailwind?</p> <p class="font-semibold"> <a href="" class="text-gray-950 underline decoration-sky-400 underline-offset-3 hover:decoration-2 dark:text-white">Read the docs →</a> </p> </div> </div> <div class="relative -right-px col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div> <div class="relative -left-px col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div> <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div> <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div> </div> 这是结果 @mannupaaji 有什么改进提示词的建议吗？ 你希望在这里加入什么，才能获得更好的输出？
复用方法
关键决定
关键决定是直接把一段真实的 Tailwind 网格图案代码贴进提示词，让模型照着代码的意图去用而不是凭空描述网格背景；同时指定复用 Heading.tsx、paragraph.tsx 等已有组件和 max-w-5xl 的容器宽度，把设计约束和代码约束绑在一起。
换到你的题材
换到你的题材时可以替换要复用的组件文件名、容器宽度和参照的设计源，这里参照的是 tailwindplus 主页风格；骨架是贴入具体代码片段作为图案参考、指定黑白配色和复用已有组件三件事。换成别的库或产品落地页时，保留贴代码这一步而不是只用文字描述效果。
容易翻车
容易翻车的是模型把粘贴进去的网格代码原样复制却不理解其用途，导致图案脱离内容单独存在；复测时先看网格图案是否真的服务于内容分区而不是纯装饰，再检查复用的组件是否保持了原有的排版逻辑，而不是被重新设计成另一套风格。
建议模型
Derived Skill
Skill 只从多个已发布 Case 的重复模式中派生，不是另一套投稿内容。
创作者
Nil_phy_dreamer 长期扎根X，交付可运行的界面，《Claude Code 动画素材库落地页》配了完整实现思路。
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒
提示语
有几个人询问提示词，所以放在这里 👇 附言：根据你的使用场景进行调整。 创建一个现代、极简的 3D 发票生成器机器组件，采用高级 SaaS 风格美学。 视觉设计 - 设计一台宽幅横向的发票打印机，灵感来自小票打印机，但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代，而不是写实或工业化。 - 保持整体设计足够干净，使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv
@shushant_l 使用 AI Website Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
下面介绍如何用 AI 以极简设计风格创建你的网站。 使用这条提示：为一位数字创作者和 AI 顾问设计一个现代极简作品集网站。采用干净的黑、白和中性色调，不使用渐变、玻璃拟态或过度的视觉效果。注重简洁、留白、强有力的排版、清晰的层级和快速加载性能。加入首屏介绍与行动号召、关于版块、精选项目作品集、服务版块、客户评价、博客/文章预览、技能与工具展示、客户 Logo、联系表单和页脚。加入细微动效、平滑滚动、优雅的卡片布局、移动端优先的响应式设计，以及对 SEO 友好的结构。整体美
