以 skill 自身的术语
此 skill 生成极简主义、文档风格的 Web 界面，灵感来自高端工作空间平台。它强制使用暖色调单色调色板（米白与炭灰色调）、结合编辑体衬线字体与几何无衬线字体的定制排版层级，以及带有柔和粉彩点缀的扁平化 bento 网格布局。
该协议严格禁止使用 Inter、Roboto 和 Open Sans 字体、Lucide 和 Heroicons 等标准图标库、Tailwind 默认的重阴影、渐变、表情符号以及 AI 文案套话。组件使用 1px 实线 #EAEAEA 边框、清晰的 8-12px 圆角、充裕的内部留白，以及基于 IntersectionObserver 的滚动进入动画。动效隐蔽而精致，仅通过 transform 和 opacity 实现。
它产出什么
- 原生反映高端、简洁、编辑风美感的 HTML、React、Tailwind 或 Vue 前端代码
- 采用 bento 网格非对称 CSS Grid 结构和充裕的宏观留白的布局
工作方式
- 01首先建立宏观留白
在各区块之间使用大幅垂直内边距，具体在 Tailwind 单位中为 py-24 或 py-32。
- 02限制内容宽度
将主要排版内容限制在 max-w-4xl 或 max-w-5xl 内，以保持编辑风比例。
- 03应用排版层级和单色变量
立即按照暖色调单色调色板规范设置自定义字体和颜色变量。
- 04强制执行边框标准
每个卡片、分隔线和边框都必须严格使用 1px 实线 #EAEAEA。
- 05添加滚动进入动画
对所有主要内容区块应用动画，使用 IntersectionObserver，绝不使用 window 滚动监听器。
- 06确保视觉深度
各区块需要通过图像、环境渐变或细微纹理来营造深度，而不是空洞的扁平背景。