极简界面

解决什么

很多生成界面容易落入通用 SaaS 模板：Inter/Roboto、细线图标、重阴影和渐变堆在一起，页面像 Demo 而不是产品。这个技能把约束前置：禁用常见字体与图标库，阴影必须接近不存在，组件只保留超扩散、低透明度的层次，背景不靠空白撑场。

核心能力

• 建立暖色单色体系与字体层级，正文容器限制在 max-w-4xl/max-w-5xl，先定宏观留白。
• 用扁平 bento grid 组织信息；卡片、分割线、边框统一 1px solid #EAEAEA，代码风格接近真实产品。
• 软件化呈现时加 faux-OS 容器，顶栏三个浅灰圆点复刻 macOS 控件；图标用 Phosphor Icons/Radix UI Icons 的粗描边。
• 配图用单色墨线草图、低饱和暖调照片，或 https://picsum.photos/seed/{context}/1200/800；区块用低透明度背景、径向光斑或几何线增加纵深。
• 动效只走 transform/opacity：滚动入场用 IntersectionObserver，列表按 calc(var(--index) * 80ms) 错峰，hover/active 只做轻微反馈。

执行顺序

接到 HTML/React/Tailwind/Vue 任务时，先铺 py-24/py-32 的大纵向留白，再套用单色变量和字体层级，随后逐卡核对 1px 边框、背景深度与滚动动画，避免写完再返工。

适用边界

适合文档、工作台、产品官网和高审美原型；不适合数据密度极高、需要强状态反馈或强品牌识别的系统。动效再轻也要尊重 prefers-reduced-motion，图片占位终究不是真实素材。