https://github.com/nextlevelbuilder/ui-ux-pro-max-skill 把「AI 直出页面的那股 AI 味」压下去，用一套更工程化、更审美化、更可复用的流程，让UI/UX 设计质量显著提升。 hover 状态必须完整logo/icon 的比例要合理鼠标手型、可点击反馈要明确动画要平滑、别晃眼玻璃质感不要脏文字亮度对比要够边框要可见（别隐形）导航栏间距、内容间距要一致最大宽度要统一（别一会儿 1200 一会儿 1440）

Vibe Coding与设计（一）：如何实现有设计感的网站？

前言 欢迎来到Kaito的“Vibe Coding 与设计”系列! 这个系列专为想用 AI 做出有设计感网站的开发者准备——不仅教你怎么做,更让你理解为什么这样做。

在第一篇中,我们将从底层原理出发,探讨 AI 生成页面为何千篇一律,并给出一套可操作的解决方案: 如何通过设计 Token 约束 AI,让它生成具有个人风格的网站。

为什么AI生成的页面千篇一律? 现象观察 如果你用过 Cursor、GitHub Copilot 或其他 AI 编码工具生成页面,可能会发现一个有趣的现象:不同人、不同场景生成的页面看起来总是那么相似——同样的布局结构、相似的组件样式、几乎一致的交互模式。

这背后并非巧合,而是两个关键因素共同作用的必然结果。

第一层原因:原子设计方法论 image.png 现代前端开发普遍采用"原子设计"(Atomic Design)思想,将界面拆解为五个层次:

原子:最基础的元素(按钮、输入框、图标)

分子:几个原子组合(搜索栏 = 输入框 + 按钮)

组织:多个分子组合(导航栏、卡片列表)

模板:页面级结构框架

页面:具体内容填充

这套方法论的优势是复用性强、维护成本低,但副作用明显:大家都在使用同样的设计系统(Material UI、Ant Design、Tailwind CSS),构建同样的组件库,最终拼装出来的页面自然大同小异。

举个例子:一个登录页面,无论谁设计,基本逃不出"居中卡片 + Logo + 两个输入框 + 一个按钮"的结构。

第二层原因:AI 的工作原理 image.png AI 代码生成的本质是模式识别与概率选择,这决定了它的输出特征:

1. 训练数据决定输出范围 AI 学习的是 GitHub、StackOverflow 等平台上的海量代码

这些代码中,主流设计模式占据绝对多数

小众、创新的方案因样本稀少,AI 难以学习或学不好

2. 高频模式优先输出 AI 会选择"出现概率最高"的代码模式

比如卡片布局、Flexbox 居中、响应式栅格——这些都是训练数据中的"高频词"

结果就是 AI 生成的代码趋向"最安全、最常见"的方案

3. 缺乏真正的创造力 AI 不理解设计意图,只是在已有模式中做排列组合

无法像人类设计师那样基于品牌调性、用户情感进行创新

双重效应叠加 image.png 当原子设计方法论遇上 AI 的工作原理,同质化问题被进一步放大:

设计层面:原子设计让所有人使用同一套组件体系

实现层面:AI 优先选择训练数据中最常见的实现方式

最终结果:不仅页面结构相似,连代码风格、CSS 写法都趋于一致

就像用同一套乐高积木(原子设计),按照说明书上最常见的拼法(AI 模式识别)搭建房子,最终盖出来的房子自然长得很像。

如何打破这种困境? 理解了同质化的根源后,破局之道就变得清晰了:如何让 AI 生成具有差异化的设计?

答案其实很简单——当我们没有明确告诉 AI 我们的需求时,AI 就会采用默认决策。要让你的网页与众不同,就需要主动提供你的设计诉求(颜色、布局、动效等)。

但在此之前,我们需要先理解:一个网页到底由哪些元素构成?只有掌握了这些,才能知道应该向 AI 提供什么样的约束条件。

设计系统的本质:从规范到实现 网页设计系统层次结构手绘插图 从设计规范的角度看,任何网页都可以拆解为以下几个层次:

视觉基础:颜色、字体、间距、圆角、阴影等设计 Token

基础组件:按钮、输入框、图标、标签等原子级元素

复合组件:表单、表格、对话框、导航栏等功能模块

布局模式:栅格系统、响应式规则、页面框架

交互反馈:动效、过渡、加载状态、错误提示

这就是设计系统(Design System)的骨架——从最底层的视觉变量,到最上层的页面模板,层层组装。接下来,让我们通过一个实际案例,看看这套体系如何落地。

设计系统案例: Shadcn/ui 的组装逻辑 image.png 我们以 Shadcn/ui 为例,看看一个现代化的设计系统是如何将设计规范转化为可编程的代码资产,最终落地到业务页面的:

第一层:设计规范的代码化(Token 沉淀) Shadcn/ui 通过 CSS 变量和 Tailwind 配置来沉淀设计 Token:

/ globals.css /

@layer base {

:root {

--background: 0 0% 100%;

--foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;

--primary-foreground: 210 40% 98%;

--radius: 0.5rem;

/* 更多设计变量... */

}

.dark {

--background: 222.2 84% 4.9%;

--foreground: 210 40% 98%;

--primary: 210 40% 98%;

--primary-foreground: 222.2 47.4% 11.2%;

}

}

// tailwind.config.ts

export default {

theme: {

extend: {

  colors: {

    background: "hsl(var(--background))",

    foreground: "hsl(var(--foreground))",

    primary: {

      DEFAULT: "hsl(var(--primary))",

      foreground: "hsl(var(--primary-foreground))",

    },

  },

  borderRadius: {

    lg: "var(--radius)",

    md: "calc(var(--radius) - 2px)",

    sm: "calc(var(--radius) - 4px)",

  },

},

},

}

第二层:组件开发的工程化(Token 消费) 基于 Radix UI 和 Tailwind,Shadcn/ui 提供了可复制粘贴的组件代码:

// components/ui/button.tsx

import { Slot } from "@radix-ui/react-slot";

import { cva, type VariantProps } from "class-variance-authority";

const buttonVariants = cva(

"inline-flex items-center justify-center rounded-md text-sm font-medium",

{

variants: {

  variant: {

    default: "bg-primary text-primary-foreground hover:bg-primary/90",

    outline: "border border-input bg-background hover:bg-accent",

  },

  size: {

    default: "h-10 px-4 py-2",

    lg: "h-11 rounded-md px-8",

  },

},

defaultVariants: {

  variant: "default",

  size: "default",

},

}

);

// 补充 ButtonProps 类型定义(原代码缺失)

type ButtonProps = VariantProps &

React.ButtonHTMLAttributes & {

asChild?: boolean;

};

export function Button({ variant, size, asChild = false, ...props }: ButtonProps) {

const Comp = asChild ? Slot : "button";

return (

<Comp className={buttonVariants({ variant, size })} {...props} />

);

}

第三层:业务模板的组装(完整数据流) 再往上,就是把组件组合成完整的业务模块:

