导航菜单
🏠 首页 📊 建站策略 📝 实操教程 🤖 AI提示词 🎯 主题模板 📈 流量转化
本页目录
📌 提示词公式 📌 页面生成模板 📌 交互组件Prompt 📌 风格预设Prompt 📌 颜色与字体Prompt

火烈鸟出海 / Figma建站 / AI提示词模板

Figma Make AI提示词模板大全
电商独立站页面生成Prompt完全指南

从6要素提示词公式到10大场景页面模板、5大交互组件Prompt、6大风格预设、7种色彩字体方案，零代码一键生成专业级跨境电商独立站，Prompt即设计

📅 更新时间：2026年6月 ⏱️ 阅读时长：约15分钟 📖 字数：约7200字 👁️ 阅读量：18,500+
📝 提示词公式 📄 10场景模板 🧩 组件Prompt 🎨 风格预设 🌈 色彩字体

Figma Make AI提示词公式

掌握结构化提示词公式，让Figma Make精准生成你想要的电商独立站页面

📐 通用公式

Figma Make AI提示词通用公式

[页面类型] + [风格] + [布局结构] + [颜色方案] + [关键元素] + [品牌调性]

将以上6大要素按顺序组合成一句话Prompt，即可让Figma Make精准理解设计需求，生成符合预期的页面原型。各要素越具体，生成效果越精准。

🔍 公式要素拆解

详细解析提示词公式中每个要素的含义、写法和示例

要素 说明 写法建议 示例
[页面类型] 明确要生成的页面/区域类型 使用标准页面名称，如Homepage、Product Page、Landing Page e-commerce homepage
[风格] 整体视觉风格方向 可组合多个形容词，如minimal、modern、luxury、playful minimal & elegant
[布局结构] 页面布局和模块排布方式 描述布局类型，如grid、single column、split、cards grid layout with 3-column
[颜色方案] 主色、辅色、背景色等色彩信息 提供HEX色值或描述配色风格（pastel/neon/monochrome） #A259FF primary, #F5F5F7 bg
[关键元素] 页面中必须包含的核心组件/模块 列举关键模块，如hero banner、product grid、testimonials hero with CTA, product grid, footer
[品牌调性] 品牌传递的情感和风格气质 使用形容词描述，如trustworthy、innovative、premium、friendly premium skincare brand, trustworthy
💡 完整示例

完整Prompt示例

将6大要素组合后，一个完整的Figma Make Prompt示例：

