已验证 · 可安装 Agent Skill
SKILL.md + .skill把这套方法装进你的 Agent。
npx skills add LearnPrompt/goodcaseai --skill landing-page-information-structure --global --copy --yes --full-depth加载中…
Skill · 跨作者通用方法
把价值主张、证据、功能与行动指令排成一条完整的页面阅读路径。
已验证 · 可安装 Agent Skill
SKILL.md + .skillnpx skills add LearnPrompt/goodcaseai --skill landing-page-information-structure --global --copy --yes --full-depth方法骨架
作者证据
Case 证据
三行技术栈清单直接对应三个实现步骤:摄像头取流、Mediapipe 抓人脸关键点、Three.js 按关键点实时渲染激光眼特效,提示词本身就是一份技术方案而不是效果描述,作者后来还把它做成了开源网页。
提示语
使用电脑的前置摄像头 使用 mediapipe 库捕捉面部关键点 使用 threejs,根据 mediapipe 提供的实时 3D 关键点信息,为摄像头捕捉到的面部应用激光眼特效
三句话生成一整个可交互网页:风格、动效、色彩三个关键词加一个页面标题,证明 Gemini 3 对新粗野主义这种视觉语言高度共识的风格,短提示词也能跑出完整效果,而不需要逐段拆解排版要求。
提示语
做一个新粗野主义风格的网页,尽可能极具创意,把限制推到极致。加上流畅的滚动动画,加上花哨的配色和 Tailwind CSS 样式。做成响应式的。页面标题是 dorksense
@johannesasgeir 使用 Gemini AntiGravity完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
我用一条提示在周末做出了这个价值 10,000 美元的网站…… 开玩笑的。我又做了一个网页模型,只是用一条主提示和几条小提示来调整它。 它主要花了我一些时间,以及每周 Antigravity 积分的大约 1%。 我从一张看到的图片中得到灵感,画面里一只流口水的狗把食物卷起;于是我决定把它变成一个动态网页概念。 我会继续发布各种随机想法,因为我几乎每天都会做出新东西。 和往常一样,我用 Gemini、Google Flow 和 Antigravity 完成了它。 最
@DevBySami 使用 GPT-5.6 Sol · ShioriCode完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
GPT-5.6 Sol 在不使用 Codex harness 时做 UI 好得多。 它用下面这条提示生成了这个软件机构落地页: 为一家位于日本东京的软件机构设计一个漂亮的落地页。 使用的 Harness:ShioriCode。
@shushant_l 使用 AI Website Builder完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
下面介绍如何用 AI 以极简设计风格创建你的网站。 使用这条提示:为一位数字创作者和 AI 顾问设计一个现代极简作品集网站。采用干净的黑、白和中性色调,不使用渐变、玻璃拟态或过度的视觉效果。注重简洁、留白、强有力的排版、清晰的层级和快速加载性能。加入首屏介绍与行动号召、关于版块、精选项目作品集、服务版块、客户评价、博客/文章预览、技能与工具展示、客户 Logo、联系表单和页脚。加入细微动效、平滑滚动、优雅的卡片布局、移动端优先的响应式设计,以及对 SEO 友好的结构。整体美
提示语
提示词: 创建 4 到 5 个大型模糊色块(直径 500px 以上),让它们在屏幕上明显地漂移。 每个色块都要持续沿圆形或 8 字形路径移动,在 8 到 12 秒内完成一个完整循环(不要用 30 秒,那样太慢)。色块应从中心点至少移动 200 到 300px,让运动清晰可见。 使用明亮的蓝色渐变(#3b82f6、#60a5fa、#93c5fd),不透明度为 40% 到 60%,并使用 100px 模糊。整体效果应像慢动作熔岩灯,或像彩色聚光灯在内容后方柔和地游动。 运
提示语
非常令人印象深刻的 @Zai_org GLM 4.7 网站设计 提示词一: 我想让你真正展示出你的能力 这是我第一次使用你,所以我想了解你的能力,以及你能为我展示什么,尤其是从视觉设计角度来说 你可以使用技能,请先运行这些 - 「openskills read zai-cli」 - 「openskills read dev-browser」 提示词二: 我觉得你可以做得比那更好。周围可以打磨得更精致一些。那看起来只是想炫技,实际效果并不太好。请进行深度思考。 最终提
@0fficialRohit 使用 Claude · MCP360 ImageGen完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
周末实验变成了一件有趣的事。 只用一个提示词,@claudeai + @MCP360AI marketplace MCP 就生成了一个带图片的完整网页。 这是我使用的确切提示词: 「使用 mcp360 imagegen,在暗色主题下创建一个健身房网站,并加入图片。」 MCP360 下一次更新即将到来,敬请期待。🚀
@DrilonAjdinii 使用 Leylo AI完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
位于哥本哈根的建筑事务所网站。 使用 @LeyloAI 一次生成 这是我使用的提示词: 一家名为「Oren Studio」的精品建筑事务所,位于哥本哈根,专注于可持续住宅设计。用大型编辑摄影展示 4 个精选项目。采用温暖的有机美学、泥土色调、充裕留白和电影感衬线字体。加入包含创立故事的关于版块和联系表单。 将任何设计 UI 转移到你的无代码构建器中。
@ianiketnagapure 使用 Claude Sonnet 5 · Cursor完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
在 Cursor 中尝试了 Sonnet 5(high) 提示词: 「构建一个生产级、电影感的 FIFA 世界杯网站,包含真实感视觉、比赛日程、沉浸式动画和高级 UI/UX」 结果如下 👇 第一次尝试做出了一个还不错的包含比赛、积分榜和赛程的仪表盘……但还不够华丽。 图片生成没有成功(符合预期),所以我让它尽可能抓取可用的图片。 还在测试这个新模型到底有多强。我接下来还应该用 Sonnet 5 测试什么?欢迎留言告诉我👇
@arjunkshah21 使用 AI Coding Agent完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
Vibe coding 对战第二部分! 我使用的提示词: 为 Claude Code 和 Codex 等 AI 编程代理的 Skill 设计一个多版块、极其优雅且漂亮的落地页;这个 Skill 能消除 AI UI 中的模板化和粗糙感,基本上就是设计漂亮的 UI。展示它可以与多种不同类型的编程代理集成。落地页本身必须干净、极简但仍然优雅——留出最大限度的空白,同时保持好看、不俗气。再加入一个功能:按下键盘上的 C 键即可切换网站主题,并确保主题切换有完整动画。这里是仓库链接
@DeepakNesss 使用 Claude Sonnet 5完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Sonnet 5 有一种有趣的前端设计品味,我很喜欢。 只用这一个提示词构建: > 创建一个外观惊艳的个人网站,让我可以介绍自己、展示项目和其他内容。使用虚拟数据。