快餐小程序首页设计方案

小鱼号小程序首页
图片生成提示词汇总

文档版本：V1.0
生成日期：2026年07月09日
品牌主色：#E84118 · 点缀金：#D4A373 · 背景：#F8F5F2

文档概述
本文档从小鱼号小程序首页 UI 设计稿（xiaoyuhao-homepage.html）中逐一提取所有需要替换为真实图片的视觉占位元素，按模块分类整理为可直接交付给 AI 图像生成工具（Midjourney / DALL·E / Stable Diffusion 等）的高质量提示词。

每个提示词均标注了对应的模块名称、编号、目标尺寸、风格定位和使用场景，确保设计团队和开发团队能准确还原设计意图。

品牌设计规范参考
• 品牌主色：#E84118（活力红）
• 点缀金：#D4A373（暖金色）
• 辅助绿：#1E8449（自然绿）
• 浅底色：#F8F5F2（暖米灰）
• 卡片圆角：12px
• 字体：Noto Sans SC（思源黑体）
• 整体风格：年轻活力、温暖亲和、国潮新中式餐饮调性

模块一：Banner 轮播图

轮播 Banner 位于首页顶部最显眼位置，共 3 张，自动轮播间隔 4 秒。每张需使用真实菜品/品牌摄影图片替换当前 CSS 渐变 + emoji 占位。主视觉位于右侧（140px 宽圆形区域内），文案区位于左侧，需保留足够的文字安全区。
提示词 1-1: 招牌小鱼饭 · 第二份半价

尺寸规格	398 × 180px（小程序轮播Banner）
风格定位	温暖诱人的美食摄影风格，突出蒸腾热气与金黄鱼汤质感。暖色调为主，背景柔和。
使用场景	Banner Slide 1 — 限时特惠活动主推，首页首屏第一张轮播图，用于吸引用户立即点击"开始点餐"

