视觉层级
Visual Hierarchy
样式与 CSS也叫：信息层级、视觉层次、主次关系
一句话：用大小、粗细、颜色、位置和留白区分信息的主次，让用户一眼看出先看什么、再看什么、该点哪里。
详细解释
页面上的信息重要程度不同。视觉层级就是让最重要的东西最显眼：更大的字号、更粗的字重、更深或更鲜艳的颜色、更靠上的位置、周围更多的留白；次要信息则缩小、变浅、往后放。
按钮也有层级：一个区域里通常只有一个主要按钮（实心主色），其他是次要按钮（描边或浅色背景）和文字按钮。三个按钮都做成醒目的实心蓝色，用户就不知道该点哪个。
自测方法是「眯眼测试」：眯着眼看页面，只剩模糊的色块，这时最突出的应该就是最重要的内容。AI 生成的页面经常所有东西一样大、一样粗，可以明确告诉它哪个是第一重点。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
定价卡片的层级不清楚，请调整：价格数字最大最粗（36px、700），套餐名次之（18px、600），功能列表用 14px 灰色；每张卡片只保留一个实心主按钮「立即购买」，「了解详情」改成文字链接；推荐套餐加深边框。