UI Design System

页面级 Demo 索引

6 个完整页面 demo,全部以 autocava.com.mx 生产环境 stable 的真实渲染 DOM 为准重建 —— 价格、销量、车系参数、联系方式均为抓取所得,无编造数据。 下方预览为实时 iframe 加载,点击卡片标题即可打开完整页面。

抓取日期 2026-09-30 env = stable 断点 1024px · 单文件自适应 触达仅 WhatsApp
live preview
01 首页 · 新闻资讯

Autocava 新闻资讯首页

品牌网格 + 销量榜 + 产品卡 + 筛选 + 收藏 + 资讯区,完整首页骨架。 资讯卡按生产站 Reseñas destacadas 的 4/2 列网格与黄色 hover 复刻。

32 车系 72 品牌 5 篇真实资讯

复用:06-topnav · 17-banner · 22-brand-grid · 23-ranking · 24-favorite · 25-footer · cards/05-product-card

live preview
03 车系详情 · 转化主战场

Chevrolet Captiva 车系页

价格三段(当前/指导价/优惠)、月供、评分与 INEGI 分榜、4 版本选择、 19 项规格表、持有成本、5 条真实用户评价。

4 版本逐版价格 19 项规格 5 条真实评价

复用:06-topnav · 17-banner · 20-steps · 24-favorite · 25-footer · cards/04-article-card

live preview
04 线索转化 · CAVI 报告

CAVI 报告留资页

手机号留资表单(+52 前缀、10 位校验、按需转 WhatsApp), CTA 下含 Aviso de Privacidad 与中介免责,官方联系方式为生产真值。

真实 WhatsApp 真实地址/主体 前端校验可用

复用:02-input · 06-mx-lead-privacy · 17-banner · 20-steps · 25-footer

live preview
05 列表 · 筛选密度

车型列表 / 筛选页

PC 侧栏筛选 + H5 抽屉筛选,价格区间 5 档、三种排序、空状态全部可交互。 20 台车系的价格与分榜排名逐条核对自各自车系页。

20 台真实车系 20 张专属车图 5 档价格 + 3 排序

复用:06-topnav · 09-modal · 11-search · 21-filter · 24-favorite · 25-footer · cards/05-product-card

live preview
06 榜单 · INEGI 销量

Autos más vendidos 排行榜

INEGI 全国销量 Top 20(金/银/铜牌 + 比例条),口径与期间均按生产页标注。 分榜 Tab 只有 General 有真实数据,其余置 disabled —— 不填示例数据。

Top 20 真实销量 2026-08 · INEGI 20 张专属车图

复用:06-topnav · 17-banner · 20-steps · 21-filter · 23-ranking · 25-footer

mock 文案
— 组件沙盘 · 非生产页

组件集成沙盘

把 25 个组件 + 5 张卡堆进一页的演练场,用来一眼看全组件形态。 文案为 mock(英文 + 假价格),不是生产页面,别当真实样式基准。

无生产源 · 演示用 mock 数据
17+ 组件集成 全量 token 驱动

复用:01~25 几乎全部组件

这些 demo 遵守的硬约束

  • 数据真实性:价格、销量、车系参数、评价、联系方式全部抓取自生产站, 无编造。拿不到真数据的字段一律留空并显式标注,不用示例值填充。
  • 品牌色以真实渲染为准:主色 #FFCF20 取自生产 DOM 的 bg-ffcf20,不是框架预置色板。详见 AGENTS.md Step 2.5。
  • 不画假曲线:车系页「Tendencia precio promedio」在 stable 只有 1 个真实点位 (其余 0 次咨询),因此只渲染该点并显式标注缺口,不补示意曲线。
  • MX 合规:触达仅 WhatsApp(页面内无「微信」),留资表单 CTA 下必带 Aviso de Privacidad 与中介免责。
  • 无后端:只有单文件 HTML + CSS 变量 + Iconify CDN; 表单与筛选均为前端模拟,不真提交、不写任何 API。