返回赛题列表
MX 悖论与新粗野主义
进阶在极端新粗野主义视觉混乱下构建完美语义 DOM 与 Schema.org 结构化数据，考察 CSS 视觉与 DOM 骨架的分离能力
规则说明▼
单 phase 挑战，允许使用外部资源。
核心悖论：视觉上是极端的新粗野主义混乱，底层 DOM 却必须是教科书级的语义结构。两者完全矛盾，但必须在同一个页面中共存。
Prompt▼
Prompt▼
**[角色与目标]：** 你是精通"机器体验（MX）"与"新粗野主义（Neo-Brutalism）"的前端架构师。输出单文件HTML。
**[视觉Vibe]：** 这是一个SaaS平台的"定价对比矩阵"。视觉上，请使用极端的"新粗野主义"：高对比度刺眼色彩、完全不对称的CSS Grid网格、重叠的复古窗口（带有粗黑边框和硬阴影）、故意偏离中心的等宽字体排版。看起来必须充满反叛的、混乱的手工感。
**[机器体验（MX）约束]：** 在这套"混乱"的视觉皮囊下，你的底层DOM骨架必须是极致的机器友好（Machine-readable）。严格使用W3C规范的深层HTML5语义标签（`<article>`, `<section>`, `<dl>`, `<dt>`）。在HTML头部或元素内，注入完美无瑕的 Schema.org JSON-LD 微数据（明确标注各层级的价格、货币、提供的功能列表）。动态状态必须包含ARIA无障碍属性。
**[核心考核]：** 向我证明你可以用CSS把页面视觉彻底打乱重组，但DOM树的阅读顺序和语义却能完美满足AI爬虫提取结构化定价数据的需求。