Back to Details

ux-ui-premium-direction-style-selector

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Style Selector

样式选择器

Generate 8 self-contained visual direction demo pages for comparison, then apply the chosen direction to the project.
生成8个独立的视觉方向演示页面用于对比，随后将选中的方向应用到项目中。

Workflow

工作流

1. Gather project context

1. 收集项目上下文

Before generating demos, collect:
  • Project type (landing page, web app, SaaS, dashboard, e-commerce, portfolio)
  • Business type (consulting, SaaS, agency, e-commerce, portfolio, etc.)
  • Business name and tagline
  • Key stats (numbers to display -- users, clients, years, etc.)
  • Services/products (3-4 items with short descriptions)
  • CTA (primary call to action -- book a call, sign up, buy, etc.)
  • Language (Spanish, English, etc.)
  • Tone (corporate, friendly, luxury, technical, rebellious, playful, etc.)
If the project already has content (existing pages, spec docs, CLAUDE.md), extract this context automatically without asking.
生成演示页之前，先收集以下信息：
  • 项目类型（落地页、Web应用、SaaS、仪表盘、电商、作品集）
  • 业务类型（咨询、SaaS、代理商、电商、作品集等）
  • 业务名称和宣传语
  • 核心数据（需要展示的数字——用户量、客户数、运营年限等）
  • 服务/产品（3-4项带简短描述的内容）
  • CTA（核心行动号召——预约通话、注册、购买等）
  • 语言（西班牙语、英语等）
  • 风格调性（商务、友好、奢华、技术感、反叛、活泼等）
如果项目已有内容（现有页面、需求文档、CLAUDE.md），无需询问自动提取相关上下文。

2. Verify project setup

2. 验证项目配置

Confirm the project uses Next.js App Router + Tailwind CSS. Check:
  • src/app/
    or 
    app/
    directory exists
  • tailwind.config.ts
    or 
    tailwind.config.js
    exists
  • globals.css
    has 
    @tailwind base/components/utilities
    or 
    @import "tailwindcss"
    directives
Critical: Ensure globals.css custom styles are wrapped in 
@layer base { }
. Unlayered CSS overrides Tailwind utility classes due to CSS cascade layers. If 
* { margin: 0; padding: 0; }
or 
body { ... }
exist outside a 
@layer
, wrap them in 
@layer base { }
.
确认项目使用Next.js App Router + Tailwind CSS。检查以下内容：
  • 存在
    src/app/
    或
    app/
    目录
  • 存在
    tailwind.config.ts
    或
    tailwind.config.js
    文件
  • globals.css
    中包含
    @tailwind base/components/utilities
    或
    @import "tailwindcss"
    指令
重要提示：确保globals.css中的自定义样式都包裹在
@layer base { }
中。未分层的CSS会由于CSS级联层的优先级覆盖Tailwind工具类。如果
* { margin: 0; padding: 0; }
或
body { ... }
代码存在于
@layer
之外，请将它们移入
@layer base { }
中。

3. Create demo infrastructure

3. 创建演示基础结构

