photo-live/docs/designs/embed-widget-concept-2026-09-22.md

嵌入组件效果图 · 2026-09-22

内置 image_gen 生成，imagegen 技能。视觉概念稿，不是已运行截图。宿主网站、活动、照片及数字均为示例。

展示状态

• 桌面展开：网站右下方白色卡片，照片轮播、上一张/下一张、暂停、相册入口。
• 收起：Photos 胶囊入口，会话内记住用户选择。示例蓝点仅表示拟议的新内容提示，未取得真实新内容状态时不显示。
• 手机展开：默认收起，点击后展开，留出左右边距和底部安全区。
• 空相册：Photos coming soon，占位不显示假图或假数量。

实现约束

照片使用 contain 完整显示，竖图两侧留中性底。页码为轮播队列位置，不是相册总照片数。点击图片打开单图观众深链；View album 打开相册首页。中文与英文均支持。收起和永久停用分开处理。保持iframe隔离、消息来源验证、不可见暂停与配置版本控制。宿主页面只作接入示意，不属于待重建的网站。暂停和切图为拟议交互，是否已实现需核对现有代码。

完整生成提示词

Use case: ui-mockup. Create one polished high fidelity UI concept board for PhotoLive EMBEDDABLE PHOTO CAROUSEL WIDGET on a third-party corporate website. English UI only. Landscape 2400x1500 or equivalent sharp high resolution. Clean pale cool grey design presentation, heading "PHOTOLIVE / EMBEDDED GALLERY", small subheading "One event. Every moment." Three sections with clear labels: "01 / Desktop expanded" taking left 55% width, "02 / Collapsed" in a compact upper middle-right area, "03 / Mobile expanded" a tall mobile webpage right 25%. Show the widget IN CONTEXT on actual host website mockups. No native app bottom nav.
Visual system matches professional photography app: #1A73E8 blue, white card, navy text #172033, secondary slate #647084, 16px corners, subtle shadow, precise thin icons and legible type.
LEFT: desktop corporate website browser viewport with modest chrome, neutral header "NORTHLINE" and navigation About / Solutions / Events / Contact. Main website has understated architectural expo hero photo, large headline "Meet us at the fair", blue "Explore our exhibits" button, small content cards below. The host is low contrast but still legible. Float PHOTO WIDGET anchored lower right inside browser viewport, around 300px wide proportion relative website. Widget is visually prominent white card with header small blue aperture icon + "Event photos", top-right minus collapse button with generous click area. A FIXED 4:3 photo stage, dark charcoal background, shows a realistic landscape photograph fully contained, international adult visitors meeting at exhibition booth; do NOT crop faces. Delicate left/right navigation buttons over photo at edges. Below photo title "Canton Fair · Autumn", a compact bottom row "03 / 12", small pause control labelled "Pause", and clear blue link "View album ↗". No likes, no comments, no download, no photo count stats beyond carousel index. Entire card balanced and practical. Widget should not cover host's main blue CTA.
UPPER MIDDLE-RIGHT small vignette under "02 / Collapsed": slice of same pale corporate webpage with a compact white pill anchored at bottom-right, blue photo icon + "Photos" + small blue notification dot. Pill 44px high equivalent, rounded, tasteful shadow, not a giant chat bubble. Label below in light grey "A quiet entry point".
RIGHT: flat mobile website viewport without physical phone hardware, browser header tiny URL "northline.example", website brand and hamburger, host website heading "Meet us at the fair" remains visible near top. Lower area has expanded same photo widget nearly full width with 16px side margins, ABOVE mobile bottom safe area, same white header Event photos and minus button, 4:3 dark image stage with a DIFFERENT VERTICAL portrait-format photograph of an adult speaker on stage shown FULLY CONTAINED with dark side gutters. Same footer title "Canton Fair · Autumn" and "04 / 12", Pause, View album ↗. Make mobile photo visibly portrait within landscape stage demonstrating non-cropping. Host site content behind card remains discernible. No bottom navigation, no login, no uploading, no social feed. Entire mobile expanded card fits screen and is dismissible.
Below center vignette include a small standalone horizontal design detail sample, not another full screen: same widget card empty-state mini version with a line photo icon and exact text "Photos coming soon", collapse minus button. Label "Empty state".
Composition impeccable spacing, no arrows or huge explanatory annotation blocks, product screenshot quality, clean understated enterprise aesthetic. Photos realistic and attractive. All event data illustrative. No giant watermarks, no extra floating objects, no device perspective. Prioritize widget readability and matching card components across desktop and mobile.

清理修订提示词

Edit this UI design board. Preserve the three website mockups, photo carousel widgets, photography, typography, layout, all inside-screen content exactly. REPLACE ALL exterior presentation-board background with completely solid opaque very pale gray #F3F6FA. Remove every black/blue speckle, transparency artifact, noisy texture, scribble, gradient streak from outside browser/mobile/vignette boundaries. Render a clean entirely opaque professional design board. Retain main top-left heading PHOTOLIVE / EMBEDDED GALLERY and subtitle, section headings. Remove tiny extra slogan at top right and entire decorative footer branding and footer text. Neutral clean margins. Do not change actual widgets or website screenshots. Absolutely no transparency or distressed texture.