// 业务组件:登录表单

import { Button } from "@/components/ui/button";

import { Input } from "@/components/ui/input";

import { Label } from "@/components/ui/label";

import { useForm } from "react-hook-form";

// 定义表单数据类型(替代 any,提升类型安全)

type LoginFormData = {

username: string;

password: string;

};

export function LoginForm() {

const { register, handleSubmit } = useForm();

const onSubmit = (data: LoginFormData) => {

console.log("登录信息:", data);

};

return (

<form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-sm">
  <div className="space-y-2">
    <Label htmlFor="username">用户名</Label>
    <Input
      id="username"
      placeholder="请输入用户名"
      {...register("username", {
        required: "用户名不能为空",
      })}
    />
  </div>

  <div className="space-y-2">
    <Label htmlFor="password">密码</Label>
    <Input
      id="password"
      type="password"
      placeholder="请输入密码"
      {...register("password", {
        required: "密码不能为空",
      })}
    />
  </div>

  <Button type="submit" className="w-full">
    登录
  </Button>
</form>

);

}

这套基于 CSS 变量和 Tailwind 的分层体系,带来了三个核心优势:

可维护性:修改设计规范时,只需调整 CSS 变量值,所有组件自动响应变化

可复用性:组件代码直接存在你的项目中,可以自由定制和扩展(如添加新的变体)

可扩展性:通过 Tailwind 的工具类和 CVA(Class Variance Authority),轻松创建新的设计变体

理解了设计系统的组装逻辑后,接下来我们就可以着手打造自己的个性化网站了。

AI时代，如何实现有个人风格的网站? 详细手绘AI设计流程图 理解了同质化的根源和设计系统的组装逻辑后,我们可以总结出一个可操作的实现路径:寻找设计参考 → 提取设计 Token → 约束 AI 生成 → 编码落地。下面详细说明每一步的操作方法。

第一步:寻找高质量的设计参考 设计参考的质量直接决定了最终产出的水准。以下是几个推荐方向:

1. 设计作品集平台

Dribbble:高质量的 UI 设计作品,适合寻找创意灵感

Behance:完整的设计项目案例,能看到系统化的设计思路

Awwwards:获奖级别的网站设计,适合学习前沿趋势

2. 现代设计系统文档

Vercel Design:极简主义风格的典范

Linear Design:注重细节和微交互的设计

GitHub Primer:清晰的开发者友好设计

3. 设计稿资源

Figma Community:可直接获取完整的设计稿文件

UI8、Creative Market:付费但质量极高的设计模板

选择建议:不要只看单个页面,要选择有完整设计系统的案例(包含多种组件状态、响应式适配、深色模式等),这样才能提取出系统化的设计规范。

第二步:系统化提取设计 Token 拿到设计参考后,需要像考古学家一样"挖掘"出背后的设计基因。这里提供一个结构化的提取清单:

1. 颜色系统

主色调:

• Primary: #2563eb (品牌主色)

• Primary Hover: #1d4ed8 (交互态)

中性色:

• Background: #ffffff / #0a0a0a (明/暗)

• Foreground: #171717 / #fafafa

• Border: #e5e5e5 / #262626

• Muted: #f5f5f5 / #1a1a1a

语义色:

• Success: #10b981

• Warning: #f59e0b

• Error: #ef4444

• Info: #3b82f6

2. 字体规范

字体族:

• 英文: Inter, -apple-system, sans-serif

• 中文: "PingFang SC", "Microsoft YaHei"

• 代码: "JetBrains Mono", monospace

字号阶梯:

• xs: 12px / 0.75rem

• sm: 14px / 0.875rem

• base: 16px / 1rem

• lg: 18px / 1.125rem

• xl: 20px / 1.25rem

• 2xl: 24px / 1.5rem

行高:

• tight: 1.25

• normal: 1.5

• relaxed: 1.75

3. 间距系统

基础单位: 4px (0.25rem)

间距阶梯:

• 1: 4px

• 2: 8px

• 3: 12px

• 4: 16px

• 6: 24px

• 8: 32px

• 12: 48px

• 16: 64px

4. 圆角与阴影

圆角:

• sm: 4px

• md: 6px

• lg: 8px

• xl: 12px

• 2xl: 16px

• full: 9999px

阴影:

• sm: 0 1px 2px rgba(0,0,0,0.05)

• md: 0 4px 6px rgba(0,0,0,0.1)

• lg: 0 10px 15px rgba(0,0,0,0.1)

• xl: 0 20px 25px rgba(0,0,0,0.1)

5. 过渡动画

动画时长:

• fast: 150ms (快速反馈,如按钮悬停)

• base: 200ms (标准过渡,如下拉菜单)

• slow: 300ms (复杂动画,如模态框)

• slower: 500ms (页面级过渡)

缓动函数:

• ease-in: cubic-bezier(0.4, 0, 1, 1)

• ease-out: cubic-bezier(0, 0, 0.2, 1)

• ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)

• spring: cubic-bezier(0.34, 1.56, 0.64, 1)

常用过渡属性:

• colors: transition-colors duration-200

• transform: transition-transform duration-300

• opacity: transition-opacity duration-200

• all: transition-all duration-200

[别的规范…]

提取工具推荐:

Figma Inspect 模式:直接查看设计稿中的 CSS 属性

浏览器开发者工具:分析现有网站的样式

AI 提取(推荐 Google Gemini 3 Pro)

第三步:将 Token 融入 AI 代码生成流程 提取完设计 Token 后,关键是让 AI 理解并严格遵守这些约束。你可以创建 .cursorrules 文件或自定义 Claude Code 的 Skill:

设计系统约束

你是一个严格遵守设计规范的前端工程师。在生成代码时,必须使用以下设计 Token:

颜色系统

• 主色调: bg-blue-600 hover:bg-blue-700

• 中性色: bg-white text-gray-900 border-gray-200

• 语义色: 成功(green-500) 警告(amber-500) 错误(red-500)

间距规范

• 组件内边距: p-4 (16px)

• 组件间距: space-y-4 gap-4

• 页面边距: px-6 py-8

圆角规范

• 按钮/输入框: rounded-md (6px)

• 卡片: rounded-lg (8px)

• 头像: rounded-full

字体规范

• 标题: font-semibold text-xl

• 正文: font-normal text-base

• 辅助文字: text-sm text-gray-600

组件规范

• 按钮高度: h-10 (40px)

• 输入框高度: h-10

• 最大内容宽度: max-w-7xl mx-auto

禁止事项

• 不要使用 blue-500 以外的蓝色

• 不要使用 8px 以外的圆角(除非是 rounded-full)

• 不要使用内联样式

• 不要使用任意值(如 w-[123px])

实际案例:生成一个按钮组件

❌ 没有约束的提示词:

帮我生成一个按钮组件

AI 可能生成:

点击我

✅ 有约束的提示词:

基于设计系统生成按钮:

• 主色调: bg-blue-600 hover:bg-blue-700

• 高度: h-10