Create these files:
Demo layout (
src/app/demo/layout.tsx
):
tsx
'use client'
export default function DemoLayout({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 99999, overflow: 'auto', background: '#ffffff', fontFamily: 'system-ui, sans-serif', color: '#000' }}>
      <style>{\`body { overflow: hidden !important; }\`}</style>
      {children}
    </div>
  )
}
Demo index page (
src/app/demo/page.tsx
): A 'use client' page listing all 8 directions as clickable cards. Each card shows: direction name, subtitle/reference, description, and 4 color swatches. Dark background (#0a0a0a) for the index page.
创建以下文件：
演示布局 (
src/app/demo/layout.tsx
):
tsx
'use client'
export default function DemoLayout({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 99999, overflow: 'auto', background: '#ffffff', fontFamily: 'system-ui, sans-serif', color: '#000' }}>
      <style>{\`body { overflow: hidden !important; }\`}</style>
      {children}
    </div>
  )
}
演示索引页 (
src/app/demo/page.tsx
): 一个
'use client'
页面，将8个视觉方向以可点击卡片的形式列出。每张卡片包含：方向名称、副标题/参考、描述和4个色板。索引页使用深色背景（#0a0a0a）。

4. Select directions based on project type

4. 根据项目类型选择演示方向

Not all 8 directions suit every project type. Pre-select 5 that best match:
Project TypeRecommended 5Skip
Landing page (general)Editorial, Minimal, Luxury, Corporate, Kinfolk—
SaaS / Web appMinimal, Corporate, Playful, Brutalist, RetroLuxury, Kinfolk, Editorial
E-commerceMinimal, Luxury, Corporate, Playful, KinfolkBrutalist, Retro, Editorial
DashboardMinimal, Corporate, Playful, Retro, BrutalistLuxury, Kinfolk, Editorial
Portfolio / CreativeEditorial, Luxury, Kinfolk, Brutalist, PlayfulMinimal, Corporate, Retro
Developer toolsMinimal, Brutalist, Retro, Playful, CorporateLuxury, Kinfolk, Editorial
If the user says "show all 8", generate all 8 regardless. Otherwise use the recommended 5 for their project type. Always ask if they want to see all 8 after showing the 5.
并非所有8个方向都适配所有项目类型，优先选择最匹配的5个：
项目类型推荐的5个方向跳过的方向
通用落地页Editorial, Minimal, Luxury, Corporate, Kinfolk—
SaaS / Web应用Minimal, Corporate, Playful, Brutalist, RetroLuxury, Kinfolk, Editorial
电商Minimal, Luxury, Corporate, Playful, KinfolkBrutalist, Retro, Editorial
仪表盘Minimal, Corporate, Playful, Retro, BrutalistLuxury, Kinfolk, Editorial
作品集/创意项目Editorial, Luxury, Kinfolk, Brutalist, PlayfulMinimal, Corporate, Retro
开发者工具Minimal, Brutalist, Retro, Playful, CorporateLuxury, Kinfolk, Editorial
如果用户要求“展示全部8个”，则不管项目类型生成全部8个方向。否则使用对应项目类型的推荐5个方向。展示完5个方向后始终询问用户是否需要查看全部8个。

5. Generate demo pages

5. 生成演示页面

See 
references/directions.md
for the complete spec of each visual direction, including palette, typography, layout, animation, accessibility, and mobile specs.
Each demo page must be:
  • Self-contained (no shared component imports -- only 
    next/link
    and 
    next/font/google
    )
  • Mobile-first responsive (design for 375px first, enhance with Tailwind breakpoints)
  • Complete (skip-link + nav + hero + storytelling + stats + services + CTA + footer)
  • Unique fonts via 
    next/font/google
    with CSS variables
  • Custom colors via inline 
    style
    attributes (not relying on project's Tailwind theme)
  • Animated per direction specs (scroll reveal, hover effects, micro-interactions)
  • Accessible (WCAG AA contrast, focus-visible outlines, 44px+ touch targets, skip link)
  • Motion-safe (respect 
    prefers-reduced-motion
    -- disable all animations/transitions)
  • Back link to 
    /demo
    in the footer
Pages that use event handlers (onMouseEnter, useState, useEffect) MUST have 
'use client'
at the top. Pages with 
'use client'
MUST NOT export 
metadata
.
Generate all pages in parallel using Agent tool for speed.
查看
references/directions.md
获取每个视觉方向的完整规范，包括调色板、排版、布局、动画、可访问性和移动端规范。
每个演示页面必须满足：
  • 完全独立（无共享组件导入——仅允许导入
    next/link
    和
    next/font/google
    ）
  • 移动端优先的响应式设计（先为375px宽度设计，再通过Tailwind断点增强大屏效果）
  • 内容完整（跳转链接 + 导航 + 首屏 + 叙事模块 + 数据 + 服务 + CTA + 页脚）
  • 通过
    next/font/google
    引入独特字体并配置CSS变量
  • 通过内联
    style
    属性使用自定义颜色    （不依赖项目本身的Tailwind主题）
  • 符合方向规范的动画效果（滚动展示、悬停效果、微交互）
  • 可访问性达标（WCAG AA对比度、focus-visible轮廓、44px以上可点击区域、跳转链接）
  • 动效兼容（遵守
    prefers-reduced-motion
    设置——禁用所有动画/过渡效果）
  • 页脚包含返回
    /demo
    的链接
使用事件处理函数（onMouseEnter、useState、useEffect）的页面顶部必须添加
'use client'
。带
'use client'
的页面不能导出
metadata
。
使用Agent工具并行生成所有页面以提升速度。

6. Adapt copy to project

6. 适配项目文案

For each direction, rewrite copy to match the project's context:
  • Headline adapted to the business and tone direction
  • Storytelling adapted to the founder/company narrative
  • Stats using real project numbers
  • Services listing real offerings
  • CTA pointing to real contact mechanism
Copy quality rules (avoid AI-sounding text):
  • Use imperfect, conversational sentences
  • Include specific details, not generic buzzwords
  • Short paragraphs, varied rhythm
  • Opinions and personality over corporate speak
  • Questions to the reader
  • First person where appropriate
Copy tone per direction (see 
references/directions.md
for full table):
  • Editorial: authoritative, measured
  • Minimal: direct, stripped
  • Luxury: intimate, refined
  • Corporate: confident, structured
  • Kinfolk: thoughtful, quiet
  • Brutalist: blunt, irreverent
  • Playful: energetic, modern
  • Retro: dry, technical, developer humor
针对每个方向，重写文案以匹配项目上下文：
  • 适配业务和风格调性的标题
  • 适配创始人/公司叙事的文案内容
  • 使用项目真实数据的统计模块
  • 展示真实服务/产品的列表
  • 指向真实联系渠道的CTA
文案质量规则（避免AI生成感的文本）：
  • 使用不完美的口语化句子
  • 包含具体细节，不要通用流行词
  • 短段落，节奏多变
  • 表达观点和个性，避免商务套话
  • 适当向读者提问
  • 合适的场景使用第一人称
各方向的文案调性（完整表格见
references/directions.md
）：
  • Editorial：权威、严谨
  • Minimal：直接、简约
  • Luxury：亲切、精致
  • Corporate：自信、结构化
  • Kinfolk：细腻、沉静
  • Brutalist：直白、不羁
  • Playful：活力、现代
  • Retro：冷静、技术感、开发者幽默

7. Build and verify

7. 构建并验证

Run 
npx next build
to confirm all demo routes compile. Fix any errors:
  • Missing 
    'use client'
    for pages with event handlers
  • metadata
    export in client components (remove it)
  • Unused variables (remove them)
Start dev server and verify:
  1. Take screenshots of each demo at desktop (1280px)
  2. Take screenshots at mobile (375px) — resize viewport
  3. Check that:
    • No horizontal overflow on mobile
    • All text readable (16px+ body on mobile)
    • All buttons tappable (44px+ height)
    • Nav is functional on both sizes
    • Animations play (and stop with reduced-motion)
    • Focus outlines visible when tabbing
    • Skip link works
运行
npx next build
确认所有演示路由可正常编译。修复所有错误：
  • 带事件处理函数的页面缺少
    'use client'
  • 客户端组件中导出了
    metadata
    （直接移除）
  • 未使用的变量（直接移除）
启动开发服务器并验证：
  1. 截取每个演示页桌面端（1280px）的截图
  2. 截取移动端（375px）的截图——调整视口大小
  3. 检查以下内容：
    • 移动端无横向溢出
    • 所有文本可读（移动端正文最小16px）
    • 所有按钮可点击（最小高度44px）
    • 导航在两种尺寸下都可正常使用
    • 动画正常播放（开启减动效设置时停止）
    • Tab切换时焦点轮廓可见
    • 跳转链接功能正常

8. Present to user

8. 展示给用户

Show the user the demo index URL (
/demo
) and a summary table of all directions with their visual identity. Include:
DirectionMoodKey FeatureBest For
EditorialIntellectual authoritySerif typography, gold accentsConsulting, media, thought leadership
MinimalFunctional clarityMaximum restraint, red CTAs onlySaaS, tools, developer products
LuxuryWarm intimacyDark bg, copper accents, slow motionPremium services, hospitality, beauty
CorporateConfident authorityNavy/white rhythm, purple accentsEnterprise, B2B, consulting
KinfolkQuiet sophisticationNarrow columns, olive accents, stillnessCreative, wellness, editorial
BrutalistRaw irreverenceHard shadows, mono uppercase, thick bordersStartups, developer tools, creative agencies
PlayfulModern energyGradient text, glass cards, living gradientsSaaS, modern startups, tech
RetroHacker credibilityTerminal aesthetic, typewriter, green-on-blackDeveloper tools, CLI products, tech
Ask which direction they prefer or if they want to mix elements from multiple directions.
向用户展示演示索引地址（
/demo
）以及所有方向的视觉特征汇总表，包含：
方向氛围核心特征适用场景
Editorial专业权威衬线字体、金色点缀咨询、媒体、思想领导力相关项目
Minimal功能清晰极致克制、仅红色CTASaaS、工具、开发者产品
Luxury温暖高级深色背景、铜色点缀、慢动画高端服务、酒店、美妆
Corporate自信权威海军蓝/白色节奏、紫色点缀企业服务、B2B、咨询
Kinfolk沉静雅致窄栏、橄榄色点缀、静态感创意、健康、内容类项目
Brutalist原生不羁硬阴影、大写等宽字体、粗边框创业公司、开发者工具、创意代理
Playful现代活力渐变文字、玻璃卡片、动态渐变SaaS、现代创业公司、科技项目
Retro技术可信度终端风格、打字机效果、黑底绿字开发者工具、CLI产品、科技项目
询问用户偏好的方向，或是是否想要混合多个方向的元素。

9. Apply direction (post-selection)

9. 应用选中的方向（用户选定后）

Once the user chooses a direction, apply it to the project:
用户选定方向后，将其应用到项目中：

9a. Generate Tailwind theme tokens

9a. 生成Tailwind主题token

Create/update 
tailwind.config.ts
with the chosen direction's design tokens:
typescript
// Example for "Luxury Dark Warm" direction
const config = {
  theme: {
    extend: {
      colors: {
        background: '#171614',
        foreground: '#F0EBE1',
        accent: '#C4956A',
        muted: '#8A8174',
        card: '#1E1D1A',
        border: 'rgba(196,149,106,0.3)',
      },
      fontFamily: {
        display: ['var(--font-cormorant)', 'serif'],
        body: ['var(--font-outfit)', 'sans-serif'],
      },
      animation: {
        'fade-in': 'fadeIn 800ms ease-out',
        'slide-up': 'slideUp 800ms ease-out',
      },
      keyframes: {
        fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
        slideUp: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } },
      },
    },
  },
}
使用选中方向的设计token创建/更新
tailwind.config.ts
：
typescript
// 「Luxury Dark Warm」方向示例
const config = {
  theme: {
    extend: {
      colors: {
        background: '#171614',
        foreground: '#F0EBE1',
        accent: '#C4956A',
        muted: '#8A8174',
        card: '#1E1D1A',
        border: 'rgba(196,149,106,0.3)',
      },
      fontFamily: {
        display: ['var(--font-cormorant)', 'serif'],
        body: ['var(--font-outfit)', 'sans-serif'],
      },
      animation: {
        'fade-in': 'fadeIn 800ms ease-out',
        'slide-up': 'slideUp 800ms ease-out',
      },
      keyframes: {
        fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
        slideUp: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } },
      },
    },
  },
}

9b. Generate CSS variables

9b. 生成CSS变量

Add to 
globals.css
:
css
@layer base {
  :root {
    --background: <bg-color>;
    --foreground: <text-color>;
    --accent: <accent-color>;
    --muted: <secondary-color>;
    --card: <card-bg>;
    --border: <border-color>;
    --focus-ring: <focus-color>;

    /* Animation tokens */
    --reveal-y: <direction-value>;
    --reveal-duration: <direction-value>;
    --reveal-stagger: <direction-value>;
    --reveal-easing: <direction-value>;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}
添加到
globals.css
：
css
@layer base {
  :root {
    --background: <bg-color>;
    --foreground: <text-color>;
    --accent: <accent-color>;
    --muted: <secondary-color>;
    --card: <card-bg>;
    --border: <border-color>;
    --focus-ring: <focus-color>;

    /* 动画token */
    --reveal-y: <direction-value>;
    --reveal-duration: <direction-value>;
    --reveal-stagger: <direction-value>;
    --reveal-easing: <direction-value>;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

9c. Generate base components

9c. 生成基础组件

Create reusable components that encode the chosen direction's patterns:
src/components/ui/Button.tsx
 — Primary and secondary variants matching direction style:
  • Editorial: gold-bordered, serif text
  • Minimal: red bg (primary), text link with arrow (secondary)
  • Luxury: copper bg, light weight text
  • Corporate: purple filled + outline variants
  • Kinfolk: olive outline, minimal
  • Brutalist: black border + hard shadow, uppercase mono
  • Playful: gradient border, glass effect
  • Retro: terminal command style, mono text
src/components/ui/Card.tsx
 — Card component matching direction:
  • Editorial: no card, just gold left border
  • Minimal: border-b divider, no card bg
  • Luxury: dark raised bg, copper top border
  • Corporate: light gray bg, slate border
  • Kinfolk: no card, just text
  • Brutalist: 3px black border, hard shadow
  • Playful: glass morphism (white 5%, backdrop-blur)
  • Retro: green/30% border, terminal bg
src/components/ui/Section.tsx
 — Section wrapper with direction-appropriate spacing, dividers, and scroll-reveal animation.
src/components/ui/Container.tsx
 — Max-width container matching direction's content width.
src/components/ui/Nav.tsx
 — Navigation with direction-appropriate mobile pattern.
src/components/ScrollReveal.tsx
 — Reusable scroll reveal hook/component using IntersectionObserver.
创建可复用组件，内置所选方向的设计规范：
src/components/ui/Button.tsx
 — 匹配方向风格的主、次按钮变体：
  • Editorial：金色边框、衬线字体
  • Minimal：红色背景（主按钮）、带箭头的文字链接（次按钮）
  • Luxury：铜色背景、轻量级字体
  • Corporate：紫色填充+描边变体
  • Kinfolk：橄榄色描边、极简风格
  • Brutalist：黑色边框+硬阴影、大写等宽字体
  • Playful：渐变边框、玻璃效果
  • Retro：终端命令风格、等宽字体
src/components/ui/Card.tsx
 — 匹配方向的卡片组件：
  • Editorial：无卡片样式，仅左侧金色边框
  • Minimal：下边框分隔、无卡片背景
  • Luxury：深色凸起背景、顶部铜色边框
  • Corporate：浅灰色背景、 slate 色边框
  • Kinfolk：无卡片样式，仅文本
  • Brutalist：3px黑色边框、硬阴影
  • Playful：玻璃态效果（5%白色透明度、背景模糊）
  • Retro：30%透明度绿色边框、终端背景
src/components/ui/Section.tsx
 — 适配方向的间距、分割线和滚动展示动画的区块包裹器。
src/components/ui/Container.tsx
 — 匹配方向内容宽度的最大宽度容器。
src/components/ui/Nav.tsx
 — 适配方向的移动端导航模式。
src/components/ScrollReveal.tsx
 — 基于IntersectionObserver的可复用滚动展示钩子/组件。

9d. Generate font setup

9d. 生成字体配置

Add to root layout (
src/app/layout.tsx
or 
src/app/demo/layout.tsx
):
tsx
import { FontDisplay, FontBody } from 'next/font/google'

const fontDisplay = FontDisplay({
  subsets: ['latin'],
  variable: '--font-display',
  display: 'swap',
})

const fontBody = FontBody({
  subsets: ['latin'],
  variable: '--font-body',
  display: 'swap',
})

// Add to <html> or <body> className:
// `${fontDisplay.variable} ${fontBody.variable}`
添加到根布局（
src/app/layout.tsx
或
src/app/demo/layout.tsx
）：
tsx
import { FontDisplay, FontBody } from 'next/font/google'

const fontDisplay = FontDisplay({
  subsets: ['latin'],
  variable: '--font-display',
  display: 'swap',
})

const fontBody = FontBody({
  subsets: ['latin'],
  variable: '--font-body',
  display: 'swap',
})

// 添加到<html>或<body>的className中：
// `${fontDisplay.variable} ${fontBody.variable}`

9e. Clean up

9e. 清理文件

  • Remove 
    /demo/
    directory and all demo pages
  • Remove demo layout
  • Confirm 
    npx next build
    passes after applying theme
  • 删除
    /demo/
    目录和所有演示页面
  • 删除演示布局
  • 应用主题后确认
    npx next build
    可正常通过

10. Verify applied direction

10. 验证已应用的方向

After applying the chosen direction:
  1. Start dev server
  2. Navigate to the main page
  3. Take screenshot at desktop and mobile
  4. Verify:
    • Colors match chosen direction
    • Fonts load correctly
    • Animations work (and respect reduced-motion)
    • Mobile layout is correct
    • All components render properly
  5. Share screenshots with user for final approval
应用选中的方向后：
  1. 启动开发服务器
  2. 访问首页
  3. 截取桌面端和移动端截图
  4. 验证：
    • 颜色匹配所选方向
    • 字体加载正常
    • 动画正常运行（且遵守减动效设置）
    • 移动端布局正确
    • 所有组件渲染正常
  5. 将截图分享给用户确认最终效果

The 8 Directions

8个视觉方向

IDNameReferenceBgAccentFonts
editorialEditorial SerifThe EconomistCream #FAFAF5Gold #B8860BPlayfair Display + Source Serif 4
minimalSwiss MinimalDieter RamsWhite #FFFFFFRed #D42B2BSpace Grotesk + Inter
luxuryLuxury Dark WarmAesopCharcoal #171614Copper #C4956ACormorant Garamond + Outfit
corporateCorporate BoldAccentureWhite/Navy #0F1923Purple #5B21B6Plus Jakarta Sans
kinfolkUnderstated EleganceKinfolkBone #F5F2EDOlive #6B705CLibre Baskerville + Karla
brutalistNeo-BrutalistGumroadOff-white #FFFDF7Yellow #FFE600 + Pink #FF3366Space Mono + DM Sans
playfulPlayful GradientLinear/StripeNear-black #0C0C0CBlue→Violet→Pink gradientSatoshi/Inter
retroRetro TerminalStripe CLITerminal black #0D1117Green #00FF41 + Amber #FFB000JetBrains Mono
For detailed specs (full palette, layout, animation, accessibility, mobile), read 
references/directions.md
.
ID名称参考背景色强调色字体
editorial衬线编辑风经济学人奶油色 #FAFAF5金色 #B8860BPlayfair Display + Source Serif 4
minimal瑞士极简风Dieter Rams白色 #FFFFFF红色 #D42B2BSpace Grotesk + Inter
luxury深色奢华风Aesop炭黑色 #171614铜色 #C4956ACormorant Garamond + Outfit
corporate商务风埃森哲白色/海军蓝 #0F1923紫色 #5B21B6Plus Jakarta Sans
kinfolk雅致风Kinfolk米白色 #F5F2ED橄榄色 #6B705CLibre Baskerville + Karla
brutalist新野兽派Gumroad米白色 #FFFDF7黄色 #FFE600 + 粉色 #FF3366Space Mono + DM Sans
playful活泼渐变风Linear/Stripe近黑色 #0C0C0C蓝→紫→粉渐变Satoshi/Inter
retro复古终端风Stripe CLI终端黑 #0D1117绿色 #00FF41 + 琥珀色 #FFB000JetBrains Mono
如需完整规范（全调色板、布局、动画、可访问性、移动端），请查看
references/directions.md
。

Direction Selection Guide

方向选择指南

If the user wants...Recommend
"Professional but not boring"Editorial or Corporate
"Clean and modern"Minimal or Playful
"Premium / high-end"Luxury or Kinfolk
"Fun / startup vibe"Brutalist or Playful
"Developer audience"Retro or Minimal
"Something different / bold"Brutalist or Retro
"Warm and personal"Luxury or Kinfolk
"Data-driven / enterprise"Corporate or Minimal
"Creative / artistic"Kinfolk or Brutalist
"Tech / SaaS"Playful or Retro
如果用户想要...推荐方向
「专业但不无聊」Editorial 或 Corporate
「干净现代」Minimal 或 Playful
「高端/高级感」Luxury 或 Kinfolk
「有趣/创业氛围」Brutalist 或 Playful
「面向开发者用户」Retro 或 Minimal
「与众不同/大胆」Brutalist 或 Retro
「温暖有个性」Luxury 或 Kinfolk
「数据驱动/企业级」Corporate 或 Minimal
「创意/艺术感」Kinfolk 或 Brutalist
「科技/SaaS」Playful 或 Retro

Project Type Adaptations

项目类型适配

The common section structure (nav, hero, storytelling, stats, services, CTA, footer) works for landing pages. For other project types, adapt the demo structure:
通用的区块结构（导航、首屏、叙事、数据、服务、CTA、页脚）适用于落地页。针对其他项目类型，适配演示结构：

Web App / SaaS

Web应用 / SaaS

Replace storytelling + stats with:
  • Feature showcase — 3 key features with mock UI screenshots or illustrations
  • How it works — 3-step flow (Sign up → Configure → Launch)
  • Pricing — 3 tiers (Free, Pro, Enterprise) or simple pricing card Keep: Nav, Hero, Services/Features, CTA, Footer
将叙事+数据模块替换为：
  • 功能展示 — 3个核心功能搭配Mock UI截图或插画
  • 使用流程 — 3步流程（注册 → 配置 → 上线）
  • 定价 — 3个档位（免费、专业、企业）或简单定价卡片 保留：导航、首屏、服务/功能、CTA、页脚

Dashboard

仪表盘

Replace hero + storytelling with:
  • Dashboard preview — Mock data visualization (charts placeholder, KPI cards)
  • Sidebar — Navigation pattern preview
  • Data table — Sample table with direction's styling Keep: Nav (sidebar variant), Feature cards, CTA, Footer
将首屏+叙事模块替换为：
  • 仪表盘预览 — Mock数据可视化（图表占位符、KPI卡片）
  • 侧边栏 — 导航模式预览
  • 数据表格 — 匹配方向样式的示例表格 保留：导航（侧边栏变体）、功能卡片、CTA、页脚

E-commerce

电商

Replace storytelling with:
  • Product grid — 4-6 product cards with image placeholders, price, CTA
  • Categories — Category navigation
  • Trust signals — Reviews, shipping info, guarantees Keep: Nav (with cart icon), Hero (product-focused), CTA, Footer
将叙事模块替换为：
  • 商品网格 — 4-6个商品卡片，包含图片占位符、价格、CTA
  • 分类导航 — 类目导航
  • 信任标识 — 评价、配送信息、保障承诺 保留：导航（带购物车图标）、首屏（商品导向）、CTA、页脚

Portfolio

作品集

Replace services with:
  • Project grid — 4-6 project cards with image, title, category
  • About section — Bio with photo placeholder
  • Testimonials — 2-3 client quotes Keep: Nav, Hero (name-focused), Storytelling, CTA (hire me), Footer
将服务模块替换为：
  • 项目网格 — 4-6个项目卡片，包含图片、标题、分类
  • 关于模块 — 个人简介加头像占位符
  • ** testimonials ** — 2-3个客户评价 保留：导航、首屏（姓名导向）、叙事、CTA（雇佣我）、页脚