技能介绍

要解决的问题

很多前端需求并不需要“功能更多”的界面，而是需要像文档一样的阅读顺序：层级清楚、留白稳定、组件安静。普通生成结果容易落入 Inter + 圆角卡片 + 厚阴影 + 通用图标的组合，看起来像模板，而不是产品。极致极简文档风 UI 设计规范 把这类编辑式界面拆成可执行约束，让代码直接产出克制、高对比、暖调单色的结果。

规范如何运作

视觉约束

颜色使用暖单色主体系，大面积留白承担结构表达；强调色只作为低存在感的 pastel accent。
字体拒绝 Inter、Roboto、Open Sans，要求自定义排版层级和 monospace 字段样式。
所有分隔、卡片与边界严格使用 1px solid #EAEAEA；阴影必须极低透明度，或者完全消失。
图标使用 Phosphor Icons 的 Bold/Fill，或 Radix UI Icons；避免 Lucide、Feather、Heroicons 这类薄线默认库。
图片保持去饱和、暖调，并叠加 opacity: 0.04 的颗粒；没有真实素材时可用 picsum.photos/seed/{context} 占位。

执行步骤

先建立宏观留白：段落之间使用 py-24 或 py-32，正文宽度收敛到 max-w-4xl 或 max-w-5xl。
再应用排版变量和单色变量，让标题、正文、代码、元信息各自落在明确层级。
组件按 ultra-flat 方式组织；需要模拟软件窗口时，使用白顶栏 + 三个浅灰圆点的 Faux-OS Window Chrome。
每个主要区块加入滚动入场动画，例如 translateY(12px) + opacity: 0 过渡到可见；列表项按 calc(var(--index) * 80ms) 错峰出现。
最后检查区块深度：用低透明度背景图、暖色 radial-gradient 或细线纹理避免空平板背景。

适用边界

它适合静态页、产品页、工作台、文档中心和需要强阅读秩序的前端原型；不适合需要强品牌实验、复杂可视化或娱乐化动效的场景。动画只通过 transform 与 opacity 实现，环境动效必须放在 position: fixed 且 pointer-events: none 的层。该规范默认只生成代码参考，不自动安装依赖、不修改系统权限、不创建持久任务或执行下载内容；涉及发送、发布、删除、付款、部署等外部写入前，必须先确认目标与影响。凭据只服务于用户指定的官方服务，不回显、不记录或转发。