• 内边距: px-4

• 圆角: rounded-md

• 字体: font-medium text-sm

AI 会生成:

点击我

第四步:编码实现的最佳实践 提取了 Token 并约束了 AI 后,最后一步是将设计系统落地到代码中。

推荐技术栈:

框架: Next.js 16+ (App Router)

样式: Tailwind CSS 3.4+

组件: Radix UI / Headless UI

类型: TypeScript

动效: Framer Motion

代码组织结构:

src/

├── styles/

│ └── globals.css # 设计 Token 定义

├── lib/

│ └── design-tokens.ts # Token 的 TS 类型定义

├── components/

│ ├── ui/ # 基础组件(Button, Input...)

│ ├── layouts/ # 布局组件

│ └── features/ # 业务组件

└── app/ # 页面路由

核心实现:在 globals.css 中定义 Token

@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {

:root {

/* 颜色系统 */

--color-primary: 217 91% 60%;

--color-background: 0 0% 100%;

--color-foreground: 0 0% 9%;

--color-border: 0 0% 90%;



/* 间距系统 */

--spacing-unit: 0.25rem; /* 4px */



/* 圆角系统 */

--radius-sm: 0.25rem;

--radius-md: 0.375rem;

--radius-lg: 0.5rem;



/* 字体系统 */

--font-sans: 'Inter', -apple-system, sans-serif;

--font-mono: 'JetBrains Mono', monospace;

}

.dark {

--color-background: 0 0% 9%;

--color-foreground: 0 0% 98%;

--color-border: 0 0% 20%;

}

}

在 tailwind.config.ts 中消费 Token

import type { Config } from 'tailwindcss'

const config: Config = {

content: ['./src/*/.{js,ts,jsx,tsx,mdx}'],

theme: {

extend: {

  colors: {

    primary: 'hsl(var(--color-primary))',

    background: 'hsl(var(--color-background))',

    foreground: 'hsl(var(--color-foreground))',

    border: 'hsl(var(--color-border))',

  },

  borderRadius: {

    sm: 'var(--radius-sm)',

    md: 'var(--radius-md)',

    lg: 'var(--radius-lg)',

  },

  fontFamily: {

    sans: ['var(--font-sans)'],

    mono: ['var(--font-mono)'],

  },

},

},

plugins: [],

}

export default config

创建基础组件示例

// components/ui/button.tsx

import { cva, type VariantProps } from 'class-variance-authority'

import { ButtonHTMLAttributes, forwardRef } from 'react'

const buttonVariants = cva(

// 基础样式(来自设计 Token)

'inline-flex items-center justify-center font-medium transition-colors',

{

variants: {

  variant: {

    primary: 'bg-primary text-white hover:bg-primary/90',

    outline: 'border border-border bg-background hover:bg-foreground/5',

  },

  size: {

    default: 'h-10 px-4 text-sm rounded-md',

    lg: 'h-12 px-6 text-base rounded-lg',

  },

},

defaultVariants: {

  variant: 'primary',

  size: 'default',

},

}

)

type ButtonProps = ButtonHTMLAttributes &

VariantProps & {

asChild?: boolean

}

export const Button = forwardRef(

({ className, variant, size, ...props }, ref) => {

return (

  <button
    ref={ref}
    className={buttonVariants({ variant, size, className })}
    {...props}
  />

)

}

)

Button.displayName = 'Button'

关键优势:

中心化管理:所有设计决策集中在 CSS 变量中,修改一处即可全局生效

类型安全:通过 CVA 和 TypeScript 确保组件使用的一致性

AI 友好:清晰的 Token 定义让 AI 更容易理解和遵守约束

主题切换:通过切换 CSS 类(如 .dark)即可实现深色模式

通过这四步,你就能让 AI 生成的页面摆脱"千篇一律"的困境,拥有独特的设计风格。核心思路是:不要让 AI 做设计决策,而是让 AI 在你定义的设计语言中编码实现。

结语 AI 生成网页千篇一律的根源在于:原子设计的标准化与 AI 的高频模式选择。我们要实现有设计感的网站，并不意味着我们要放弃 AI,而是学会驾驭它——通过系统化提取设计 Token 并约束 AI 生成,让它成为你设计语言的执行者。

这套方法论的价值不止于做出好看的网站,更在于培养设计工程化思维。记住,设计系统是迭代出来的,不必追求一开始就完美。从核心的颜色、字体、间距入手,在实践中逐步完善。

掌握了这些基础，我们已经就可以实现一个具有设计感的网站了。下一期,我会从零开始, 带你使用AI工具构建一个具备设计感的网站。敬请期待!

Vibe Coding与设计（二）：5分钟，实现一个有设计感的网站 前言 image.png 在上一篇文章中，我们揭示了 AI 生成页面千篇一律的根源——原子设计的标准化与 AI的高频模式选择，并提出了解决方案：通过提取设计 Token 来约束 AI，让它成为你设计语言的执行者而非决策者。今天，我们将这个理念付诸实践。

本文是一次完整的实战演练：从寻找高质量设计参考，到利用 AI 工具提取设计基因，最终生成一个真正有设计感的落地页。我们的目标很明确——实现一个叫做nanobanana的AI工具站的 Hero Section，整个过程分为三个核心步骤：

寻找高质量的设计参考（Visual Anchor）

提取设计基因与落地页信息

利用Gemini 3 Pro 提取设计风格

使用Claude Chrome插件提取落地页信息

生成具有设计风格的落地页

这套方法的美妙之处在于：即使你完全不懂设计原理，也能通过系统化的流程，借助 AI 的力量，做出专业级的视觉效果。让我们开始吧！

寻找高质量的设计参考（Visual Anchor） 对于非设计专业的开发者，凭空创造一套设计系统是非常困难的。最聪明的方法是：Steal like an artist（像艺术家一样偷师）。我们需要寻找一个视觉锚点（Visual Anchor）。

本次实战目标： 实现一个AI工具站的 Hero Section。

资源推荐： saaslandingpage.com。这个网站收集了全球最优秀的 SaaS 产品落地页，不仅审美在线，而且非常适合 Web 开发落地（不像 Dribbble 上很多概念稿那样难以实现）。

在挑选参考对象时，建议遵循以下三个标准：

层次清晰：标题、正文、辅助文字有明显的字号和颜色差异。

配色克制：主色不超过 2 种，中性色（灰度）运用得当。

组件标准：按钮、卡片、输入框看起来像是标准组件库变体，而不是异形设计。

这里我随便选择了一个 Landing Page

image.png 提取设计基因与落地页信息 找到了参考图，接下来需要完成两个关键步骤：一是"考古"环节——把图片里的视觉信息提取为计算机可读的设计数据；二是提取目标落地页的内容结构信息。

利用 Gemini 3 Pro 提取设计风格 这里我们使用 Google Gemini 3 Pro，因为它在理解图像细节和输出结构化数据方面表现优异。你只需要将上面的落地页图片 + 我下面的提示词发送给Gemini 3 Pro：（PS：Prompt模版是去 Design Prompts 随便找的）

