SuperAPI AI 工具集

web-prototype-taste-editorial

通用与其它

查看项目

更新于 10-16 01:37

技能介绍

用途:生成单页网页原型,风格为编辑极简主义,适配营销站或高端文档类界面。适用于需求中提到“干净”“编辑感”“高端 SaaS”“文档”或“知识产品”的场景。

主要能力与规则:画布使用暖调米白(#FBFBFA 或 #F7F6F3),不用纯白;前景色为近黑 #111111,次要文字 #787774,不用 #000000。边框仅用 1px solid #EAEAEA,阴影不得超过 0 1px 2px rgba(0,0,0,0.04)。字体配对:标题用编辑衬线体(Instrument Serif / Newsreader / Lyon),正文用 grotesque(Geist / Switzer / SF Pro),元信息与按键用等宽字体(Geist Mono / JetBrains Mono)。标题字距 -0.025em,行高 1.05。仅标签/徽章可用柔和粉彩底色(#FDEBEC、#E1F3FE、#EDF3EC、#FBF3DB),不得作区块背景。容器圆角最大 8–12px,不用胶囊容器。区块内边距至少 py-24,hero 用 py-32。

必备组件:半透明米白加 backdrop-blur-md 与细边框的吸顶胶囊导航;非对称 hero(左侧衬线标题、上方眉标标签、正文限宽 max-w-[52ch]);不等高 bento 特性网格并用可见 1px 分隔线;用 border-t 分隔的“它不是什么”对照块;含单一强调 CTA 的定价或注册带;底部等宽元数据页脚,上方单条细线。

动效仅限微妙:滚动进入 translateY(12px)→0、opacity 0→1,600ms cubic-bezier(0.16,1,0.3,1),仅用 IntersectionObserver;卡片悬停 box-shadow 从 0 0 0 到 0 2px 8px rgba(0,0,0,0.04),200ms;列表以 --index * 80ms 交错;只动画 transform 与 opacity。

限制/禁止:禁用 Inter、Roboto、Open Sans;禁用通用细线图标(可用 Phosphor Bold 或 Radix);禁止渐变、霓虹、玻璃拟态(导航栏轻微模糊除外);禁止超过 shadow-sm 的阴影与发光;禁用 John Doe/Acme/Lorem 等占位名;避免“Elevate”“Seamless”“Unleash”“Next-Gen”等 AI 文案套话;禁止纯黑 #000000 与深色图片上居中 H1。发布前需自检衬线+grestque 配对、暖色画布与近黑前景、1px 边框、至少一处非对称布局、粉彩仅用于标签、区块内边距达标、无表情符号与违禁字体。