提示词
System Prompt:高保真“Liquid Glass”主视觉区
核心布局:创建一个最大宽度为 1600px 的落地页主视觉区。背景应为纯白色,左上角带有细腻的分层渐变光晕(使用浅蓝色 #60B1FF 和 #319AFF 的模糊椭圆)。设计必须完全响应式,从移动端单列视图过渡到桌面端双列布局。
字体排印:
标题与品牌:使用 Fustat(Bold)。
正文与 UI:使用 Inter(Normal/Medium)。
主视觉标题:`更聪明地工作,更快速地达成目标`(75px,1.05 line-height,-2px tracking)。
“Strong Liquid Glass”Navbar:
位置:Sticky at top-[30px],居中,w-fit。
视觉效果:backdrop-blur-[50px],背景 rgba(255,255,255,0.3),rounded-[16px]。
保真细节:
外描边:1px solid rgba(0,0,0,0.1)。
内部高光阴影:inset 0px 4px 4px 0px rgba(255,255,255,0.25)。
项目:Logo `Taskly`(Fustat)、Nav 链接(首页、功能、公司、定价),以及带箭头图标的玻璃质感 `注册` 按钮。
玻璃质感 Orb(主视觉右侧):
来源 URL:https://future.co/images/homepage/glassy-orb/orb-purple.webm
混合模式:必须使用 mix-blend-screen 来滤除黑色背景。
缩放:scale-125,使其尺寸巨大,并稍微偏离中心溢出。
精确调色(CSS Filter):hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1)。这会将紫色资源转换为鲜明、高端的“Electric Brand Blue”,与主 CTA 相匹配。
主视觉内容(主视觉左侧):
社会认同:一个 `2700+ 位客户评分 4.9/5` 徽章,带五颗橙色 #FF801E 星星。
副标题:`轻松管理项目、与团队协作,并借助我们直观的任务管理工具实现目标。`(18px,Inter,-1px tracking)。
主要 CTA:`立即开始` 按钮。
颜色:rgba(0,132,255,0.8),搭配 backdrop-blur-[2px]。
细节:rounded-[16px]、白色文字、内部高光阴影 inset 0px 4px 4px 0px rgba(255,255,255,0.35),以及白色圆形箭头图标。
动画:悬停时 Scale 1.02,并带平滑过渡。
页脚 Logo:在底部加入 `深受顶级产品公司的信赖` 区域,其中包含 5 个灰度 SVG Logo(例如科技公司的占位 Logo),以 gap-[100px] 间隔排列。
面向开发者的关键技术规格:
Video Tag:autoPlay loop muted playsInline。
Container:为背景光晕使用 relative wrapper,为内容使用 z-10 main container。
平滑处理:应用 -webkit-font-smoothing: antialiased,以获得最清晰的字体呈现。原文提示词(English)
System Prompt: High-Fidelity "Liquid Glass" Hero Section
Core Layout: Create a 1600px max-width landing page hero section. The background should be pure white with a subtle, layered gradient glow in the top-left (using blurred ellipses in light blue #60B1FF and #319AFF). The design must be fully responsive, transitioning from a single-column mobile view to a dual-column desktop layout.
Typography:
Headlines & Brand: Use Fustat (Bold).
Body & UI: Use Inter (Normal/Medium).
Hero Headline: "Work smarter, achieve faster" (75px, 1.05 line-height, -2px tracking).
The "Strong Liquid Glass" Navbar:
Position: Sticky at top-[30px], centered, w-fit.
Visuals: backdrop-blur-[50px], background rgba(255,255,255,0.3), rounded-[16px].
Fidelity Details:
Outer Stroke: 1px solid rgba(0,0,0,0.1).
Inner Highlight Shadow: inset 0px 4px 4px 0px rgba(255,255,255,0.25).
Items: Logo "Taskly" (Fustat), Nav links (Home, Features, Company, Pricing), and a glassy "SignUp" button with an arrow icon.
The Glassy Orb (Hero Right):
Source URL: https://future.co/images/homepage/glassy-orb/orb-purple.webm
Blending Mode: Must use mix-blend-screen to filter the black background.
Scaling: scale-125 to make it massive and bleed slightly off-center.
Exact Color Grade (CSS Filter): hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1). This transforms the purple asset into a vibrant, high-end "Electric Brand Blue" that matches the primary CTA.
Hero Content (Hero Left):
Social Proof: A "Rated 4.9/5 by 2700+ customers" badge with five orange #FF801E stars.
Subheadline: "Effortlessly manage your projects, collaborate with your team, and achieve your goals with our intuitive task management tool." (18px, Inter, -1px tracking).
Primary CTA: "Get Started Now" button.
Color: rgba(0,132,255,0.8) with backdrop-blur-[2px].
Details: rounded-[16px], white text, inner highlight shadow inset 0px 4px 4px 0px rgba(255,255,255,0.35), and a white circular arrow icon.
Animation: Scale 1.02 on hover with a smooth transition.
Footer Logos: Include a "Trusted by Top-tier product companies" section at the bottom with 5 grayscale SVG logos (e.g., placeholder logos for tech companies) spaced at gap-[100px].
Key Technical Specs for the Developer:
Video Tag: autoPlay loop muted playsInline.
Container: Use a relative wrapper for the background glow and a z-10 main container for the content.
Smoothing: Apply -webkit-font-smoothing: antialiased for the sharpest typography.