我计划复刻一个同类型的网站，需要你深度分析我提供的网页落地页的设计风格。请从页面中提取核心设计信息，并参考我给出的 Prompt 范例，生成一份精准对应的 Prompt。

我想在使用到该Prompt后，AI能将组件、颜色、设计风格等深度还原

注意：我提供的Prompt只是模版，你不要使用内部的东西！！！ 所有的内容都必须由你来提供

prompt模版：

You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.

Before proposing or writing any code, first build a clear mental model of the current system:

• Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).

• Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.

• Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.

• Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).

Ask the user focused questions to understand the user's goals. Do they want:

• a specific component or page redesigned in the new style,

• existing components refactored to the new system, or

• new pages/features built entirely in the new style?

Once you understand the context and scope, do the following:

• Propose a concise implementation plan that follows best practices, prioritizing:

• centralizing design tokens,

• reusability and composability of components,

• minimizing duplication and one-off styles,

• long-term maintainability and clear naming.

• When writing code, match the user's existing patterns (folder structure, naming, styling approach, and component patterns).

• Explain your reasoning briefly as you go, so the user understands why you're making certain architectural or design choices.

Always aim to:

• Preserve or improve accessibility.

• Maintain visual consistency with the provided design system.

• Leave the codebase in a cleaner, more coherent state than you found it.

• Ensure layouts are responsive and usable across devices.

• Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system's personality instead of producing a generic or boilerplate UI.

Design Philosophy

The Hand-Drawn design style celebrates authentic imperfection and human touch in a digital world. It rejects the clinical precision of modern UI design in favor of organic, playful irregularity that evokes sketches on paper, sticky notes on a wall, and napkin diagrams from a brainstorming session.

Core Principles:

• No Straight Lines: Every border, shape, and container uses irregular border-radius values to create wobbly, hand-drawn edges that reject geometric perfection

• Authentic Texture: The design layer paper grain, dot patterns, and subtle background textures to simulate physical media (notebook paper, post-its, sketch pads)

• Playful Rotation: Elements are deliberately tilted using small rotation transforms (-2deg to 2deg) to break rigid grid alignment and create casual energy

• Hard Offset Shadows: Reject soft blur shadows entirely. Use solid, offset box-shadows (4px 4px 0px) to create a cut-paper, layered collage aesthetic

• Handwritten Typography: Use exclusively handwritten or marker-style fonts (Kalam, Patrick Hand) that feel human and approachable, never corporate or sterile

• Scribbled Decoration: Add visual flourishes like dashed lines, hand-drawn arrows, tape effects, thumbtacks, and irregular shapes to reinforce the sketched aesthetic

• Limited Color Palette: Stick to pencil blacks, paper whites, correction marker red, and post-it yellow for bold but cohesive simplicity

• Intentional Messiness: Embrace overlap, asymmetry, and visual "mistakes" that make the design feel spontaneous and creative rather than manufactured

Emotional Intent:

This style should feel approachable, creative, human-centered, and fun. It lowers barriers and invites interaction by appearing unfinished and work-in-progress, making users feel like collaborators rather than consumers. Perfect for creative tools, brainstorming platforms, educational content, or any product that wants to emphasize human creativity over corporate polish.

Design Token System

Colors (Single Palette - Light Mode)

• Background: #fdfbf7 (Warm Paper)

• Foreground: #2d2d2d (Soft Pencil Black - never pure black)

• Muted: #e5e0d8 (Old Paper / Erased Pencil)

• Accent: #ff4d4d (Red Correction Marker)

• Border: #2d2d2d (Pencil Lead)

• Secondary Accent: #2d5da1 (Blue Ballpoint Pen)

Typography

• Headings: Kalam (wght 700) - Looks like a thick felt-tip marker.

• Body: Patrick Hand (wght 400) - Legible but distinctly handwritten.

• Scale: Large and readable. Headings should vary in size dramatically to look like emphasized notes.

Radius & Border

• Wobbly Borders: CRITICAL. Do NOT use standard rounded-* classes alone.

• Technique: Use inline style={{ borderRadius: ... }} with multiple values to create irregular organic ellipses.

• Example: border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;

• Store reusable radius values in config as wobbly and wobblyMd

• Border Width: Thick and variable. border-2 is the minimum. Use border-[3px] or border-4 for emphasis.

• Style: border-solid is default for most elements. Use border-dashed for secondary elements, dividers, and sketchy overlays.

Shadows/Effects

• Hard Offset Shadows: No blur. Just a solid offset to create a cut-paper, layered collage aesthetic.

• Standard: box-shadow: 4px 4px 0px 0px #2d2d2d;

• Emphasized: box-shadow: 8px 8px 0px 0px #2d2d2d;

• Hover State: Reduce offset 2px 2px or 6px 6px to create "lifting" effect

• Paper Texture: Use radial-gradient dot pattern on body background to simulate notebook paper grain

