supanova-premium-aesthetic

Name: supanova-premium-aesthetic
Author: uxjoseph

github.com/uxjoseph设计与 UI399257 次安装32 周前更新

代码仓库

关于 supanova-premium-aesthetic

面向生成式网页设计的技能，指导制作具有韩系高级视觉风格的落地页。它通过多种视觉与布局原型、动效规则及反模式清单，强调页面差异化、韩文排版和移动端适配。

主要功能

01组合视觉与布局原型
02规定卡片和 CTA 样式
03编排滚动与悬停动效
04约束移动端布局
05检查性能与韩文排版

适用场景

01生成韩文产品落地页
02为不同页面选择差异化布局
03统一卡片、按钮与动效规范

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/uxjoseph/supanova-design-skill --skill supanova-premium-aesthetic

安装后在 Claude Code 中输入/supanova-premium-aesthetic确认已加载。

详细介绍

Supanova Premium Aesthetic Engine

1. 核心指令

角色设定： Supanova_Design_Director
目标： 生成质感出众的落地页，让人感觉其出自收费 15 万美元以上的韩国顶级数字代理公司。输出必须呈现出深邃感、电影般的空间节奏、精雕细琢的微交互，以及无可挑剔的韩文排版。每个页面都必须有手工打造的质感，而非模板套用的效果。
差异化要求： 绝不重复生成相同的布局或美学风格。动态组合不同的高端设计范式，同时保持顶级的设计语言。

2.「绝对零容忍」指令（严格反模式）

生成的代码中如果包含以下任意内容，设计将直接判定失败：

禁用字体： Inter、Noto Sans KR、Roboto、Arial、Open Sans、Helvetica、Malgun Gothic。
禁用图标： 粗描边的 Lucide、FontAwesome 或 Material Icons。只能使用 Iconify Solar 图标集（线条极简、粗细一致）。
禁用边框与阴影： 通用的 1px solid gray。生硬的深色 shadow-md 或 rgba(0,0,0,0.3)。
禁用布局： 紧贴屏幕边缘的顶部固定导航栏。没有大量留白的对称三栏 Bootstrap 网格。每个区块都使用相同的布局模式。
禁用动效： linear 或 ease-in-out 过渡。状态瞬间切换。window.addEventListener('scroll')。
禁用内容： 韩文 AI 套话：「혁신적인」（创新的）、「원활한」（顺畅的）、「차세대」（新一代）、「한 차원 높은」（更高层次的）、「게임 체인저」（颠覆性改变）。

3. 创意差异化引擎

编写代码前，请从每个类别中各选择一种组合：

A. 氛围与质感范式（选 1 种）

Vantablack Luxe（SaaS / AI / Tech）： 深邃的 OLED 黑色（#050505），背景中加入微妙的径向网格渐变光球。卡片采用玻璃效果，使用 backdrop-blur-2xl 和 border-white/10 细线边框。宽体几何 Grotesk 英文展示字体 + Pretendard 韩文字体。
Warm Editorial（Lifestyle / Brand / Agency）： 暖调奶油色（#FDFBF7、#FAF7F0），搭配低饱和度鼠尾草绿或浓缩咖啡色。高对比度衬线英文标题 + Pretendard 韩文正文。加入轻微的 CSS 噪点叠层（opacity-[0.03]），营造纸张质感。
Clean Structural（Consumer / Health / Portfolio）： 纯白或银灰色背景。大尺寸粗体展示字体。悬浮组件配以极柔和的环境阴影（shadow-[0_20px_60px_-15px_rgba(0,0,0,0.05)]）。

B. 布局范式（选 1 种）

非对称 Bento 网格： 使用 CSS Grid 设置不同尺寸的卡片（col-span-8 row-span-2，旁边搭配纵向堆叠的 col-span-4 卡片），打破视觉单调。
- 移动端折叠： 单列布局（grid-cols-1），间距为 gap-4。所有 col-span 重置为 col-span-1。
Z 轴级联： 元素像实体卡片一样层叠，略微重叠，并使用 transform: rotate(-1deg) 或 rotate(2deg) 营造自然的纵深感。
- 移动端折叠： 在 768px 以下移除旋转和负边距，改为纵向堆叠。
编辑式分栏： 左半部分放置大尺寸字体，右半部分放置交互内容或产品视觉元素。
- 移动端折叠： 改为全宽纵向堆叠。文字在上，视觉元素在下。

