3e42697038
Co-Authored-By: Claude Code <noreply@anthropic.com>
9.6 KiB
9.6 KiB
客迹后台视觉概念 V1
日期:2026-09-16。使用 imagegen 技能及内置 image_gen 生成,未使用 CLI/API 回退。交付为 PNG 效果图与背景素材,不是已实现页面、可编辑设计源文件或真实业务数据。
文件
设计与落地
沿用 assets/brand/keji-logo-v1.png 的蓝青 K 路径品牌。主色 #2563EB,辅助 #06B6D4,正文 #12233F,后台底色 #F5F7FB,登录背景 #0B1630。适配现有 Vue3、Element Plus、Art Design Pro 与 ECharts。
后台建议240px侧栏、64px顶栏、24px内容边距、12px卡片圆角。数据表使用真实 HTML 和组件,图表用 ECharts,不把效果图整体当作后台页面。登录页桌面采用品牌区与表单区双栏;小屏隐藏或弱化品牌区,表单单栏,按钮与文字保持可访问对比度。背景作为装饰,文字和Logo使用独立前端元素,不从效果图截取表单。
背景图右侧留白可放白色表单卡片;它与登录效果图属于同一视觉方向,但不是效果图左侧插画的逐像素提取版。应用时根据容器裁切检查焦点,移动端使用纯色降级即可。
生成稿校对及实现约束
AI 图像用于选定视觉方向,局部自动生成的菜单、年份、数值、文案不作为需求变更或业务契约:
- 统一采用项目真实菜单;访客详情稿附加的实时访客、转化分析、专业版等入口不意味着本期建设或商业版本划分。
- 概览表中的“直接访问”实现时改为“直接或未知”;ChatGPT仅标签时明确显示“ChatGPT标签”。来源证据详见 gpt/12、13。
- 日期使用实际数据;示例图中的2024年份不是当前项目日期。统计值仅用于布局演示,不能作为图表与明细对账样例。
- 时间线的正序/倒序按钮必须与实际排序一致;首次来源未知时,不添加“通过搜索进入”的确定叙述。兴趣或转化意向不得仅靠浏览行为直接判定为事实。
- 登录页“安全验证”“忘记密码”仅在真实接入对应能力后开放;前端滑块本身不等于服务端安全验证。保持登录不应保存明文密码。隐私政策链接须指向真实文档。
- 品牌主标正式实现复用原始Logo,不使用AI重绘字标替换。英文与中文标签均以实际组件字体排版并做人工校对。
本次未修改 admin 中的页面代码,也未替换任何既有品牌文件。
最终生成提示词
01-dashboard
Use case: ui-mockup. Create a polished high-fidelity desktop web UI design image for 客迹 / KEJI ANALYTICS, an independent website visitor behavior analytics admin, compatible with Vue3 Element Plus Art Design Pro. Landscape 16:10, sharp readable simplified Chinese typography, practical implementable UI, front-on full screen screenshot without laptop/browser mockup framing. Reference image 1 is the existing brand logo only: retain the blue/cyan K path motif and 客迹 name, do not reproduce its large whitespace. Cohesive palette cobalt #2563EB, cyan #06B6D4, ink #12233F, pale canvas #F5F7FB, white panels, subtle borders, restrained shadows, 12px corners. Small unobtrusive label 演示数据. No giant decorative background behind business tables, no surveillance eyes, no futuristic HUD, no fake real personal information. Asset type: admin overview screen. Left narrow white sidebar with small brand lockup top and navigation 数据概览 selected, 访客管理, 客户档案, 来源分析, 站点管理, 系统设置. Top bar breadcrumb 工作台 / 数据概览, site selector 官网主站, date 最近7天 and small user avatar. Main heading 数据概览 and subtitle 了解每一次访问,连接每一个触点. Four restrained metric panels: 访客数 1,284; 访问次数 1,936; 平均有效停留 2分18秒; 回访访客 326. Main middle broad card 访问趋势 with clean blue time-series chart dates09/10 to09/16, adjacent smaller 来源分布 horizontal bars 自然搜索 42%, AI推荐 23%, 直接或未知 20%, 其他 15%. Bottom generous table 最近访问, columns 访客, 本次来源, 浏览页面, 有效停留, 最近访问. Four anonymous rows V-1024 / ChatGPT标签 / 产品介绍 / 03:24 / 14:32 and other varied rows. Show 来源标签 badge explicitly, no claim of exact third-party prompt tracking. Excellent hierarchy, spacious coherent grid, polished B2B SaaS visual.
02-visitor-journey
Use case: ui-mockup. Create a polished high-fidelity desktop web UI design image for 客迹 / KEJI ANALYTICS, an independent website visitor behavior analytics admin, compatible with Vue3 Element Plus Art Design Pro. Landscape 16:10, sharp readable simplified Chinese typography, practical implementable UI, front-on full screen screenshot without laptop/browser mockup framing. Reference image 1 is the existing brand logo only: retain the blue/cyan K path motif and 客迹 name, do not reproduce its large whitespace. Cohesive palette cobalt #2563EB, cyan #06B6D4, ink #12233F, pale canvas #F5F7FB, white panels, subtle borders, restrained shadows, 12px corners. Small unobtrusive label 演示数据. No giant decorative background behind business tables, no surveillance eyes, no futuristic HUD, no fake real personal information. Asset type: visitor journey detail screen in same design system. Sidebar 访客管理 selected. Top breadcrumb 访客管理 / 访客详情, site 官网主站. Heading 访客 V-1024 with pill 匿名访客, subtitle 当前浏览器的可观测轨迹. Four compact summary stats 访问次数 3, 活跃天数 3, 浏览页面 8, 有效停留 08:42. Main wide left section 访问时间线 with elegantly spaced vertical timeline grouped 09月16日 今天 / 09月15日 / 09月14日. Events show 14:32 进入产品页, 14:34 查看价格页, 14:35 开始咨询表单, small paths and duration, discrete outlined blue event icons. Right column 来源证据 contains three clearly separated rows 首次可观测来源 未知; 首次可识别来源 ChatGPT标签; 本次会话来源 邮件活动. Below compact evidence detail 标记来源 utm_source, 具体智能体 未提供, 原始提问 未提供. Additional panel 访问环境: Chrome / Windows / 桌面设备. No customer real names or emails, no personal avatar portrait, no charts implying lifetime omniscience. Make timeline beautiful and evidence highly readable.
03-login
Use case: ui-mockup. Create a polished high-fidelity desktop web UI design image for 客迹 / KEJI ANALYTICS, an independent website visitor behavior analytics admin, compatible with Vue3 Element Plus Art Design Pro. Landscape 16:10, sharp readable simplified Chinese typography, practical implementable UI, front-on full screen screenshot without laptop/browser mockup framing. Reference image 1 is the existing brand logo only: retain the blue/cyan K path motif and 客迹 name, do not reproduce its large whitespace. Cohesive palette cobalt #2563EB, cyan #06B6D4, ink #12233F, pale canvas #F5F7FB, white panels, subtle borders, restrained shadows, 12px corners. Small unobtrusive label 演示数据. No giant decorative background behind business tables, no surveillance eyes, no futuristic HUD, no fake real personal information. Asset type: full login page concept, no dashboard sidebar. Two-column 55/45 composition. Left atmospheric deep ink-blue brand illustration panel with elegant flowing blue-cyan translucent ribbons and a few precise bright round touchpoints subtly forming the K journey motif, visual concentrated in middle and lower left; premium soft dimensional lighting, no busy circuitry. Small white 客迹 KEJI ANALYTICS brand top-left. Large legible white headline 看见来访,读懂客迹 with small subtitle 网站访问与客户旅程分析. Right clean warm-white panel with centered 380px-wide form. Heading 欢迎登录客迹, subtitle 登录您的独立数据工作台. Field labels 账号 and 密码, placeholders 请输入账号 and 请输入密码, outline icons, password eye; optional security verification horizontal slot 安全验证; checkbox 保持登录, link 忘记密码; large cobalt 登录 button. Small footer 账号由管理员分配 and 隐私政策 · 使用条款. No signup button, no third-party auth buttons, no example credentials, no giant empty top space. Brand-conscious premium enterprise SaaS aesthetic.
04-login-background
Use case: stylized-concept. Asset type: production-ready text-free background artwork for 客迹 KEJI ANALYTICS desktop login page. Wide landscape 16:9 high-resolution image. Theme website customer journeys, repeat visits and connected touchpoints expressed abstractly through elegant smooth cobalt and cyan translucent glass ribbons with just a few luminous circular nodes, paths subtly suggesting a K without any explicit letter or logo. Deep midnight navy #0B1630 background with rich quiet tonal gradients and premium soft studio highlights. Artwork concentrated within left 55 percent and lower-left, allowing light headline overlay upper-left; right 45 percent must be very quiet dark navy negative space for an HTML white login card. Clean sophisticated SaaS brand art, dimensional but restrained, carefully balanced curves, fine soft depth, no charts, no dashboard, no interface, no text, no numbers, no watermark, no people, no eye, no surveillance camera, no globe, no busy circuitry. Do not embed login fields or logo into the background. Complement an existing blue/cyan K path brand mark.