Creative-First UI 是一套以视觉为先的前端设计方法论与技能包。它的核心理念是：视觉就是设计本身，排版、布局、间距、颜色等一切元素都只为服务主视觉而存在。
用途
传统 UI 设计通常从线框图、文字层级和图标网格开始，而 Creative-First UI 明确拒绝这一路径。它主张先确定一个主视觉资产——一张照片、一个 3D 渲染、一段视频或一幅插画——再围绕它构建整个界面。这种思路常见于编辑类杂志、奢侈品牌和获奖网站：视觉承载情绪，文字则保持极简、精准且处于次要位置。
主要能力
该技能包提供多份支持文件：references/examples.md 收录按模式和行业组织的真实获奖网站案例；references/snippets.md 提供每种模式可直接使用的代码（GSAP + Lenis + 原生 JS）；references/industries.md 给出 13 个行业的设计方向，包括主视觉策略、颜色、排版、模式与 AI 提示词模板；references/react-nextjs.md 是 React/Next.js 集成指南，涵盖 GSAP hooks、ScrollTrigger 清理、next/image、R3F 与 View Transitions；references/astro.md 是 Astro 集成指南，涉及重视觉的 islands、View Transitions、GSAP/Lenis 生命周期、R3F 设置与内容集合；references/asset-pipeline.md 提供端到端资产优化，包括图像/视频/3D 压缩、FFmpeg 速查表与文件大小目标。
使用方式
在编写任何代码之前，该技能要求先向用户提问：是否已有视觉资产（图像、视频、3D），还是需要生成。它给出几种选项：用户已有资产则围绕其设计并提取颜色、匹配氛围；选择由 inference.sh 生成时，先检查 infsh CLI 是否安装（which infsh），已安装则运行创意构思流程后直接用 infsh 命令生成，未安装则引导执行 npm i -g @anthropic-ai/inference-sh && infsh login；用户自行生成时，询问其偏好工具（Midjourney、NanoBanana/Gemini、Kling 3.0/Runway、Flux/DALL-E），按对应格式提供提示词，等待资产后再构建；若无法生成任何内容，则按视觉存在的方式设计布局，使用具体占位描述，并在 Visual Asset Manifest 中写入确切的提示词（infsh 命令与文本提示词），绝不退回到图标加文字的“临时”方案。
创意构思流程包括：视觉隐喻（把产品核心概念翻译成无需文字即可理解的视觉隐喻）、概念配对（组合两种看似不相关的审美，如粗野主义加自然、奢华加故障、科学加手作等）、主视觉概念生成器（从安全到大胆生成 3-5 个概念）、反套路检查（搜索行业网站、列出陈词滥调并全部拒绝）、情绪定义（用能量与温度两个轴定位品牌）以及“如果……会怎样”提示。
主视觉设计规则要求：视觉填满视口（object-fit: cover，100vh），图像本身就是区块而非装饰；文字放在安静区域，用渐变叠加加深文字区、保留视觉焦点；渐变叠加必须精准，不可用均匀暗色覆盖压平整张图；文字预算为一个标题、一行说明、一个 CTA；主体无需阅读即可辨认。主视觉增强手段包括底部滚动数据条（毛玻璃效果）、漂浮粒子或环境元素、鼠标视差（10-25px，移动端与减少动效时禁用）以及入场动画（背景从 1.1 缩放到 1.0，文字错峰进入，总时长低于 1.5 秒）。
视觉模式
技能包列出 14 种模式。静态模式包括：全屏视频背景（视频填满视口，边缘渐变遮罩，目标小于 500KB，提供 poster 帧，iOS Safari 需 playsinline）；3D 物体作为主视觉（React Three Fiber/Three.js、Spline 或预渲染视频，GLB/GLTF 小于 5MB、低于 10 万多边形，用 gltf-transform 压缩，WebGPU 性能为 WebGL 的 2-3 倍，旧浏览器回退到 WebGL 2）；编辑式图片布局（图片占视口 60-80%，非对称布局，一张图表达一个想法，按 2 倍分辨率生成）；爆炸视图（AI 生成的爆炸视图视频，逐帧滚动绑定，文字与动画节拍交错）。滚动驱动模式则涉及滚动栈选择：简单模式优先用 CSS Scroll-Driven Animations（animation-timeline: scroll() 或 view()，animation-range 控制起止，Chrome 115+、Safari 26+ 支持，Firefox 仍为实验性，需提供回退，运行在合成器线程保证 60fps，始终包裹在 prefers-reduced-motion 媒体查询中）；复杂模式使用 GSAP ScrollTrigger + Lenis（GSAP 自 2024 年被 Webflow 收购后免费，适用于帧序列、固定区块、复杂时间线与多元素编排）。
适用场景
适合需要强视觉冲击力的品牌官网、编辑类内容站、产品发布页、奢侈品牌与获奖级创意网站，以及希望用 AI 生成图像、视频或 3D 资产作为设计核心的项目。
限制
资料未提供该技能的具体收费、价格、平台支持范围或效果保证。部分浏览器特性（如 CSS Scroll-Driven Animations 在 Firefox 中仍为实验性、WebGPU 的浏览器支持）存在兼容性限制，需提供回退方案。