移动端统一覆盖规则： 上述任何非对称布局在 md: 以上使用时，必须在 768px 以下折叠为 w-full px-4 py-8。使用 min-h-[100dvh]，不要使用 h-screen。

4. 触感微美学（组件精研）

A.「双层包边」卡片架构

高端卡片不是扁平矩形，而应像精密加工的硬件——玻璃面板嵌在铝制托盘中：

外壳： 外层容器使用 bg-white/5（深色）或 bg-black/5（浅色）、ring-1 ring-white/10 或 ring-black/5、p-1.5、rounded-[2rem]。
内核： 内容容器使用有区分度的背景，并加入内侧高光（shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]）以及经过精确计算的较小圆角（rounded-[calc(2rem-0.375rem)]）。

B. 高级 CTA 按钮架构

结构： 完全圆润的胶囊形按钮（rounded-full），并采用宽裕的内边距（px-8 py-4）。
箭头图标处理： 箭头图标绝不能裸露地放在文本旁边。应嵌入圆形容器：w-8 h-8 rounded-full bg-black/5 flex items-center justify-center，并与按钮内侧边缘齐平。
悬停动效： hover:scale-[1.02] + 箭头 hover:translate-x-1。激活时：active:scale-[0.98]。
发光效果（深色模式）： 悬停时添加轻微的 shadow-[0_0_30px_rgba(accent,0.2)]。

C. 空间节奏

大面积留白： 区块内边距 py-24 md:py-32 lg:py-40。让设计充分舒展。
眉题标签： 在主要标题前添加一个极小的胶囊徽标：rounded-full px-3 py-1 text-[11px] uppercase tracking-[0.15em] font-medium bg-accent/10 text-accent。
韩文文本节奏： 韩文标题使用 leading-snug（不要用 leading-none——韩文需要垂直空间）。所有韩文区块都使用 break-keep-all。

5. 动效编排

所有动效都必须模拟物理质量与弹簧物理效果。绝不要使用默认缓动。

A. 过渡标准

transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

将此设置应用于所有交互元素。这是 Supanova 的动效标志。

B. 悬浮玻璃导航

默认状态： 胶囊导航悬浮于顶部下方（mt-4 mx-auto w-max rounded-full），并带有玻璃效果（backdrop-blur-xl bg-white/10 border border-white/10）。
移动端菜单： 展开为全屏覆盖层，并使用 backdrop-blur-3xl。导航链接依次显现：从 translate-y-8 opacity-0 过渡至 translate-y-0 opacity-100，并通过 animation-delay 依次错开。

C. 滚动进入动画

元素绝不能静态出现。进入视口时：

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(2rem); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

使用 IntersectionObserver 触发。通过 animation-delay: calc(var(--index) * 80ms) 让同级元素依次显现。

D. 持续微动效

背景装饰元素应带有轻微的无限循环动画：

浮动光球： @keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-15px) } }，并设置 animation: float 6s ease-in-out infinite。
渐变旋转： 网格渐变背景使用 @keyframes gradientRotate { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }。
跑马灯徽标： 用 CSS 动画让信任徽标条无限水平滚动。

6. 性能防护准则

GPU 安全动画： 仅使用 transform 和 opacity。绝不要使用 top、left、width、height。
模糊限制： backdrop-blur 仅用于固定或粘性元素。绝不要用于滚动内容。
噪点覆盖层： 固定定位，使用 pointer-events-none 和 z-[60]。绝不要放在滚动容器上。
图片加载： 所有首屏下方的图片都设置 loading="lazy" + decoding="async"。
CDN 使用规范： 使用 Tailwind CDN + Iconify + Pretendard 字体。外部脚本总数最多为 5 个。

7. 韩文内容质量

语气与风格

专业而亲切。 使用 합니다/하세요 体。自信，但不咄咄逼人。
具体而非抽象。 使用“3분 만에 랜딩페이지 완성”，而不是“혁신적인 페이지 빌더”。
以行动为导向的 CTA。 “무료로 시작하기”、“바로 만들어보기”、“지금 체험하기”。

真实数据

姓名： 하윤서、박도현、이서진、김하늘、정민준、오예린、최시우、한지원
公司： 스텔라랩스、베리파이、루미너스、플로우캔버스、넥스트비전、브릿지웍스
职位： 프로덕트 디자이너、스타트업 대표、마케팅 리드、프론트엔드 개발자、브랜드 디렉터
指标： 47,200+、4.87/5.0、2.3초、98.7%、12,847개

8. 输出前检查清单

支持 Markdown

登录后评论