技能介绍

解决什么问题

默认生成的前端界面几乎都长着同一张脸：Inter 字体、Lucide 图标、Tailwind 的 shadow-lg，配上千篇一律的蓝紫色渐变。这类模板化结果适合快速原型，却无法用于真正有品质诉求的产品。本技能针对这一痛点，提供一套完整的设计指令，让模型在生成 HTML、React、Tailwind、Vue 代码时直接产出极简、编辑式（editorial）的界面，而不是事后再手动返工。

技能如何工作

色彩系统：强制高对比的暖单色调（warm monochrome），所有卡片、分割线、边框统一使用 border: 1px solid #EAEAEA、border-radius: 4px、background: #F7F6F3，阴影几乎不可见或极度柔化。
字体规范：禁用 Inter、Roboto、Open Sans，改用定制化的衬线/无衬线层级搭配等宽字体作为点缀。
图标与插画：系统图标使用 Phosphor Icons（Bold/Fill 字重）或 Radix UI Icons，统一笔画粗细；插画为白底单色连续线稿，叠加一个低饱和粉彩几何形状作为视觉锚点。
布局策略：优先确立宏观留白（py-24 或 py-32 级别的垂直内边距），正文宽度约束在 max-w-4xl / max-w-5xl，并采用 bento-grid 网格组织信息。
动效规范：通过 IntersectionObserver 实现入场淡入（translateY(12px) + 600ms cubic-bezier(0.16, 1, 0.3, 1)），列表项以 calc(var(--index) * 80ms) 阶梯式出现；悬停阴影仅从 0 0 0 过渡到 0 2px 8px rgba(0,0,0,0.04)，按钮 :active 缩放至 scale(0.98)。
配图规则：摄影图统一低饱和暖调，叠加 opacity: 0.04 的暖色颗粒，真实素材缺失时使用 picsum.photos 占位。

适用边界

这套规范明确排斥主流 SaaS 风格，如果你的产品需要强品牌色或高饱和度视觉语言，需要自行调整变量。
动效仅使用 transform 与 opacity，背景氛围光斑（可选）必须放在 position: fixed; pointer-events: none 的图层，不能挂在滚动容器上。
它适合文档型工作台、编辑器、控制台类界面；高度互动的游戏化场景或营销落地页不是它的主场。