🀄 中文提示词：
A tantalizing close-up food photograph of a signature Chinese fish rice bowl ("小鱼饭"),
steaming hot with golden aromatic broth, tender white fish fillets arranged beautifully
over steamed white rice, garnished with fresh green scallions and cilantro.
Warm cozy lighting, shallow depth of field focusing on the fish.
A subtle "50% OFF" badge in the corner in brand red (#E84118).
The composition has a clean left area for text overlay.
High resolution, 3:2 aspect ratio, commercial food photography style,
appetizing and inviting mood. Warm cream background.
--ar 398:180 --style raw --v 6.1

提示词 1-2: 储值享 9 折优惠

尺寸规格	398 × 180px（小程序轮播Banner）
风格定位	高端质感插画风格，金色与红色的奢华调性。
使用场景	Banner Slide 2 — 会员储值推广，首页第二张轮播图，引导用户点击"去储值"

🀄 中文提示词：
A premium brand promotional illustration for a Chinese restaurant loyalty program,
featuring an elegant gold membership card illuminated by soft golden light,
surrounded by subtle floating sparkle particles in warm gold (#D4A373) and brand red (#E84118).
The composition has a sense of exclusivity and luxury.
A "10% OFF" or "9折" text area in elegant gold typography.
Clean left area for overlay text. Dark warm gradient background suggesting
a premium dining atmosphere. High-end commercial illustration style.
--ar 398:180 --style raw --v 6.1

提示词 1-3: 麻辣鲜香水煮鱼 · 新品上市

尺寸规格	398 × 180px（小程序轮播Banner）
风格定位	鲜艳浓烈的四川美食摄影风格，红辣椒与热油是视觉焦点。
使用场景	Banner Slide 3 — 新品上市推广，首页第三张轮播图，引导用户点击"尝鲜"

🀄 中文提示词：
A mouth-watering Sichuan-style spicy boiled fish ("水煮鱼") food photograph,
vibrant red chili peppers floating in bubbling hot chili oil,
delicate white fish slices, numbing Sichuan peppercorns scattered on top,
fresh chopped scallions and sesame seeds as garnish.
Steam rising dramatically, captured with dramatic backlighting.
Deep red and warm tones dominate, creating an intense appetite appeal.
A small "NEW" badge in green (#1E8449) at the corner.
Clean left area for text overlay. Commercial food photography,
high contrast, ultra-detailed, 3:2 aspect ratio.
--ar 398:180 --style raw --v 6.1

模块二：核心功能按钮图标

首页最大的两个交互入口——「点餐」和「储值」，分别使用品牌红渐变底和白底金点缀。按钮内含圆形图标区域（56×56px），作为视觉焦点引导用户操作。
提示词 2-1: 点餐按钮图标

尺寸规格	56 × 56px（圆形图标，展示于品牌红渐变按钮内）
风格定位	极简线性图标风格，白色半透明圆形底上的食物廓形。
使用场景	点餐按钮（193×112px）图标区，功能含「堂食·自提」，使用品牌红 (#E84118) 渐变底

🀄 中文提示词：
A minimalist flat vector icon on a translucent white circular background,
depicting a steaming hot bowl with chopsticks, simple clean line art style,
warm and friendly food-related iconography.
The icon should suggest both dine-in and takeout functionality.
White/cream foreground on a semi-transparent white circular badge.
Flat design, no gradient, 1-2px stroke weight, rounded terminals.
Modern mobile app icon style, suitable for a Chinese restaurant mini-program.
--ar 1:1

提示词 2-2: 储值按钮图标

尺寸规格	56 × 56px（圆形图标，展示于白色按钮内，暖金底色）
风格定位	温润精致的图标风格，金币/钱包元素 + 金色调。
使用场景	储值按钮（193×112px）图标区，功能含「充200送20」，使用白色底 + 金色缎带角标"省"

🀄 中文提示词：
A minimalist flat vector icon on a warm gold (#FFF8F0) circular background,
depicting a stylized gold coin or a wallet with a coin, simple clean line art style.
The icon suggests stored value / prepaid recharge functionality.
Gold (#D4A373) foreground elements on a warm cream circular badge.
A small decorative sparkle beside the coin to suggest "savings" or "value".
Flat design, rounded terminals, friendly and premium feel.
Modern mobile app icon style, suitable for a Chinese restaurant mini-program.
--ar 1:1

模块三：热区图① — 副入口（优惠券 / 团餐 / 活动）

热区图① 是一张 398×160px 的插画底图，三等分为三个可点击热区。当前使用 SVG 矢量占位，最终需替换为真实插画/设计图。三个区域之间有弧形虚线分隔，点击时有涟漪动画反馈。
提示词 3-1: 优惠券区域插画

尺寸规格	约 133 × 160px（398×160 左侧 1/3 区域）
风格定位	扁平化插画风格，品牌红 (#E84118) 为主色调，票根设计元素。
使用场景	热区图① 左侧区域，功能：领取优惠券，热区 data-zone="优惠券"

🀄 中文提示词：
A flat vector illustration for a mobile app coupon section, featuring
a beautifully designed coupon ticket with perforated edges on both sides,
brand red (#E84118) accents, a prominent "¥5" denomination in bold red text,
a second ticket slightly rotated behind the first one for depth effect.
A small red pill badge reading "3张" (3 coupons available) below the tickets.
Title text space below: "领优惠券" / "限时领取".
Background: warm off-white (#FEFAF7) with subtle brand red tint.
Clean, modern Chinese mobile commerce illustration style.
The illustration should occupy the left third of a 398x160 canvas.
--ar 133:160 --style raw --v 6.1

提示词 3-2: 团餐区域插画

尺寸规格	约 132 × 160px（398×160 中间 1/3 区域）
风格定位	温润插画风格，暖金 (#D4A373) 为主色调，圆桌聚餐场景。
使用场景	热区图① 中间区域，功能：团餐企业订餐，热区 data-zone="团餐"

🀄 中文提示词：
A warm flat vector illustration for a corporate group meal booking section,
featuring a round dining table viewed from above with 3-4 stylized person
silhouettes seated around it, a center serving plate on the table,
crossed chopsticks and utensils for detail.
Warm gold (#D4A373 / #C08A5A) as the primary accent color,
suggesting hospitality and shared dining experience.
Title text space below: "团餐" / "企业订餐".
Background: warm off-white (#FEFAF7) with subtle gold tint.
Clean, inviting Chinese mobile illustration style,
suitable for a restaurant chain's B2B catering service.
The illustration should occupy the center third of a 398x160 canvas.
--ar 132:160 --style raw --v 6.1

提示词 3-3: 活动区域插画

尺寸规格	约 133 × 160px（398×160 右侧 1/3 区域）
风格定位	活泼庆祝插画风格，辅助绿 (#1E8449) 为主色调，礼盒与彩屑元素。
使用场景	热区图① 右侧区域，功能：限时活动福利入口，热区 data-zone="活动"

🀄 中文提示词：
A cheerful flat vector illustration for a promotional events section,
featuring a beautifully wrapped gift box in white with a green (#1E8449) lid,
a red cross ribbon with a decorative bow on top,
surrounding celebratory elements: small star sparkles, confetti dots,
and subtle floating particles in brand red and gold.
A feeling of excitement and limited-time offers.
Title text space below: "活动" / "限时福利".
Background: warm off-white (#FEFAF7) with subtle green tint.
Clean, festive Chinese mobile commerce illustration style.
The illustration should occupy the right third of a 398x160 canvas.
--ar 133:160 --style raw --v 6.1

模块四：热区图② — 加盟版图

热区图② 是一张 398×110px 的品牌插画底图，展示小鱼号全国加盟版图。当前使用 SVG 绘制抽象中国地图轮廓 + 城市光点 + 数据面板，最终需替换为更精致的品牌视觉设计图。整体为深色科技感底图，金色点缀，右侧有箭头引导点击。
提示词 4-1: 加盟版图主视觉

尺寸规格	398 × 110px（热区图底图）
风格定位	深色科技商务风格，金色点缀的高端数据可视化插画。
使用场景	热区图② 加盟入口，深色底图，中国地图 + 城市光点 + 数据面板，点击跳转加盟详情页

🀄 中文提示词：
A premium dark-themed brand illustration for a Chinese restaurant franchise
recruitment landing page, measuring 398x110px.

The composition includes:

• A dark navy/charcoal gradient background (#1E2A38 to #151E28) with a subtle
  fine grid pattern overlay suggesting data/technology.
• A simplified, elegant outline of the China map rendered in translucent white
  (opacity ~12%) in the right-center area, with 5 glowing golden (#D4A373)
  city dots pulsing at key locations (representing franchise cities).
• A soft radial golden glow behind the map area.
• Left side: bold white title text "加盟小鱼号" with letter-spacing,
  an elegant horizontal golden gradient line as a visual separator,
  and a subtitle "全国 50+ 城市火热招商中" in muted white (opacity 55%).
• Below subtitle: a dark glassmorphism stats panel with three metrics:
  "覆盖城市 50+" / "门店数量 200+" / "单店月均 15W+",
  each value in gold (#D4A373).
• Right side: a circular gold arrow button suggesting click-through action.

Overall aesthetic: sophisticated, trustworthy, premium franchise investment
visual. Dark tech-finance illustration style with warm gold highlights.
--ar 398:110 --style raw --v 6.1

模块五：会员系统头像

会员头像位于首页会员栏最左侧，是一个 32×32px 的圆形头像。当前使用 emoji（🐟）占位，需替换为品牌默认头像或用户真实头像。
提示词 5-1: 会员默认头像

尺寸规格	32 × 32px（圆形头像，会员栏最左侧）
风格定位	品牌化圆形头像，小鱼号品牌吉祥物或品牌标志简化版。
使用场景	会员栏（398×32px）左侧头像，当前显示 emoji🐟 + 黄金会员标签 + 积分/券数量

🀄 中文提示词：
A small circular brand avatar icon (32x32px) for a Chinese restaurant
mini-program member profile. The avatar features a cute minimalist fish icon
or the brand mascot "小魚" in a friendly, approachable style.
Gradient background from brand red (#E84118) to warm coral (#F05A3A),
with a thin white 2px border and subtle drop shadow.
The fish icon/mascot should be white or light cream, simple and recognizable
even at small sizes. Flat design with slight dimensionality.
Modern app avatar style, suitable for food & beverage brand.
--ar 1:1

模块六：底部 Tab 导航图标

底部固定 Tab 导航栏（430×56px）包含 4 个标签页：「首页」「点餐」「订单」「我的」。当前使用 emoji 占位，需替换为品牌统一风格的图标集。激活态使用品牌红 (#E84118)，非激活态使用浅灰 (#999999)。
提示词 6-1: 底部Tab导航图标组

尺寸规格	每个图标约 24 × 24px（展示于 430×56px 底部导航栏内）
风格定位	极简线性图标风格，与品牌调性一致，激活态/非激活态双色版本。
使用场景	底部 Tab 导航栏 430×56px，4个标签页图标，当前首页为激活态（品牌红）

🀄 中文提示词：
A set of 4 minimalist linear navigation icons for a Chinese restaurant
mini-program bottom tab bar, each approximately 24x24px:

1. Home (首页): A simple house/hut icon
2. Order (点餐): A bowl with chopsticks or a menu icon
3. Orders (订单): A receipt/list/clipboard icon
4. Profile (我的): A person/user silhouette icon

Style requirements:

• Clean 2px stroke weight, rounded caps and joins
• Two color versions per icon: active state in brand red (#E84118),
  inactive state in light gray (#999999)
• Consistent visual weight across all 4 icons
• Friendly, modern, slightly rounded aesthetic
• Suitable for Chinese food & beverage mini-program UI
• Each icon should fill approximately a 24x24 canvas with 2px padding
• Flat design, no gradients on the icons themselves
• The active (home) tab should have a small 3px red indicator dot/bar above

Export as both individual SVG files and a combined sprite sheet.
--ar 1:1 (per icon)

附录：提示词索引与交付清单
以下为全量提示词快速索引，便于设计团队和 AI 图像生成流程管理：

编号	模块	提示词名称	尺寸	数量	优先级
1-1	Banner轮播	招牌小鱼饭·第二份半价	398×180	1张	P0 最高
1-2	Banner轮播	储值享9折优惠	398×180	1张	P0 最高
1-3	Banner轮播	麻辣鲜香水煮鱼·新品	398×180	1张	P0 最高
2-1	核心按钮	点餐按钮图标	56×56	1个	P0 最高
2-2	核心按钮	储值按钮图标	56×56	1个	P0 最高
3-1	热区图①	优惠券区域插画	133×160	1张	P1 高
3-2	热区图①	团餐区域插画	132×160	1张	P1 高
3-3	热区图①	活动区域插画	133×160	1张	P1 高
4-1	热区图②	加盟版图主视觉	398×110	1张	P1 高
5-1	会员系统	会员默认头像	32×32	1个	P2 中
6-1	底部Tab	Tab导航图标组	24×24	4个×2色	P2 中

📦 交付物总计：
• Banner 轮播图 × 3 张（398×180px，PNG/WebP，≤100KB）
• 核心按钮图标 × 2 个（56×56px，SVG+PNG，透明底）
• 热区图① 副入口 × 1 张（398×160px，PNG/SVG，≤80KB）
• 热区图② 加盟版图 × 1 张（398×110px，PNG，≤60KB）
• 会员默认头像 × 1 个（32×32px，PNG，≤10KB）
• Tab 导航图标 × 8 个（24×24px，SVG，4图标×激活/非激活双色）

总计：16 个独立视觉素材