📋 English Prompt
Design a modern e-commerce homepage for a premium skincare brand, with a minimalist layout structure, using a soft pastel color palette (#F5E6F0, #A259FF, #FFFFFF), featuring a large hero banner with product showcase, smooth navigation bar, product grid section with 4 items, customer testimonials carousel, and a newsletter signup form in footer. Brand tone should be elegant, trustworthy, and sophisticated. Typography: Playfair Display for headings, Inter for body text. Ensure responsive design with breakpoints at 768px and 1024px.
📋 中文Prompt
设计一个现代简约的高端护肤品牌电商首页，采用极简布局结构，柔和粉紫配色方案（#F5E6F0主背景、#A259FF品牌色、#FFFFFF卡片白），包含大型Hero横幅展示主打产品、流畅导航栏、4列产品网格展示区、客户评价轮播模块、底部邮件订阅表单。品牌调性优雅、可信赖、精致。标题字体使用Playfair Display，正文字体使用Inter。适配768px和1024px响应式断点。

独立站页面生成Prompt模板

覆盖跨境电商独立站10大核心页面场景，每个模板包含中文/英文Prompt、推荐参数和效果说明

1

首页Hero区设计

目标页面：Homepage Hero Section 推荐参数：1920×800px · 大图/视频背景 效果说明：快速抓住用户注意力，传达品牌核心价值
🌐 English Prompt
Design a full-width hero section for an e-commerce homepage. Background: high-quality lifestyle product photo with dark overlay gradient. Left side: bold headline (48px, font-weight 700), subheadline (20px), and a primary CTA button (rounded 12px, #A259FF gradient). Right side: floating product image with subtle shadow. Include top navigation bar with logo, menu items (Home, Shop, About, Contact), and cart icon. Smooth entrance animation for text elements. Responsive: stack vertically on mobile.
🇨🇳 中文Prompt
设计一个电商首页的全宽Hero区域。背景：高质量生活方式产品照片搭配深色渐变遮罩。左侧：醒目标题（48px，字重700）、副标题（20px）、主CTA按钮（圆角12px，#A259FF渐变）。右侧：浮起的产品图片带柔和阴影。包含顶部导航栏（Logo、首页、商城、关于、联系、购物车图标）。文字元素带平滑入场动画。移动端响应式堆叠为纵向布局。
2

产品列表/集合页

目标页面：Product Collection / Category Page 推荐参数：3-4列网格 · 筛选侧边栏 效果说明：高效展示多款产品，方便用户浏览对比
🌐 English Prompt
Design a product collection page for an online store. Left sidebar: filter options (category, price range, color, size, rating) with checkbox inputs and a price slider. Main area: 3-column responsive product grid with product cards (product image 1:1 aspect ratio, product name, price with sale badge, star rating, color swatches, "Add to Cart" button). Top: category title, sort dropdown, result count. Pagination at bottom. Card style: white background, border-radius 12px, soft shadow on hover.
🇨🇳 中文Prompt
设计在线商店的产品集合页。左侧边栏：筛选选项（品类、价格区间、颜色、尺寸、评分）含复选框输入和价格滑块。主区域：3列响应式产品网格，产品卡片（产品图片1:1比例、产品名称、带折扣标签的价格、星级评分、颜色选项、"加入购物车"按钮）。顶部：品类标题、排序下拉、结果数量。底部页码。卡片样式：白色背景、圆角12px、悬停时柔和阴影。
3

产品详情页

目标页面：Product Detail Page 推荐参数：左右分栏 · 图片画廊+详情区 效果说明：完整展示产品信息，驱动购买决策
🌐 English Prompt
Design a product detail page with split layout. Left (55%): main product image with thumbnail gallery below, image zoom on hover, navigation arrows. Right (45%): breadcrumb trail, product title (24px), price (32px, #FF6B35), rating stars with review count, color/variant selector with swatches, size selector (pill buttons), quantity selector with +/- controls, "Add to Cart" button (full-width, 56px height, rounded 12px, #A259FF gradient), "Buy Now" secondary button, accordion sections below for Description, Shipping Info, Reviews. Trust badges (secure payment, free shipping).
🇨🇳 中文Prompt
设计左右分栏的产品详情页。左侧（55%）：主产品图片下方缩略图画廊、悬停放大、导航箭头。右侧（45%）：面包屑导航、产品标题（24px）、价格（32px，#FF6B35）、星级评分带评论数、颜色/款式选择器（色块）、尺寸选择器（药丸按钮）、数量选择器（+/-控制）、"加入购物车"按钮（全宽、56px高、圆角12px、A259FF渐变）、"立即购买"辅按钮。下方手风琴式折叠区块：产品描述、配送信息、用户评价。信任徽章（安全支付、免费配送）。
4

About Us品牌页

目标页面：About Us / Brand Story Page 推荐参数：长滚动 · 故事化叙事 效果说明：建立品牌信任，传递品牌价值观
🌐 English Prompt
Design an About Us page with storytelling scroll narrative. Section 1: hero with full-width brand image overlay, "Our Story" headline, brand mission statement. Section 2: timeline layout showing company milestones (2018-2026) with alternating left-right content cards. Section 3: team member grid (4 columns, circular photos, names, roles, short bios). Section 4: brand values section with icon cards (Quality, Innovation, Sustainability, Customer First). Section 5: CTA section "Join Our Journey" with button. Smooth scroll-triggered animations. Warm, authentic brand tone.
🇨🇳 中文Prompt
设计故事化滚动叙事的"关于我们"页面。第一部分：Hero全宽品牌形象图叠加"我们的故事"标题和品牌使命陈述。第二部分：时间线布局展示公司里程碑（2018-2026），左右交替内容卡片。第三部分：团队成员网格（4列、圆形照片、姓名、职位、简介）。第四部分：品牌价值观区域（品质、创新、可持续、客户至上）图标卡片。第五部分：CTA区域"加入我们的旅程"按钮。平滑滚动触发动画。温暖真实的品牌调性。
5

购物车页面

目标页面：Shopping Cart Page 推荐参数：左列表+右侧边栏 · 购物车/订单摘要 效果说明：清晰展示购物车内容，推动结算转化
🌐 English Prompt
Design a shopping cart page with two-column layout. Left (65%): cart item list with each row showing product thumbnail (80×80px, rounded 8px), product name with variant info, unit price, quantity stepper (-/+/delete), line total, remove button. Header row with column labels. Bottom: "Continue Shopping" link and cart note textarea. Right (35%): order summary card with subtotal, shipping estimate, tax estimate, discount code input with "Apply" button, total amount (bold, 24px), "Proceed to Checkout" primary button (full-width, 56px). Trust badges below button. Empty cart state with illustration and "Shop Now" CTA.
🇨🇳 中文Prompt
设计双栏布局的购物车页面。左侧（65%）：购物车商品列表，每行展示商品缩略图（80×80px、圆角8px）、商品名称及规格信息、单价、数量调节器（-/+/删除）、行小计、移除按钮。顶部表头列标签。底部："继续购物"链接和购物车备注文本框。右侧（35%）：订单摘要卡片含小计、运费估算、税费估算、折扣码输入框+"应用"按钮、总计金额（粗体24px）、"去结算"主按钮（全宽、56px）。按钮下方信任徽章。空购物车状态含插图和"现在去购物"按钮。
6

结账页面

目标页面：Checkout Page 推荐参数：分步式 · 进度指示器 · 最小化设计 效果说明：简化结账流程，降低购物车放弃率
🌐 English Prompt
Design a minimalist checkout page with step progress indicator (3 steps: Shipping → Payment → Confirmation). Current step highlighted in #A259FF. Form section with clearly labeled input fields: email, first/last name (half-width), address, city, country dropdown, ZIP code, phone. Input style: large (48px height), rounded 10px, clean border. Payment method selection with card icons (Visa, Mastercard, PayPal, Apple Pay). Card number, expiry, CVV fields. Right sidebar: order summary (mini cart with item thumbnails, totals). "Place Order" button (full-width, 56px, gradient). Security badges and guarantee text.
🇨🇳 中文Prompt
设计极简风格的结账页面，带步骤进度指示器（3步：配送信息 → 支付 → 确认）。当前步骤高亮为#A259FF。表单区域包含清晰标记的输入框：邮箱、名/姓（半宽）、地址、城市、国家下拉、邮编、电话。输入样式：大号（48px高）、圆角10px、干净边框。支付方式选择带卡片图标（Visa、Mastercard、PayPal、Apple Pay）。卡号、有效期、CVV安全码字段。右侧边栏：订单摘要（迷你购物车含商品缩略图、合计金额）。"提交订单"按钮（全宽、56px、渐变）。安全认证徽章和保证说明。
7

博客文章页

目标页面：Blog Article Page 推荐参数：文章区+侧边栏 · 干净排版 效果说明：优化阅读体验，提升SEO效果
🌐 English Prompt
Design a blog article page with clean typography and generous whitespace. Left (70%): article content area with featured image (full-width, rounded 16px), article title (36px, Playfair Display), author avatar+name+date+read time meta bar, social share buttons (sticky left), article body text (18px, line-height 1.8, max-width 680px), pull quotes styled with left border accent (#A259FF), heading hierarchy (H2/H3 properly styled), inline image with caption, tags at bottom, author bio box, comments section with avatar+textarea+reply button. Right (30%): sidebar with search bar, table of contents (sticky), recent posts list, newsletter signup card, category list.
🇨🇳 中文Prompt
设计干净排版的博客文章页，留白充足。左侧（70%）：文章内容区，含特色图片（全宽、圆角16px）、文章标题（36px、Playfair Display）、作者头像+姓名+日期+阅读时间元信息栏、社交分享按钮（左侧固定）、正文（18px、行高1.8、最大宽度680px）、引用块（左侧#A259FF边框强调）、标题层级（H2/H3正确样式）、内联图片及说明、底部标签、作者简介框、评论区域（头像+文本框+回复按钮）。右侧（30%）：侧边栏含搜索框、目录（固定定位）、近期文章列表、邮件订阅卡片、分类列表。
8

联系我们页面

目标页面：Contact Us Page 推荐参数：左右分栏 · 表单+联系信息 效果说明：方便客户咨询，提升客户服务体验
🌐 English Prompt
Design a contact page with two equal columns. Left: contact form with fields (Name, Email, Phone, Subject dropdown, Message textarea, File attachment option), all inputs rounded 12px with focus state (#A259FF border), "Send Message" submit button (full-width, 56px, gradient). Form validation states (success/error) included. Right: contact info cards (Address with map placeholder, Phone with clickable number, Email with mailto link, Business hours), social media icon links (Instagram, Facebook, TikTok, YouTube), FAQ quick links below. Map embed placeholder. Top: page title and short intro text. Clean, professional feel.
🇨🇳 中文Prompt
设计左右等宽的联系我们页面。左侧：联系表单含字段（姓名、邮箱、电话、主题下拉、留言文本框、附件上传选项），所有输入框圆角12px带聚焦态（#A259FF边框），"发送消息"提交按钮（全宽、56px、渐变）。含表单验证状态（成功/错误）。右侧：联系信息卡片（地址含地图占位、电话含可点击号码、邮箱含mailto链接、营业时间）、社交媒体图标链接（Instagram、Facebook、TikTok、YouTube）、下方FAQ快速链接。地图嵌入占位。顶部页面标题和简短介绍。简洁专业的风格。
9

FAQ页面

目标页面：FAQ / Help Page 推荐参数：分类折叠式 · 搜索框 效果说明：自助解答常见问题，降低客服压力
🌐 English Prompt
Design an FAQ page with categorized accordion layout. Top: search bar with icon (rounded 12px, placeholder "Search questions..."). Category tabs/pill buttons: All, Shipping, Orders, Returns, Payment, Products. Below: accordion items grouped by category, each with question (16px, font-weight 600, chevron icon) and expandable answer (15px, line-height 1.7, #636366). First item open by default. Smooth expand/collapse animation. Bottom: "Still have questions?" CTA section with contact link and response time promise. Clean layout with max-width 800px centered.
🇨🇳 中文Prompt
设计分类手风琴折叠布局的FAQ页面。顶部：带图标的搜索框（圆角12px，占位文字"搜索问题..."）。分类标签/药丸按钮：全部、配送、订单、退换货、支付、产品。下方：按类别分组的手风琴项目，每项含问题（16px、字重600、chevron图标）和可展开的答案（15px、行高1.7、#636366）。第一项默认展开。平滑展开/收起动画。底部："还有问题？"CTA区域含联系链接和响应时间承诺。居中布局，最大宽度800px。
10

促销Landing Page

目标页面：Promotional Landing Page 推荐参数：单页长滚动 · 强CTA · 倒计时 效果说明：高度聚焦转化，适用于大促/新品发布
🌐 English Prompt
Design a conversion-focused promotional landing page for a seasonal sale event. Full-width sections with parallax scrolling. Section 1: Hero with bold discount headline "UP TO 50% OFF" (72px), countdown timer (days/hours/minutes/seconds), animated CTA "Shop the Sale" button (pulse animation, #FF6B35 gradient). Section 2: Featured product grid with discount badges and "Quick Add" buttons. Section 3: Social proof bar (real-time purchase notifications fading in/out). Section 4: Benefit cards (Free Shipping, Easy Returns, Secure Payment, 24/7 Support). Section 5: Email capture form with discount incentive "Get 10% OFF". Section 6: Footer with links. High-energy, urgent but trustworthy feel.
🇨🇳 中文Prompt
设计以转化为目标的季节性促销落地页。全宽区块含视差滚动效果。区块1：Hero大幅折扣标题"低至5折"（72px）、倒计时器（天/时/分/秒）、动画CTA"立即抢购"按钮（脉冲动画、#FF6B35渐变）。区块2：特色产品网格含折扣标签和"快速加入"按钮。区块3：社交证明栏（实时购买通知淡入淡出）。区块4：权益卡片（免运费、轻松退换、安全支付、全天候客服）。区块5：邮箱捕获表单含"获取10%折扣"激励。区块6：带链接的页脚。高能量、紧迫但可信赖的氛围。

交互组件Prompt

常用电商独立站交互组件的Prompt模板，可直接复制使用

🧩 五大核心交互组件Prompt

导航菜单、产品卡片、按钮/CTA、表单组件、轮播/滑块Prompt模板

组件 英文Prompt 中文Prompt 关键参数
导航菜单
Navigation		 Design a responsive e-commerce navigation bar: left logo (24px height), center menu items (Home, Shop, About, Blog, Contact) with dropdown on hover for "Shop" showing subcategories, right side search icon + cart icon with badge count + user account icon. Mobile: hamburger menu icon reveals full-screen overlay menu with smooth slide animation. Sticky on scroll with backdrop blur. Min-height: 56px. Active state: #A259FF underline indicator. 设计响应式电商导航栏：左侧Logo（24px高）、居中菜单项（首页、商城、关于、博客、联系），"商城"悬停下拉显示子分类；右侧搜索图标+购物车图标（带数量徽标）+用户账户图标。移动端：汉堡菜单图标点击后全屏覆盖菜单，平滑滑入动画。滚动时固定定位+背景模糊。最小高度56px。激活态：#A259FF下划线指示。 56px高
圆角8px
悬停下拉
产品卡片
Product Card		 Design an e-commerce product card: square product image (1:1 ratio, rounded 12px) with hover zoom effect, product title (16px, font-weight 600, line-clamp 2), price (18px, #FF6B35, font-weight 700), original price with strikethrough if on sale, star rating (4.5★) with review count, color swatch options (4 small circles), "Add to Cart" button (full-width, 44px height, rounded 10px, #A259FF, appears on hover in desktop, always visible on mobile). Card: white bg, border-radius 12px, padding 16px, soft shadow, hover: translateY(-2px) with deeper shadow. 设计电商产品卡片：方形产品图片（1:1比例、圆角12px）悬停放大效果、产品标题（16px、字重600、最多2行）、价格（18px、#FF6B35、字重700）、原价（促销时加删除线）、星级评分（4.5★）带评论数、颜色选项（4个小圆点）、"加入购物车"按钮（全宽、44px高、圆角10px、#A259FF，桌面端悬停显示，移动端常显）。卡片：白色背景、圆角12px、内边距16px、柔和阴影、悬停translateY(-2px)+更深阴影。 1:1图片
44px按钮
悬停动效
按钮/CTA
Button/CTA		 Design a set of e-commerce button variants: 1) Primary CTA button: linear-gradient(#A259FF, #7B2FF7), text white, 56px height, padding 24px 40px, border-radius 12px, font-weight 600, font-size 17px, hover: brightness 110%, transform translateY(-1px). 2) Secondary button: white bg, #A259FF border 2px, same size, hover: bg #F8F6FF. 3) Ghost button: transparent bg, #A259FF text, no border, hover: bg rgba(162,89,255,0.08). 4) Icon button: 44×44px, rounded 10px. 5) CTA with arrow icon on right. All with min-touch-target 44px. 设计电商按钮变体组：1）主CTA按钮：linear-gradient(#A259FF, #7B2FF7)、白色文字、56px高、内边距24px 40px、圆角12px、字重600、字号17px、悬停亮度110%+上移1px。2）辅按钮：白色背景、#A259FF边框2px、相同尺寸、悬停背景#F8F6FF。3）幽灵按钮：透明背景、#A259FF文字、无边框、悬停背景rgba(162,89,255,0.08)。4）图标按钮：44×44px、圆角10px。5）右侧带箭头图标的CTA按钮。全部最低触摸目标44px。 56px高
圆角12px
44px触控
表单组件
Form		 Design a clean e-commerce form component: input fields with 48px height, border-radius 10px, border 1.5px solid #E0E0E0, padding 0 16px, font-size 16px. Focus state: border #A259FF, box-shadow 0 0 0 3px rgba(162,89,255,0.15). Label above input: 14px, font-weight 500, color #2D3436, margin-bottom 6px. Error state: border #FF3B30, error message below (12px, #FF3B30). Success state: border #34C759. Select dropdown with custom chevron. Textarea with 120px min-height. Checkbox/radio: custom styled, rounded 4px for checkbox, circle for radio, checked: #A259FF bg. 设计简洁电商表单组件：输入框48px高、圆角10px、边框1.5px solid #E0E0E0、内边距0 16px、字号16px。聚焦态：边框#A259FF、阴影0 0 0 3px rgba(162,89,255,0.15)。标签在输入框上方：14px、字重500、颜色#2D3436、底部外边距6px。错误态：边框#FF3B30、下方错误提示（12px、#FF3B30）。成功态：边框#34C759。自定义下拉选择框带chevron图标。文本域最小高度120px。复选框/单选钮：自定义样式、复选框圆角4px、单选钮圆形、选中态#A259FF背景。 48px高
圆角10px
聚焦态边框
轮播/滑块
Carousel		 Design an e-commerce product carousel/slider: container with horizontal scroll, snap scrolling behavior. Each slide: product card (280px width, white bg, rounded 12px, shadow). Left/right arrow navigation buttons (44×44px, white bg, shadow, rounded-full, hover: bg #F8F6FF). Bottom dot indicators (active dot: #A259FF 10px, inactive: #D0D0D0 8px). Auto-play with 5s interval, pause on hover. For hero slider: full-width, 600px height, text overlay on left side, CTA button, transition fade/slide effect. Swipe support on mobile. 设计电商产品轮播/滑块：水平滚动容器、吸附滚动行为。每张幻灯片：产品卡片（280px宽、白色背景、圆角12px、阴影）。左右箭头导航按钮（44×44px、白色背景、阴影、全圆角、悬停背景#F8F6FF）。底部圆点指示器（激活态#A259FF 10px、非激活态#D0D0D0 8px）。自动播放5秒间隔、悬停暂停。Hero轮播：全宽600px高、文字叠加在左侧、CTA按钮、淡入/滑动过渡效果。移动端支持滑动手势。 280px卡片
44px箭头
自动播放

风格预设Prompt

6大视觉风格预设，为你的独立站快速注入品牌个性

✦ 极简风格

Minimal / Minimalist

以留白和极简元素为核心，强调内容本身而非装饰。适合高端品牌、设计师品牌、精品电商。

🌐 Prompt
Design in a minimalist style with generous whitespace, clean typography, limited color palette (max 3 colors), no decorative elements, focus on content hierarchy. Use subtle dividers instead of boxes/borders. Sans-serif fonts only. Background: #F5F5F7 or #FFFFFF. Maximum simplicity with maximum clarity.
关键词：Minimal, Clean, Whitespace, Simple, Uncluttered
配色：#FFFFFF #F5F5F7 #2D3436
字体：Inter / SF Pro
✦ 轻奢风格

Light Luxury

运用金属感和高级质感材质，低调中彰显品质。适合美妆、饰品、家居等中高端品类。

🌐 Prompt
Design in a light luxury style with premium materials feel. Use gold/rose gold accent colors (#D4AF37, #B76E79), subtle gradients, glassmorphism effects (backdrop blur), refined serif typography for headings. Soft lighting effects, high-quality product imagery, elegant spacing (generous padding), thin lines (0.5-1px borders), and muted earthy tones for backgrounds.
关键词：Luxury, Premium, Elegant, Sophisticated, Refined
配色：#D4AF37 #B76E79 #F8F4F0
字体：Playfair Display / Cormorant Garamond
✦ 科技风格

Tech / Modern

融入科技感和未来感元素，适合3C电子、SaaS、创新品牌、数码产品电商。

🌐 Prompt
Design in a modern tech style with dark mode option. Use bold gradients (#2979FF to #A259FF), geometric shapes, glassmorphism, subtle grid patterns, micro-interactions, progress indicators, animated elements. Monospace or modern sans-serif fonts. High contrast, data visualization elements, dynamic lighting effects. Dark background (#0D0D12) with neon accent colors.
关键词：Tech, Modern, Digital, Futuristic, Dynamic
配色：#0D0D12 #2979FF #A259FF
字体：DM Mono / Inter / SF Mono
✦ 自然风格

Natural / Organic

以自然元素和大地色为主，传递环保、健康、有机的品牌价值。适合食品、保健品、户外、母婴品类。

🌐 Prompt
Design in a natural organic style with earthy color palette (#8B7355, #6B8E23, #F5F0E8). Use organic shapes (no sharp edges), nature-inspired textures, hand-drawn style illustrations or icons, warm lighting, botanical patterns. Soft rounded corners everywhere (16px+). Ample whitespace. Serif fonts with warm character. Photos with natural lighting and warm tones.
关键词：Natural, Organic, Earthy, Warm, Botanical
配色：#8B7355 #6B8E23 #F5F0E8
字体：Libre Baskerville / Source Serif Pro
✦ 活力风格

Playful / Energetic

使用鲜艳色彩和动感元素，传递年轻、活力的品牌个性。适合时尚、运动、潮牌、快消品。

🌐 Prompt
Design in a playful energetic style with vibrant colors (#FF6B35, #FF2D55, #FFD60A). Bold oversized typography, asymmetrical layouts, dynamic diagonal elements, fun illustrations, emoji/sticker elements, animated micro-interactions (bounce, wiggle). High contrast, rounded shapes, overlapping elements. Fun and youthful brand personality. Large buttons with hover animations.
关键词：Playful, Energetic, Vibrant, Fun, Youthful
配色：#FF6B35 #FF2D55 #FFD60A
字体：Poppins / Fredoka One / Nunito
✦ 高端风格

High-End / Premium

运用奢华材质和华美细节，彰显顶级品牌格调。适合奢侈品、高端定制、珠宝、顶级服务。

🌐 Prompt
Design in a high-end premium style with dark sophisticated palette (#1A1A2E, #2D3436, #C9A84C). Elegant serif typography (large 48px+ headings), generous whitespace (padding 60px+), full-bleed imagery, subtle parallax effects, marble or dark wood textures, gold foil accents (#C9A84C), sophisticated micro-animations on scroll. Minimal UI elements, focus on immersive visual experience.
关键词：High-End, Premium, Luxurious, Exclusive, Sophisticated
配色：#1A1A2E #2D3436 #C9A84C
字体：Cormorant Garamond / Didot / Bodoni

颜色与字体Prompt

色彩方案和字体搭配的Prompt模板，快速建立品牌视觉规范

🎨 色彩方案Prompt

在Prompt中指定色彩方案的几种有效方式

方案类型 Prompt写法 说明
直接指定色值 Color palette 在Prompt中直接提供HEX色值：
#A259FF #FF6B35 #2D3436 #F5F5F7
示例：Use a color palette with primary #A259FF, secondary #FF6B35, background #F5F5F7, and text #2D3436.
描述配色风格 Color style 用风格词汇描述整体配色方向：
Monochromatic - 单色系深浅变化
Complementary - 互补色搭配
Analogous - 邻近色和谐
Pastel - 柔和粉彩
Neon - 荧光鲜艳
Earthy - 大地色系
Dark mode - 暗色模式
指定渐变方案 Gradient 描述渐变方向和颜色：
示例：Use a linear-gradient(135deg, #A259FF, #7B2FF7) for primary buttons, and a subtle gradient from #F5F5F7 to #FFFFFF for section backgrounds.
完整色彩体系 Full system 在Prompt中定义完整色彩Token：
Primary: #A259FF | Secondary: #FF6B35 | Background: #F5F5F7 | Surface: #FFFFFF | Text Primary: #2D3436 | Text Secondary: #636366 | Text Tertiary: #8E8E93 | Success: #34C759 | Error: #FF3B30 | Border: #E0E0E0

🌈 推荐配色方案

适用于不同品类独立站的色彩搭配方案

方案名称 适用品类 主色 辅色 背景色 强调色
经典品牌 综合电商 #A259FF #FF6B35 #F5F5F7 #34C759
美妆护肤 美妆/护肤 #E8A0BF #C9A84C #FFF8F6 #A259FF
科技数码 3C/数码 #2979FF #00C853 #0D0D12 #FF2D55
时尚潮流 服装/潮牌 #2D3436 #FF2D55 #FFFFFF #FFD60A
健康有机 食品/母婴 #6B8E23 #8B7355 #F5F0E8 #E8A0BF
高端奢华 珠宝/奢侈品 #1A1A2E #C9A84C #F8F4F0 #B76E79

🔤 字体搭配Prompt

推荐的Google Fonts字体搭配方案及Prompt写法

搭配方案 标题字体 正文字体 风格定位 Prompt写法示例
优雅现代 Playfair Display Inter 优雅、时尚、高端感 Use Playfair Display (weight 700) for headings and Inter (weight 400/600) for body text. Heading sizes: H1 48px, H2 36px, H3 24px. Body: 16px line-height 1.6.
商务专业 Montserrat Open Sans 专业、可靠、国际化 Use Montserrat (weight 700/600) for headings and Open Sans (weight 400) for body text. Clean and professional typography suitable for B2B and corporate brands.
高端时尚 Cormorant Garamond Source Sans Pro 奢侈、艺术、精致 Use Cormorant Garamond (weight 600, italic) for headings and Source Sans Pro (weight 300/400) for body. Elegant serif paired with clean sans-serif for a luxury editorial feel.
极简统一 DM Sans DM Sans 简约、统一、现代 Use DM Sans for both headings and body text for a unified minimalist look. Heading weight 700, body weight 400. Consistent geometric sans-serif throughout.
活力创意 Poppins Nunito 年轻、活力、趣味 Use Poppins (weight 700) for bold headings and Nunito (weight 400/600) for body text. Rounded friendly shapes create a playful youthful brand personality.
高端奢华 Didot/Bodoni Cormorant Garamond 顶级、奢华、经典 Use Didot (weight 700) for display headings and Cormorant Garamond (weight 400) for body text. Classic high-fashion typography for luxury brand positioning.
📝 完整字体Prompt示例

字体搭配完整Prompt模板

可直接复制使用的字体Prompt，替换字体名称和品牌信息即可：

🌐 Typography Prompt Template
Typography specification for the entire website: - Heading Font: [Font Name] (Google Fonts) - H1: [size]px, weight [weight], letter-spacing [value] - H2: [size]px, weight [weight], letter-spacing [value] - H3: [size]px, weight [weight], letter-spacing [value] - Body Font: [Font Name] (Google Fonts) - Body: [size]px, weight [weight], line-height [value] - Small/Caption: [size]px, weight [weight], color [color] - Button Font: [Font Name], weight [weight], uppercase/regular - Navigation: [Font Name], weight [weight], size [size]px Maintain a clear type hierarchy with minimum 1.25x scale ratio between levels. Ensure all text meets WCAG AA contrast ratios against their backgrounds.

适合人群

无论你处于Figma建站的哪个阶段，这套提示词模板都能帮你跃升效率

🆕

Figma零基础新手

无需设计经验，直接用中文或英文Prompt描述需求，6要素公式帮你10分钟生成第一个专业设计稿。把精力从"怎么画"转移到"画什么"。

🛍️

跨境电商卖家

10大场景Prompt模板覆盖了你可能需要的所有电商页面类型，复制粘贴即可生成。新品上架、节日大促、品牌改版都能快速响应，不再受限于单一模板。

🎨

设计师 / 自由职业者

6大风格预设+7种色彩字体方案作为灵感起点，AI生成初稿后你专注于精细化调整。效率提升3-5倍，多接项目的同时保证设计品质。

💡

运营 / 市场人员

无需等待设计师排期，用交互组件Prompt直接生成按钮、表单、轮播等模块，快速搭建活动落地页和测试页面，A/B测试迭代从周级别压缩到小时级别。

💡 进阶技巧

Figma Make提示词优化小贴士

以下7条经验来自大量Prompt实验和实际项目验证，帮你写出更精准高效的Figma Make提示词：

  1. 英文Prompt准确度显著高于中文 — 实测显示，使用英文Prompt生成的页面布局准确度比中文高约40%，颜色还原度更高。建议先用中文构思框架，再翻译为英文Prompt输入。对于专业术语（如hero banner、grid layout、call-to-action），必须使用英文。
  2. 提供HEX色值比颜色名称更精准 — 写"primary color #A259FF"比"use purple"生成的色彩准确度提升约60%。建议同时提供主色(primary)、辅色(secondary)、背景(background)、文字(text)至少4个色值。
  3. Font名称要写完整的Google Fonts全名 — "Playfair Display"而非"Playfair"，"Source Sans Pro"而非"Source Sans"。如果一个字体有多个变体（如Inter有多个字重），建议明确指定weight值，如"Inter weight 400 for body, weight 700 for headings"。
  4. 组件尺寸参数越明确越好 — 模糊的"large button"远不如"CTA button: 56px height, border-radius 12px, full-width, gradient #A259FF to #7B2FF7"生成效果好。关键UI元素（按钮、输入框、卡片）建议同时提供height、width、border-radius、padding四个参数。
  5. 善用"负面指令"排除不需要的元素 — 在Prompt末尾加一句"no decorative elements, no unnecessary animations, no cluttered layout"可以有效避免AI过度设计的问题，让生成结果更干净简洁。
  6. 场景化Prompt优于抽象Prompt — "Design a product page for a luxury watch brand targeting 35-50 male professionals"比"Design a product page"生成的结果更符合实际需求。加入目标受众、使用场景、品牌背景三段上下文信息，AI理解深度提升明显。
  7. 迭代优化用"keep...but change..."句式 — 对生成结果不满意时，不要重新写整个Prompt，而是用"Keep the layout structure but change the color scheme to..."来保持好的部分、微调不满意的部分。这种增量修改方式效率最高，每次迭代约省70%时间。

更多Figma建站资源

探索火烈鸟出海的完整Figma零代码建站知识体系

📊

建站策略

从0到1的完整建站方法论

 📝

实操教程

手把手教你从注册到上线

 🎯

主题模板

即用型Figma独立站模板

 📈

流量转化

独立站运营与转化优化