HomeStylesTemplates
StyleKit
风格库动效模板
博客更新日志
首页/提示词/落地页设计提示词

落地页设计提示词

用于创建高转化落地页的 AI 提示词,涵盖 Hero 区块、功能网格、用户评价和 CTA。

landing page prompthero section promptlanding page design AIwebsite landing page promptSaaS landing page promptproduct landing page design

关于此主题

落地页是专为将访客转化为用户或客户而设计的单一目的页面。有效的落地页遵循经过验证的结构:引人注目的 Hero 区块配合清晰的价值主张、社会证明、功能亮点和有力的行动号召。视觉设计应引导视线沿页面向下移动,同时保持一致的品牌感。

提示词示例

AI 提示词示例

复制这些提示词,用你喜欢的 AI 工具生成落地页设计提示词设计。

SaaS 产品落地页

General
Design a SaaS product landing page with these sections in order: 1) Hero with headline, subheadline, CTA button, and product screenshot. 2) Logo bar of trusted companies. 3) Three-column feature grid with icons. 4) Large product demo section with screenshot and feature callouts. 5) Pricing table with 3 tiers. 6) Testimonial carousel with photos and quotes. 7) FAQ accordion. 8) Final CTA section. Use a modern, clean design with generous whitespace.

v0 创业公司落地页

v0
Create a modern startup landing page with shadcn/ui. Hero section with large heading, gradient text accent, subtext, two CTA buttons (primary + secondary), and a browser mockup image. Below: animated stats counter bar, 3-column feature cards with Lucide icons, a testimonial section with avatar + quote cards, and a dark footer with newsletter signup. Use Inter font, smooth scroll, and a purple-to-blue gradient accent.

Cursor 落地页

Cursor
Build a Next.js landing page with Tailwind CSS and Framer Motion. Structure: sticky navbar with logo and CTA, full-viewport hero with animated gradient background and floating UI mockup, trust bar with grayscale logos, alternating left-right feature sections with images, pricing cards with popular plan highlighted, FAQ with accordion, and footer. Implement smooth scroll-triggered animations using Framer Motion's useInView.

Claude 落地页

Claude
Generate a complete landing page as a React component. Include: responsive hero with headline (48px desktop, 32px mobile), description paragraph, and primary CTA button. Feature section with 2x3 grid of cards, each with an icon, title, and description. Social proof section with company logos and a stat bar (e.g., '10K+ users'). Testimonial cards with star ratings. Final CTA with contrasting background color. All sections should have consistent max-w-6xl centering and py-24 spacing. Use Tailwind CSS.

相关风格

相关风格

探索这些风格获取现成的 tokens 和组件。

全屏英雄区布局

expressive / layout

Apple 风格

minimal / visual

Stripe 风格

modern / visual

玻璃拟态

modern / visual

现代渐变风

expressive / visual

极简扁平风

minimal / visual

适用场景

最佳使用场景

SaaS 产品发布

发布新软件产品,展示功能亮点和定价。

App 下载页

移动应用推广页,包含截图、评价和下载链接。

活动报名页

会议或网络研讨会落地页,包含日程、演讲者和报名表。

作品集展示

个人或机构作品集,展示项目亮点和联系表单。

常见问题

常见问题解答

Previews

Example previews and starter templates

Treat these templates as landing page structure references: hero, social proof, pricing, FAQ, and CTA rhythm usually produce better prompts than a generic landing page brief.

SaaS Landing Page

A strong baseline for hero, feature, pricing, FAQ, and CTA flow.

Open template

Startup Landing Page

Useful for launch energy, waitlist flows, and dark gradient product storytelling.

Open template

Glass Landing Page

Great when the prompt needs layered cards, translucency, and a softer tech feel.

Open template

Brutal Landing Page

A sharper choice for brand-heavy launches that need stronger visual signature.

Open template

想要完整的设计系统?

StyleKit 提供 120+ 种视觉风格,每种都有完整的 design tokens、组件配方和可导出的 AI Rules。

浏览风格库更多提示词主题

StyleKit

精选网页设计风格库,帮助 AI 生成更好看的网站。

导航

风格库模板指南博客更新日志

资源

UI 设计提示词落地页提示词Dashboard 提示词Tailwind UI 提示词暗黑模式提示词GitHub 仓库

保持更新

订阅即表示您同意我们的 隐私政策 和 服务条款。


(c) 2026 StyleKit. 开源项目。

关于联系与支持隐私政策服务条款基于 Editorial 风格构建