Figma Make AI生成【供应商租车询价系统】原型

成果展示

周期询价

周期询价任务列表

新建周期询价任务

租期价格详情

历史批次租期价格详情

供应商价格详情

实时查价

实时查价任务列表

新建实时查价任务

实时查价

价格指导

价格指导列表

新建价格指导

初始提示词

Markdown 复制代码
供应商渠道城市地点租车询价系统 - Figma设计需求文件
一、系统核心定位
本系统聚焦供应商渠道、城市、地点维度的租车询价全流程管理,核心功能为数据展示、询价操作及基础配置管理,不涉及爬虫数据的爬取过程(爬取数据由专业爬虫工程师独立管理),仅负责爬取数据的可视化呈现及相关操作配置,为租车询价业务提供高效、清晰的操作支撑。
二、核心功能模块设计需求
2.1 周期询价模块
2.1.1 周期询价列表页
页面核心展示周期询价车型列表,需清晰呈现以下核心字段,布局简洁、字段对齐,支持快速浏览及操作:
 - 基础信息:城市、地点、车型、车款、配置(示例数据:长沙、长沙站、宝马3系、宝马3系 12-18款、豪华型 | 5座4门 | 自动 | 1.6T-3.0T)
 - 询价相关:渠道、询价频率、上次执行时间、下次执行时间
操作按钮:页面显著位置设置「新建询价任务」按钮,样式突出,支持点击触发新建流程(新建流程需包含上述所有字段的录入/选择功能)。
2.1.2 车型详情(租车信息)页
点击周期询价列表中的具体车型,跳转至该车型的租车信息详情页,需展示以下核心信息,布局层次清晰,重点数据突出:
 - 租期信息:开始时间、结束时间、租期时长
 - 价格信息:TOP1价格、TOP1供应商、TOP1划线价、本品排名、本品价格、本品划线价
操作按钮:
 - 「跟踪」按钮:置于页面显眼位置,点击可将当前租车信息记录添加至「实时查价」模块,添加后给出明确反馈(如提示"已添加至实时查价")。
 - 「历史询价」按钮:支持点击查看该车型的所有历史询价记录,历史记录需包含上述租车信息的完整字段及询价时间。
2.1.3 供应商详情页
点击租车信息详情页中的具体记录,跳转至供应商详情页,聚焦展示该租车记录对应的供应商核心信息,字段简洁明了:
 - 供应商基础信息:供应商名称、车辆年款
 - 价格信息:供应商报价、划线价
 - 辅助信息:供应商标签(如"优选供应商""低价供应商"等,标签样式统一,可根据业务需求灵活配置)
2.2 实时查价模块
2.2.1 实时查价列表页
页面核心展示已添加的实时查价记录列表,需全面呈现以下字段,支持快速查看实时价格及相关信息,布局与周期询价列表保持视觉统一:
 - 基础信息:渠道、城市、地点、车型、车款、配置
 - 租期信息:开始时间、结束时间、租期时长
 - 价格信息:TOP1价格、TOP1供应商、TOP1划线价、本品排名、本品价格、本品划线价
 - 数据更新信息:最近一次爬取时间(需明确标注"最近爬取时间",便于区分数据时效性)
操作按钮:
 - 「新建查价任务」按钮:与周期询价模块的新建按钮样式统一,点击触发新建流程,需录入/选择上述所有核心字段。
 - 「采集」按钮:每个查价记录对应一个「采集」按钮,点击可实时采集该记录的最新价格数据,采集过程中显示加载状态,采集完成后同步更新页面价格及最近爬取时间。
2.3 价格指导模块
2.3.1 价格指导列表页
页面核心展示价格指导相关记录列表,在实时查价列表字段基础上,新增2个核心字段,布局延续前两个模块的视觉风格,重点突出价格相关数据:
 - 基础字段:渠道、城市、地点、车型、车款、配置、开始时间、结束时间、租期、TOP1价格、TOP1供应商、TOP1划线价、本品排名、本品价格、本品划线价、最近一次爬取时间(与实时查价列表字段一致)
 - 新增字段:渠道预期价格、渠道报价
操作按钮:
 - 「计算渠道报价」按钮:置于页面显眼位置,点击后弹出输入框,支持录入「渠道预期价格」,录入完成后点击确认,系统根据业务同事预先配置的"渠道总价及配置公式",自动计算并显示对应的「渠道报价」(公式逻辑无需在界面展示,仅需实现计算功能及结果展示)。
三、通用设计要求(适配Figma落地)
3.1 视觉统一性
 - 按钮样式:所有功能按钮(新建、跟踪、采集、计算等)统一设计,包括颜色、尺寸、圆角、hover状态,确保全局视觉一致。
 - 列表布局:所有列表页(周期询价、实时查价、价格指导、数据管理)的字段对齐方式、行高、间距、hover/选中状态统一,提升浏览体验。
 - 字体规范:明确全局字体、字号、字重(如标题、字段名称、数据内容区分字号及字重),确保可读性。
3.2 交互逻辑
 - 跳转逻辑:所有跳转(列表→详情、详情→供应商)需流畅,支持返回上一级页面,返回按钮位置统一。
 - 反馈提示:操作成功/失败(如添加实时查价、采集数据、删除组合)需给出明确提示,提示样式统一,不遮挡核心内容。
 - 加载状态:数据加载、采集数据等耗时操作,需显示加载动画,提升用户体验。
3.3 特殊说明
系统仅负责爬取数据的展示及相关操作配置,不涉及任何爬虫相关的功能界面(如爬虫参数设置、爬取日志查看等),爬虫数据的管理由专业爬虫工程师独立负责,界面无需设计相关模块。
四、补充说明
1. 示例数据仅作为字段展示参考,Figma设计时需预留字段占位符,支持后续业务数据灵活填充;
2. 所有列表页需支持分页功能,分页控件样式统一,默认每页展示10条记录,支持手动调整每页条数;
3. 价格相关字段(如TOP1价格、本品价格等)需突出显示,可通过颜色、字重区分,便于快速识别核心数据。

注:本文不提供优化过程中的提示词

相关推荐
Ww.xh8 小时前
Figma设计稿转React代码:ClaudeCode+MCP实战教程
前端·react.js·figma
码途漫谈1 天前
Easy-Vibe开发篇阅读笔记(二)——前端开发之Figma与MasterGo入门
人工智能·笔记·ai·开源·ai编程·figma
allanGold1 天前
figma sketch 平替工具有哪些
macos·figma·sketch·pencil·penbot
C澒5 天前
AI 生码 - D2C:Figma to Code 全流程实现
前端·低代码·ai编程·figma
smallcelebration5 天前
130 保姆级 配置mcp+figma+cursor 通过对话直接生成设计稿
figma
shadowcz0077 天前
AI 设计工具:不是让 Figma 更好,是重新定义“设计“这件事
人工智能·figma
徐礼昭|商派软件市场负责人13 天前
效率提升75%!AI赋能ECShopX系统开发特辑:使用Cursor、Codex、Figma等AI辅助工具高效完成商城创新功能开发
人工智能·figma
abolbee16 天前
Cursor 接入 Figma MCP 实战经验贴Windows版
windows·figma·cursor
余人于RenYu17 天前
Claude + Figma MCP
前端·ui·ai·figma