用途:这是一份前端工程指令(协议),用于让 AI 生成高度精炼、超极简、文档式网页界面,风格接近高端工作台类产品,主动拒绝通用 SaaS 设计套路。
主要能力与约束:
- 配色:暖色单色调,画布用纯白或暖米白(#FFFFFF、#F7F6F3、#FBFBFA),边框统一 1px solid #EAEAEA;仅用低饱和粉彩做标签、行内代码或图标底色(如 #FDEBEC、#E1F3FE、#EDF3EC、#FBF3DB)。
- 字体:正文用 SF Pro Display、Geist Sans、Helvetica Neue、Switzer 等;标题用 Lyon Text、Newsreader、Playfair Display、Instrument Serif 等衬线体,紧字距与行高;代码用 Geist Mono、SF Mono、JetBrains Mono。正文不用纯黑,用 #111111 或 #2F3437,行高 1.6。
- 组件:非对称便当网格卡片,圆角 8px 或 12px,内边距 24–40px;主按钮 #111111 底白字、圆角 4–6px、无阴影;标签为胶囊形小字大写宽字距;FAQ 手风琴去掉容器框,仅用底部分隔线;快捷键用 <kbd> 呈现;软件模拟图用带三个浅灰圆点的白色顶栏。
- 图标与图像:用 Phosphor Icons(Bold/Fill)或 Radix UI Icons,统一描边宽度;插画为单色线稿加一块粉彩几何形;照片低饱和暖调,可叠加 0.04 暖噪点;无真实素材时用 https://picsum.photos/seed/{context}/1200/800。
- 动效:滚动进入用 translateY(12px)+opacity 过渡 600ms,cubic-bezier(0.16,1,0.3,1),用 IntersectionObserver;卡片悬停极轻阴影;列表错峰出现;仅动画 transform 与 opacity。
明确禁止:Inter、Roboto、Open Sans 字体;Lucide、Feather、Heroicons 等细线图标库;Tailwind 默认重阴影;大面积主色背景;渐变、霓虹、3D 玻璃拟态;大容器用胶囊圆角;任何 emoji;John Doe、Acme Corp、Lorem Ipsum 等占位名;Elevate、Seamless 等 AI 套话。
使用方式:在要求生成 HTML、React、Tailwind、Vue 前端代码或布局时套用本协议,先建立大留白(如 py-24/py-32),正文宽度限制在 max-w-4xl 或 max-w-5xl,再应用字体层级与单色变量。
限制:资料未提供安装命令、依赖版本、收费与平台信息,暂未提供。