SuperAPI AI 工具集

minimalist-ui

前端与建站

查看项目

更新于 10-15 20:29

技能介绍

用途:这是一份前端工程指令,用于生成高度精炼、超极简、文档式网页界面,风格接近高端工作区平台,主动拒绝通用 SaaS 设计套路。

主要能力与约束:强制暖色单色调(画布 #FFFFFF 或 #F7F6F3/#FBFBFA,正文用 #111111 或 #2F3437,次要文字 #787774,边框 #EAEAEA),仅用低饱和粉彩做语义点缀(淡红 #FDEBEC/#9F2F2D、淡蓝 #E1F3FE/#1F6C9F、淡绿 #EDF3EC/#346538、淡黄 #FBF3DB/#956400)。字体要求:正文用 SF Pro Display、Geist Sans、Helvetica Neue、Switzer;标题用 Lyon Text、Newsreader、Playfair Display、Instrument Serif,紧字距与 1.1 行高;代码用 Geist Mono、SF Mono、JetBrains Mono。禁止 Inter、Roboto、Open Sans,禁止 Lucide、Feather、Heroicons,禁止 Tailwind 重阴影、渐变、霓虹、3D 玻璃拟态、大容器胶囊圆角、emoji 与占位假名。

组件规范:便当网格用非对称 CSS Grid,卡片 1px solid #EAEAEA、圆角 8px 或 12px、内边距 24–40px;主按钮 #111111 底白字、圆角 4–6px、无阴影、悬停 #333333 或 scale(0.98);标签为小号大写宽字距胶囊配粉彩底;手风琴仅用底边框分隔;快捷键用 kbd 标签;软件模拟用带三个浅灰圆点的白色顶栏。图标用 Phosphor Icons 或 Radix UI Icons,插画为单色线稿加一块粉彩几何形,图片需低饱和暖调,可用 https://picsum.photos/seed/{context}/1200/800 占位。

动效:滚动进入用 IntersectionObserver 配合 translateY(12px)+opacity 600ms cubic-bezier(0.16,1,0.3,1),列表错峰延迟 calc(var(--index) * 80ms),仅动画 transform 与 opacity,背景环境光斑需 position: fixed 且 pointer-events: none。

执行方式:先建立宏观留白(如 py-24/py-32),正文宽度限制 max-w-4xl 或 max-w-5xl,套用字体层级与单色变量,所有卡片与分隔线遵守 1px solid #EAEAEA,主要区块加滚动进入动画,并保证区块有视觉深度。资料另注明韩语场景需同时应用 korean-frontend-defaults 规则。限制:未提供安装命令、收费、平台与效果数据。