• backgroundImage: radial-gradient(#e5e0d8 1px, transparent 1px)

• backgroundSize: 24px 24px

• Subtle Animations: Gentle bounce (3s duration) for decorative elements, rotation on hover for playful interaction

Component Stylings

Buttons

• Shape: Irregular wobbly oval using custom border-radius from config

• Normal State:

• White background, border-[3px] black border, black text

• Hard offset shadow: shadow-[4px_4px_0px_0px_#2d2d2d]

• Font: Patrick Hand (body font)

• Hover State:

• Background fills with Accent red #ff4d4d, text turns white

• Shadow reduces to shadow-[2px_2px_0px_0px_#2d2d2d]

• Subtle translate: translate-x-[2px] translate-y-[2px]

• Active State:

• Shadow disappears completely (button "presses flat")

• Translate increases: translate-x-[4px] translate-y-[4px]

• Secondary Variant: Uses muted background #e5e0d8, hovers to blue #2d5da1

Cards/Containers

• Base Style: White background (#ffffff) with wobbly black border (border-2)

• Border Radius: Use wobblyMd radius from config for medium containers

• Shadow: Subtle 3px 3px 0px 0px rgba(45, 45, 45, 0.1) for depth

• Decoration Options:

• decoration="tape": Translucent gray bar positioned at top center with slight rotation

• decoration="tack": Red circular thumbtack at top center

• No decoration for minimal aesthetic

• Special Treatments:

• Post-it yellow background #fff9c4 for feature cards

• Speech bubble style for testimonials with geometric tail using border-based triangle

• Sticky-note tags for section labels

Inputs

• Style: Full box with wobbly borders (not just underline)

• Border: border-2 with wobbly radius matching button aesthetic

• Font: Patrick Hand (body font) for authentic hand-written feel

• Background: White with placeholder text in muted color #2d2d2d/40

• Focus State:

• Border changes to blue #2d5da1

• Ring effect: ring-2 ring-[#2d5da1]/20

• No standard outline, maintains wobbly aesthetic

Layout Strategy

• Grid System: Use Tailwind's responsive grid (md:grid-cols-2, md:grid-cols-3) but add visual irregularity

• Rotation: Apply small rotations (rotate-1, -rotate-2) to cards, images, and decorative elements

• Breaking Alignment:

• Stats: Organic shapes with varied border-radius instead of perfect circles

• Cards: Slight rotation on hover (hover:rotate-1 or hover:-rotate-1)

• Pricing: Scale up highlighted card slightly on desktop (md:scale-105)

• Overlap & Layering:

• Overlapping avatar circles with negative margin (-space-x-4)

• Decorative elements positioned absolutely outside parent bounds

• Speech bubble tails extending beyond card borders

• Whitespace:

• Consistent section padding (py-20) for rhythm

• Generous gap in grids (gap-8) to prevent crowding

• Max-width containers (max-w-5xl, max-w-3xl) for focused content

• Z-Index Layering: Decorative SVG backgrounds at low z-index, step numbers elevated with z-10

Non-Genericness (Bold Choices)

Unique Visual Signatures:

• NO STRAIGHT LINES: Every container, button, card, and frame uses irregular border-radius values—never standard Tailwind rounded classes

• Hand-Drawn SVG Decorations:

• Arrow pointing to hero CTA with dashed path

• Squiggly connecting line between "How It Works" steps

• Corner frame marks on hero image placeholder

• Authentic Paper Effects:

• Tape strips (translucent gray rectangles) on feature cards

• Thumbtack pins (colored circles) for card decoration

• Dashed circle overlay highlighting popular pricing tier

• Speech bubble geometric tails on testimonials

• Playful Typography Treatments:

• Rotating exclamation mark in hero headline

• Wavy underline decoration on navigation links and footer headers

• Drop-cap first letter treatment in Product Detail section

• Post-it yellow sticky-note tag on Product Detail card

• Scribbled Accents:

• Bouncing decorative circle near hero image (desktop only)

• Dashed borders on secondary elements and dividers

• Emoji sketches in blog post placeholders

• Line-through hover effect on footer links

• Interactive Personality:

• Buttons "press flat" by eliminating shadow on active state

• Cards rotate slightly on hover

• Blog cards increase shadow offset on hover for "lift" effect

• Grayscale-to-color transition on blog images (removed in final implementation for simplicity)

Effects & Animation

• Hover: "Jiggle" effect. hover:rotate-1 or hover:-rotate-2.

• Transition: transition-transform duration-100 (Fast and snappy).

Spacing, Layout & Iconography

• Max Width: max-w-5xl (Keep it contained like a sketchbook).

• Icons: lucide-react icons with stroke-width={2.5} or 3.

• Icon Style: Enclose key icons in rough circles.

Responsive Strategy

Mobile-First Approach:

• Typography Scaling:

• Headings: text-4xl md:text-5xl or text-5xl md:text-6xl

• Body text: text-lg md:text-xl or text-base md:text-xl

• Buttons: text-lg md:text-2xl

• Layout Stacking:

• All grids collapse to single column on mobile, expand to 2-3 columns on md: breakpoint

• Hero switches from 2-column to stacked with md:grid-cols-2

• Stats: 2-column grid on mobile (grid-cols-2), 4-column on desktop (md:grid-cols-4)

• Hide Decorative Elements:

• Hand-drawn arrow near CTA: hidden md:block

• Bouncing decorative circle: hidden md:block

• Squiggly connecting line in "How It Works": hidden md:block

• Dashed circle on pricing card: hidden md:block

• Maintain Core Aesthetic:

• Keep wobbly borders and handwritten fonts on all screen sizes

• Reduce rotation slightly if needed (-rotate-1 instead of -rotate-2)

• Maintain hard offset shadows (never add blur)

• Preserve playful personality and irregular shapes

• Touch-Friendly Targets:

• Buttons use minimum h-12 (48px) for accessibility

• Adequate spacing between interactive elements with gap-8

• Spacing Adjustments:

• Section padding remains py-20 for vertical rhythm

• Reduce horizontal padding when needed: px-6

• Stats scale down: h-24 w-24 md:h-32 md:w-32

• Pricing cards: p-6 md:p-8 for better mobile fit

---

Gemini 3 Pro 模型返回的信息如下：

You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.

Before proposing or writing any code, first build a clear mental model of the current system:

• Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).

• Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.

• Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.

• Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).

Ask the user focused questions to understand the user's goals. Do they want:

• a specific component or page redesigned in the new style,

• existing components refactored to the new system, or

• new pages/features built entirely in the new style?

Once you understand the context and scope, do the following:

• Propose a concise implementation plan that follows best practices, prioritizing:

• centralizing design tokens,

• reusability and composability of components,

• minimizing duplication and one-off styles,

• long-term maintainability and clear naming.

• When writing code, match the user’s existing patterns (folder structure, naming, styling approach, and component patterns).

• Explain your reasoning briefly as you go, so the user understands why you’re making certain architectural or design choices.

Always aim to:

• Preserve or improve accessibility.

• Maintain visual consistency with the provided design system.

• Leave the codebase in a cleaner, more coherent state than you found it.

• Ensure layouts are responsive and usable across devices.

• Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system’s personality instead of producing a generic or boilerplate UI.

Design Philosophy

The "Digital Ocean Pop" style blends the clarity of modern SaaS interfaces with the playful, retro energy of pixel art and neo-brutalism. It creates a friendly, confident environment that feels like a gamified workspace.

Core Principles:

• Defined Boundaries: Elements are clearly separated by distinct black borders (border-2). There is no ambiguity where one element ends and another begins.

• Hard Shadows (Neo-Brutalism Lite): Shadows are solid, black, and offset. They provide a "stacked" physical feel, like stickers or cards laid on a surface.

• Vibrant Optimism: The color palette uses high-energy Lime Green and Lavender against a calming, deep ocean gradient.

• Pixel & Vector Hybrid: The interface mixes high-fidelity vector UI (rounded corners, smooth fonts) with low-fidelity pixel art accents (icons, mascots) to create a unique "digital native" aesthetic.

• Card-Based Architecture: Content is strictly compartmentalized into white cards with rounded corners, mimicking software windows or dashboard widgets.

Emotional Intent:

Professional but not boring. The style says "We are high-tech (Pixel Art) but we are also fun and accessible (Lime Green & Roundness)." It reduces the cognitive load of complex B2B software by wrapping it in a toy-like, approachable visual language.

Design Token System

Colors (Vibrant SaaS Palette)

• Background Gradient: A full-page vertical gradient strategy.

• Top: Light Sky Blue/Cyan (#E0F2FE)

• Middle: Soft Teal (#99F6E4)

• Bottom/Footer: Deep Ocean Blue (#172554)

• Surface (Cards): White (#FFFFFF) or very subtle off-white (#F8FAFC).

• Primary Accent (Action): Lime Green (#BEF264 or #A3E635) - Used for primary buttons and highlights.

• Secondary Accent: Soft Lavender/Pink (#E9D5FF or #F5D0FE) - Used for secondary tags or floating elements.

• Text Primary: Deep Navy/Black (#0F172A) - High contrast.

• Border: Pure Black (#000000) or Very Dark Navy (#020617).

Typography

• Font Family: Plus Jakarta Sans, Outfit, or Inter (Bold weights are crucial).

• Headings: Heavy, tight tracking. font-bold or font-extrabold.

• Body: Clean, legible, comfortable line-height (leading-relaxed).

• Pixel Font (Optional): Used specifically for the brand logo or specific "tech" badges (e.g., 'Press Start 2P').

Radius & Border

• Consistent Roundness:

• Small Elements (Tags/Buttons): rounded-lg or rounded-xl.

• Large Containers (Cards/Sections): rounded-2xl or rounded-3xl.

• Border Thickness:

• Standard: border-2 border-black (or very dark navy). This is the defining visual trait.

• Divider lines: border-b-2.

• Style: Always border-solid.

Shadows/Effects

• Hard Offset Shadows: Critical for the "Pop" look. No blur.

• Small: shadow-[2px_2px_0px_0px_#000]

• Medium (Buttons/Cards): shadow-[4px_4px_0px_0px_#000]

• Hover: Shadows often move or disappear (translate effect) to simulate pressing.

Component Stylings

Buttons

• Primary Call-to-Action:

• Background: Lime Green (bg-[#BEF264]).

• Border: border-2 border-black.

• Text: Bold Black (text-black font-bold).

• Radius: rounded-xl or rounded-full.

• Shadow: shadow-[4px_4px_0px_0px_#000].

• Hover: translate-x-[2px] translate-y-[2px] shadow-[2px_2px_0px_0px_#000] (Button feels physically pressed).

• Secondary:

• Background: White.

• Border: border-2 border-black.

• Shadow: shadow-[4px_4px_0px_0px_#000].

Cards & Containers

• Base Style: White background, border-2 border-black, rounded-2xl or rounded-3xl.

• Header Strips: Some cards have a colored "header" strip (like a browser window or folder tab) at the top, often in Lavender or Pale Blue.

• Content Layout: High padding (p-6 or p-8). Clear separation between the header (icon + title) and body text.

Badges / Tags

• Appearance: Pill-shaped (rounded-full).

• Style: White background with black border, OR pastel background (Lavender/Yellow) with black border.

• Typography: Uppercase, small, bold, tracking-wide.

Layout Strategy

• Z-Layering: The design relies on "stickers" floating over the gradient background.

• Layer 0: The Gradient Background (Sky -> Ocean).

• Layer 1: Clouds / Decorative Pixel Art (floating absolutely).

• Layer 2: Main Content Cards.

• Grid System: Standard 12-column grid, but containers are often centered with max-w-5xl.

• Bento Grid: The "How it works" or "Features" sections often use a Bento-box style layout—different sized rectangular cards fitting together.

Non-Genericness (Bold Choices)

Unique Visual Signatures:

• Pixel Art Icons: Use pixelated versions of common icons (fish, arrows, folders) instead of standard Lucide/Heroicons to reinforce the "Digital/Retro" brand.

• "Sticker" Aesthetics: Images or screenshots often have a thick white border/padding inside a black border, making them look like die-cut stickers.

• Cloud Motifs: Fluffy, white, cartoonish clouds (SVG) used as section dividers or background decorations to break the rigid straight lines of the gradient.

• Floating UI Elements: Small "toast" or "chat bubble" elements that float slightly off-axis (rotated 1deg or -1deg) to add dynamism.

Responsive Strategy

• Mobile:

• Cards stack vertically (flex-col).

• Horizontal padding is reduced (px-4).

• Typography scales down, but borders remain 2px.

• Desktop:

• Uses specific md:grid-cols-2 or lg:grid-cols-3.

• Hero image often sits side-by-side with text.

• "Floating" decorative elements are visible (hidden on mobile to save space).

使用Claude Chrome 插件提取落地页信息 image.png 📊 Nano Banana AI 落地页面完整分析

1. 核心品牌信息

产品名称: Nano Banana 2 & Pro AI Editor

核心定位: 基于Google AI模型构建的独立AI图像编辑器

独特卖点:

超越Flux Kontext的AI图像编辑能力

Google的Nano Banana AI模型支持

专为追求自由、创意与个性的创作者设计

2. 页面结构布局 (从上到下)

导航栏部分：

Logo + 品牌名称

功能菜单按钮

试试它（CTA）

灵感页面链接

使用案例 / 比较 / 价格方案 / 评论 / 常见问题

多语言切换（11种语言）

登入按钮

Hero区域：

标题：介绍 Banana Nano独立AI 图像編輯器

副标题：强调Google的Nano Banana Pro模型

描述文案：关键功能概览（文字生成图像、快速推理、高精度视觉编辑）

双CTA按钮：

"试用 Banana Nano"（主要行动按钮）

"将影像转为影片"（辅助行动 + 内链到Mixboard）

三个核心特性标签：一次编辑 | 多图支持 | 自然语言

3. 品牌故事区 - "Banana Nano 宇宙"

品牌理念呈现：

微型创意宇宙概念

从"nano想法"出发

强调创意自由性而非工具严谨性

关键信息：为重视自由、创意与个性的创作者而设

4. 产品功能模块

六大核心功能块（带特性说明）：

先进AI推理 - 理解提示+应用推理生成准确图像

3D物件编辑 - 2D图像中的3D关系理解与精准操作

智能图像生成 - 文字描述生成逼真图像

一致性保护 - 编辑过程中的完美一致性

深度提示理解 - 逻辑推理处理图像生成任务

上下文感知编辑 - 深度学习与推理结合理解创意意图

5. 交互式编辑器演示区

标题: "试用 Nano Banana 2 AI 编辑器"

模型选择: 7个模型选项（带成本说明）

Nano Banana - 50点

Nano Banana 2 - 200点

SeeDream 4.0/4.5

GPT image-1

Flux 2/Kontext

输入控件:

图像上传区（拖拽或点击）

文本提示输入框（带示例文案）

输出区域: 生成结果实时展示

交叉推广: 链接到Mixboard无限画布协作工具

6. 产品对比表

与竞争对手的功能对比（Flux Kontext / Gemini 2.0 Flash）

对比维度：推理能力 / 3D物件操作 / 文本保留 / 空间理解 / 编辑一致性 / 复杂提示理解

包含3组真实效果对比图

例子1: 将水变成粉红色

例子2: 人物替换+风格转换

例子3: 衣服材质编辑

7. 社群灵感展示区

标题: "社群 AI 图像提示词与模板灵感"

展示形式: 网格布局（10个用户作品）

交互: "查看细节"链接 + "查看更多灵感"页面链接

8. 应用场景区

四大实际应用场景：

产品设计与行销 - 精准细节控制的产品视觉

内容创作 - 吸睛缩图、社媒图形、视频素材

数位艺术与插画 - 创意概念具象化

照片修复与增强 - 老旧/损坏照片修复

9. 定价策略模块

三层定价模型 + 月度/年度切换

方案月价年价点数/月关键特性CTA入门$7.49$89.995,000点100张/日, 基础编辑, 720p开始使用专业$16.66$199.9918,000点500张/日, 3D操作, 4K, API完整访问开始使用企业定制定制无限8K, 专属API, 24/7支持联系业务

折扣信息: 50-60%折扣标签（创造紧迫感）

10. 用户推荐区

三个真实用户评论：

AIArtistPro (数位创作者) - 强调角色一致性优于Flux Kontext

ContentCreator (UGC专家) - AI网红创建便利性

PhotoEditor (专业编辑器) - 单次编辑效果卓越

11. 常见问题区 (6个FAQ)

产品定义

免费方案说明

竞品对比

版本升级亮点

使用方式

功能应用范围

与Gemini关系

产品限制

12. 底部转换区

大标题: "准备体验 Nano Banana AI 吗？"

副标题: 加入候补名单优势

双CTA: "立即注册" + "试用 Demo"

13. Footer页脚

Logo + 品牌描述

4个社交媒体链接

版权信息

法律链接：隐私政策 | 服务条款 | 联系支援

关联产品链接（Ghostface AI, Scream AI等）

🎨 视觉设计要素提取

色系与风格：

现代科技感设计

微交互与渐变效果

网格布局系统

品牌色（需根据实际图片确认）

排版层级：

大标题：介绍核心价值

小标题：功能分模块说明

描述文案：3-4行简洁说明

按钮：明确CTA指向

关键数据指标显示：

成本显示（点数系统）

性能对比表格

用户数量/反馈

定价梯度

生成具有设计风格的落地页 打开 Google AI Studio Build（本地 Claude Code 也行），输入我们前面提取的 Prompt：

根据我提供的设计风格和落地页信息，给我生成一个有设计感的落地页

注意：落地页面请完全参考设计风格来生成

You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.

Before proposing or writing any code, first build a clear mental model of the current system:

Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).

Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.

Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.

Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).

Ask the user focused questions to understand the user's goals. Do they want:

a specific component or page redesigned in the new style,

existing components refactored to the new system, or

new pages/features built entirely in the new style?

Once you understand the context and scope, do the following:

Propose a concise implementation plan that follows best practices, prioritizing:

centralizing design tokens,

reusability and composability of components,

minimizing duplication and one-off styles,

long-term maintainability and clear naming.

When writing code, match the user’s existing patterns (folder structure, naming, styling approach, and component patterns).

Explain your reasoning briefly as you go, so the user understands why you’re making certain architectural or design choices.

Always aim to:

Preserve or improve accessibility.

Maintain visual consistency with the provided design system.

Leave the codebase in a cleaner, more coherent state than you found it.

Ensure layouts are responsive and usable across devices.

Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system’s personality instead of producing a generic or boilerplate UI.

Design Philosophy

The "Digital Ocean Pop" style blends the clarity of modern SaaS interfaces with the playful, retro energy of pixel art and neo-brutalism. It creates a friendly, confident environment that feels like a gamified workspace.

Core Principles:

Defined Boundaries: Elements are clearly separated by distinct black borders (border-2). There is no ambiguity where one element ends and another begins.

Hard Shadows (Neo-Brutalism Lite): Shadows are solid, black, and offset. They provide a "stacked" physical feel, like stickers or cards laid on a surface.

Vibrant Optimism: The color palette uses high-energy Lime Green and Lavender against a calming, deep ocean gradient.

Pixel & Vector Hybrid: The interface mixes high-fidelity vector UI (rounded corners, smooth fonts) with low-fidelity pixel art accents (icons, mascots) to create a unique "digital native" aesthetic.

Card-Based Architecture: Content is strictly compartmentalized into white cards with rounded corners, mimicking software windows or dashboard widgets.

Emotional Intent:

Professional but not boring. The style says "We are high-tech (Pixel Art) but we are also fun and accessible (Lime Green & Roundness)." It reduces the cognitive load of complex B2B software by wrapping it in a toy-like, approachable visual language.

Design Token System

Colors (Vibrant SaaS Palette)

Background Gradient: A full-page vertical gradient strategy.

Top: Light Sky Blue/Cyan (#E0F2FE)

Middle: Soft Teal (#99F6E4)

Bottom/Footer: Deep Ocean Blue (#172554)

Surface (Cards): White (#FFFFFF) or very subtle off-white (#F8FAFC).

Primary Accent (Action): Lime Green (#BEF264 or #A3E635) - Used for primary buttons and highlights.

Secondary Accent: Soft Lavender/Pink (#E9D5FF or #F5D0FE) - Used for secondary tags or floating elements.

Text Primary: Deep Navy/Black (#0F172A) - High contrast.

Border: Pure Black (#000000) or Very Dark Navy (#020617).

Typography

Font Family: Plus Jakarta Sans, Outfit, or Inter (Bold weights are crucial).

Headings: Heavy, tight tracking. font-bold or font-extrabold.

Body: Clean, legible, comfortable line-height (leading-relaxed).

Pixel Font (Optional): Used specifically for the brand logo or specific "tech" badges (e.g., 'Press Start 2P').

Radius & Border

Consistent Roundness:

Small Elements (Tags/Buttons): rounded-lg or rounded-xl.

Large Containers (Cards/Sections): rounded-2xl or rounded-3xl.

Border Thickness:

Standard: border-2 border-black (or very dark navy). This is the defining visual trait.

Divider lines: border-b-2.

Style: Always border-solid.

Shadows/Effects

Hard Offset Shadows: Critical for the "Pop" look. No blur.

Small: shadow-[2px_2px_0px_0px_#000]

Medium (Buttons/Cards): shadow-[4px_4px_0px_0px_#000]

Hover: Shadows often move or disappear (translate effect) to simulate pressing.

Component Stylings

Buttons

Primary Call-to-Action:

Background: Lime Green (bg-[#BEF264]).

Border: border-2 border-black.

Text: Bold Black (text-black font-bold).

Radius: rounded-xl or rounded-full.

Shadow: shadow-[4px_4px_0px_0px_#000].

Hover: translate-x-[2px] translate-y-[2px] shadow-[2px_2px_0px_0px_#000] (Button feels physically pressed).

Secondary:

Background: White.

Border: border-2 border-black.

Shadow: shadow-[4px_4px_0px_0px_#000].

Cards & Containers

Base Style: White background, border-2 border-black, rounded-2xl or rounded-3xl.

Header Strips: Some cards have a colored "header" strip (like a browser window or folder tab) at the top, often in Lavender or Pale Blue.

Content Layout: High padding (p-6 or p-8). Clear separation between the header (icon + title) and body text.

Badges / Tags

Appearance: Pill-shaped (rounded-full).

Style: White background with black border, OR pastel background (Lavender/Yellow) with black border.

Typography: Uppercase, small, bold, tracking-wide.

Layout Strategy

Z-Layering: The design relies on "stickers" floating over the gradient background.

Layer 0: The Gradient Background (Sky -> Ocean).

Layer 1: Clouds / Decorative Pixel Art (floating absolutely).

Layer 2: Main Content Cards.

Grid System: Standard 12-column grid, but containers are often centered with max-w-5xl.

Bento Grid: The "How it works" or "Features" sections often use a Bento-box style layout—different sized rectangular cards fitting together.

Non-Genericness (Bold Choices)

Unique Visual Signatures:

Pixel Art Icons: Use pixelated versions of common icons (fish, arrows, folders) instead of standard Lucide/Heroicons to reinforce the "Digital/Retro" brand.

"Sticker" Aesthetics: Images or screenshots often have a thick white border/padding inside a black border, making them look like die-cut stickers.

Cloud Motifs: Fluffy, white, cartoonish clouds (SVG) used as section dividers or background decorations to break the rigid straight lines of the gradient.

Floating UI Elements: Small "toast" or "chat bubble" elements that float slightly off-axis (rotated 1deg or -1deg) to add dynamism.

Responsive Strategy

Mobile:

Cards stack vertically (flex-col).

Horizontal padding is reduced (px-4).

Typography scales down, but borders remain 2px.

Desktop:

Uses specific md:grid-cols-2 or lg:grid-cols-3.

Hero image often sits side-by-side with text.

"Floating" decorative elements are visible (hidden on mobile to save space).

落地页信息：

nanobanana网站的信息如下：

📊 Nano Banana AI 落地页面完整分析

核心品牌信息

产品名称: Nano Banana 2 & Pro AI Editor

核心定位: 基于Google AI模型构建的独立AI图像编辑器

独特卖点:

超越Flux Kontext的AI图像编辑能力

Google的Nano Banana AI模型支持

专为追求自由、创意与个性的创作者设计

页面结构布局 (从上到下)

导航栏部分：

Logo + 品牌名称

功能菜单按钮

试试它（CTA）

灵感页面链接

使用案例 / 比较 / 价格方案 / 评论 / 常见问题

多语言切换（11种语言）

登入按钮

Hero区域：

标题：介绍 Banana Nano独立AI 图像編輯器

副标题：强调Google的Nano Banana Pro模型

描述文案：关键功能概览（文字生成图像、快速推理、高精度视觉编辑）

双CTA按钮：

"试用 Banana Nano"（主要行动按钮）

"将影像转为影片"（辅助行动 + 内链到Mixboard）

三个核心特性标签：一次编辑 | 多图支持 | 自然语言

品牌故事区 - "Banana Nano 宇宙"

品牌理念呈现：

微型创意宇宙概念

从"nano想法"出发

强调创意自由性而非工具严谨性

关键信息：为重视自由、创意与个性的创作者而设

产品功能模块

六大核心功能块（带特性说明）：

先进AI推理 - 理解提示+应用推理生成准确图像

3D物件编辑 - 2D图像中的3D关系理解与精准操作

智能图像生成 - 文字描述生成逼真图像

一致性保护 - 编辑过程中的完美一致性

深度提示理解 - 逻辑推理处理图像生成任务

上下文感知编辑 - 深度学习与推理结合理解创意意图

交互式编辑器演示区

标题: "试用 Nano Banana 2 AI 编辑器"

模型选择: 7个模型选项（带成本说明）

Nano Banana - 50点

Nano Banana 2 - 200点

SeeDream 4.0/4.5

GPT image-1

Flux 2/Kontext

输入控件:

图像上传区（拖拽或点击）

文本提示输入框（带示例文案）

输出区域: 生成结果实时展示

交叉推广: 链接到Mixboard无限画布协作工具

产品对比表

与竞争对手的功能对比（Flux Kontext / Gemini 2.0 Flash）

对比维度：推理能力 / 3D物件操作 / 文本保留 / 空间理解 / 编辑一致性 / 复杂提示理解

包含3组真实效果对比图

例子1: 将水变成粉红色

例子2: 人物替换+风格转换

例子3: 衣服材质编辑

社群灵感展示区

标题: "社群 AI 图像提示词与模板灵感"

展示形式: 网格布局（10个用户作品）

交互: "查看细节"链接 + "查看更多灵感"页面链接

应用场景区

四大实际应用场景：

产品设计与行销 - 精准细节控制的产品视觉

内容创作 - 吸睛缩图、社媒图形、视频素材

数位艺术与插画 - 创意概念具象化

照片修复与增强 - 老旧/损坏照片修复

定价策略模块

三层定价模型 + 月度/年度切换

方案月价年价点数/月关键特性CTA入门

89.995,000点100张/日, 基础编辑, 720p开始使用专业

199.9918,000点500张/日, 3D操作, 4K, API完整访问开始使用企业定制定制无限8K, 专属API, 24/7支持联系业务

折扣信息: 50-60%折扣标签（创造紧迫感）

用户推荐区

三个真实用户评论：

AIArtistPro (数位创作者) - 强调角色一致性优于Flux Kontext

ContentCreator (UGC专家) - AI网红创建便利性

PhotoEditor (专业编辑器) - 单次编辑效果卓越

常见问题区 (6个FAQ)

产品定义

免费方案说明

竞品对比

版本升级亮点

使用方式

功能应用范围

与Gemini关系

产品限制

底部转换区

大标题: "准备体验 Nano Banana AI 吗？"

副标题: 加入候补名单优势

双CTA: "立即注册" + "试用 Demo"

Footer页脚

Logo + 品牌描述

4个社交媒体链接

版权信息

法律链接：隐私政策 | 服务条款 | 联系支援

关联产品链接（Ghostface AI, Scream AI等）

🎨 视觉设计要素提取

色系与风格：

现代科技感设计

微交互与渐变效果

网格布局系统

品牌色（需根据实际图片确认）

排版层级：

大标题：介绍核心价值

小标题：功能分模块说明

描述文案：3-4行简洁说明

按钮：明确CTA指向

关键数据指标显示：

成本显示（点数系统）

性能对比表格

用户数量/反馈

定价梯度

最终产物：

image.png image.png 虽说不是100%还原，但是效果已经很好了。有兴趣的同学可以自行访问一下 Demo链接

结语 这套工作流证明了一个核心观点：你不需要成为设计师，只需要成为一个会"借力"的工程师。从找参考到提取设计基因，再到让 AI 在约束下编码——我们将第一篇的理论完整落地了。

方法论的价值在于可复制性：无论做什么类型的网站，流程都是一样的。而随着项目推进，你会逐渐沉淀出自己的组件库和视觉语言，AI 也会从生成"通用模板"的工具，变成你设计思想的高效执行者。

现在就动手实践吧（我只用了5分钟就搞定了）：选一个你喜欢的网站，用今天学到的方法提取其设计基因，然后尝试用 AI 重现它。

本文档为站内渲染。原始文件本地路径：saas/source/seo/SEO-seoCheatSheet-Design-88469d.md（仅本地保留，不入库不部署）