ux-ui-premium-direction-style-selector

样式选择器

生成 8 个独立的视觉方向演示页面供比较，然后将选定的方向应用到项目中。

工作流

1. 收集项目背景

生成演示页面前，收集以下信息：

• 项目类型（落地页、Web 应用、SaaS、仪表板、电商、作品集）
• 业务类型（咨询、SaaS、代理机构、电商、作品集等）
• 业务名称和标语
• 关键数据（要展示的数字——用户数、客户数、年数等）
• 服务/产品（3-4 项，每项附简短说明）
• CTA（主要行动号召——预约通话、注册、购买等）
• 语言（西班牙语、英语等）
• 语气（企业风、友好、奢华、技术风、叛逆、活泼等）

如果项目已有内容（现有页面、规范文档、CLAUDE.md），请自动提取这些信息，无需询问。

2. 验证项目配置

确认项目使用 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. 创建演示基础设施

创建以下文件：

演示布局（src/app/demo/layout.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. 根据项目类型选择方向

并非所有 8 个方向都适合每种项目类型。预先选出最匹配的 5 个：

项目类型	推荐的 5 个方向	跳过
落地页（通用）	Editorial、Minimal、Luxury、Corporate、Kinfolk	—
SaaS / Web 应用	Minimal、Corporate、Playful、Brutalist、Retro	Luxury、Kinfolk、Editorial
电商	Minimal、Luxury、Corporate、Playful、Kinfolk	Brutalist、Retro、Editorial
仪表板	Minimal、Corporate、Playful、Retro、Brutalist	Luxury、Kinfolk、Editorial
作品集 / 创意	Editorial、Luxury、Kinfolk、Brutalist、Playful	Minimal、Corporate、Retro
开发者工具	Minimal、Brutalist、Retro、Playful、Corporate	Luxury、Kinfolk、Editorial

如果用户说“展示全部 8 个”，则无论项目类型如何，都生成全部 8 个。否则，使用适合其项目类型的推荐方向。展示 5 个方向后，务必询问用户是否想查看全部 8 个。

5. 生成演示页面

每种视觉方向的完整规范（包括配色、字体、布局、动画、无障碍和移动端规范），请参阅 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. 根据项目调整文案

针对每种风格方向，重写文案，使其符合项目背景：

• 调整标题，使其契合业务和风格方向
• 调整故事叙述，使其契合创始人／公司的叙事
• 使用项目真实数据作为统计数字
• 列出实际提供的服务
• CTA 指向真实的联系方式

文案质量规则（避免写出听起来像 AI 的内容）：

• 使用不那么完美、自然口语化的句子
• 加入具体细节，不要使用泛泛的流行词
• 段落简短，节奏有变化
• 展现观点和个性，不要使用企业套话
• 向读者提问
• 适当使用第一人称

各风格方向的文案语气（完整表格请参见 references/directions.md）：

• Editorial：权威、沉稳
• Minimal：直接、精简
• Luxury：亲切、雅致
• Corporate：自信、有条理
• Kinfolk：深思、静谧
• Brutalist：直白、不拘一格
• Playful：活力十足、现代
• Retro：冷面、技术感、开发者幽默

7. 构建并验证

运行 npx next build，确认所有演示路由均能成功编译。修复所有错误：

• 有事件处理器的页面缺少 'use client'
• 客户端组件中导出了 metadata（删除该导出）
• 未使用的变量（删除）

启动开发服务器并验证：

1. 在桌面端（1280px）为每个演示页面截图
2. 在移动端（375px）截图——调整视口大小
3. 检查以下内容：
   • 移动端没有水平溢出
   • 所有文本均清晰可读（移动端正文不小于 16px）
   • 所有按钮均可轻松点击（高度不小于 44px）
   • 导航在两种尺寸下都能正常使用
   • 动画正常播放（并能在减少动态效果时停止）
   • 使用 Tab 键切换时焦点轮廓清晰可见
   • 跳过链接有效

8. 向用户展示

向用户展示演示索引 URL（/demo），并提供包含各风格方向及其视觉特征的摘要表格。包括：

方向	氛围	主要特征	最适合
Editorial	知性权威	衬线字体、金色点缀	咨询、媒体、思想领导力
Minimal	功能清晰	极致克制，仅 CTA 使用红色	SaaS、工具、开发者产品
Luxury	温暖亲切	深色背景、铜色点缀、缓慢动效	高端服务、酒店、 美妆
Corporate	自信权威	海军蓝／白色交替、紫色点缀	企业、B2B、咨询
Kinfolk	静谧雅致	窄栏、橄榄绿点缀、静谧感	创意、健康、编辑出版
Brutalist	粗粝不羁	硬阴影、等宽大写字体、粗边框	初创公司、开发者工具、创意机构
Playful	现代活力	渐变文字、玻璃质感卡片、流动渐变	SaaS、现代初创公司、科技
Retro	黑客可信度	终端美学、打字机风格、黑底绿字	开发者工具、CLI 产品、科技

询问用户偏好哪种风格方向，或是否想混搭多种方向的元素。

9. 应用风格方向（用户选定后）

用户选定风格方向后，将其应用到项目中：

9a. 生成 Tailwind 主题令牌

创建或更新 tailwind.config.ts，加入所选方向的设计令牌：

// 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' } },
      },
    },
  },
}

9b. 生成 CSS 变量

添加到 globals.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;
    }
  }
}

9c. 生成基础组件

创建可复用组件，将所选方向的设计模式编码其中：

src/components/ui/Button.tsx — 创建符合方向风格的主要和次要变体：

• 编辑风：金色边框，衬线字体
• 极简风：红色背景（主要），带箭头的文本链接（次要）
• 奢华风：铜色背景，轻字重文本
• 企业风：紫色填充和描边变体
• Kinfolk 风：橄榄色描边，极简
• 粗野主义风：黑色边框和硬阴影，大写等宽字体
• 趣味风：渐变边框，玻璃效果
• 复古风：终端命令风格，等宽字体

src/components/ui/Card.tsx — 创建符合方向风格的卡片组件：

• 编辑风：不使用卡片，只用金色左边框
• 极简风：底部边框分隔线，不使用卡片背景
• 奢华风：深色凸起背景，顶部铜色边框
• 企业风：浅灰色背景，石板色边框
• Kinfolk 风：不使用卡片，只显示文本
• 粗野主义风：3px 黑色边框，硬阴影
• 趣味风：玻璃拟态（白色 5%，背景模糊）
• 复古风：绿色/30% 边框，终端背景

src/components/ui/Section.tsx — 创建区块包装器，使用符合方向风格的间距、分隔线和滚动显现动画。

src/components/ui/Container.tsx — 创建最大宽度符合方向内容宽度的容器。

src/components/ui/Nav.tsx — 创建采用符合方向风格的移动端模式的导航栏。

src/components/ScrollReveal.tsx — 创建可复用的滚动显现钩子/组件，使用 IntersectionObserver。

9d. 配置字体

添加到根布局（src/app/layout.tsx 或 src/app/demo/layout.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}`

9e. 清理

• 删除 /demo/ 目录和所有演示页面
• 删除演示布局
• 应用主题后，确认 npx next build 可以通过

10. 验证已应用的方向

应用所选方向后：

1. 启动开发服务器
2. 导航到主页
3. 分别截取桌面端和移动端的屏幕截图
4. 验证：
   • 颜色符合所选方向
   • 字体正确加载
   • 动画正常运行（并遵循减少动态效果设置）
   • 移动端布局正确
   • 所有组件均正常渲染
5. 将屏幕截图分享给用户，供其最终确认

8 种设计方向

ID	名称	参考	背景	强调色	字体
editorial	编辑风衬线	The Economist	奶油色 #FAFAF5	金色 #B8860B	Playfair Display + Source Serif 4
minimal	瑞士极简	Dieter Rams	白色 #FFFFFF	红色 #D42B2B	Space Grotesk + Inter
luxury	暖调奢华深色	Aesop	炭灰色 #171614	铜色 #C4956A	Cormorant Garamond + Outfit
corporate	大胆企业风	Accenture	白色/海军蓝 #0F1923	紫色 #5B21B6	Plus Jakarta Sans
kinfolk	含蓄优雅	Kinfolk	骨白色 #F5F2ED	橄榄色 #6B705C	Libre Baskerville + Karla
brutalist	新粗野主义	Gumroad	米白色 #FFFDF7	黄色 #FFE600 + 粉色 #FF3366	Space Mono + DM Sans
playful	趣味渐变	Linear/Stripe	近黑色 #0C0C0C	蓝→紫→粉渐变	Satoshi/Inter
retro	复古终端	Stripe CLI	终端黑色 #0D1117	绿色 #00FF41 + 琥珀色 #FFB000	JetBrains Mono

详细规格（完整配色方案、布局、动画、无障碍、移动端）请阅读 references/directions.md。

方向选择指南

如果用户希望……	推荐
“专业但不沉闷”	编辑风或企业风
“简洁且现代”	极简风或趣味风
“高端 / 奢华”	奢华风或 Kinfolk 风
“有趣 / 初创公司氛围”	粗野主义风或趣味风
“面向开发者”	复古风或极简风
“与众不同 / 大胆”	粗野主义风或复古风
“温暖且亲切”	奢华风或 Kinfolk 风
“数据驱动 / 企业级”	企业风或极简风
“创意 / 艺术感”	Kinfolk 风或粗野主义风
“科技 / SaaS”	趣味风或复古风

项目类型适配

通用的区块结构（导航栏、主视觉、故事叙述、统计数据、服务、行动号召、页脚）适用于落地页。对于其他项目类型，请调整演示结构：

Web 应用 / SaaS

将叙述内容和统计数据替换为：

• 功能展示 — 展示 3 项核心功能，并配上模拟 UI 截图或插图
• 工作原理 — 3 步流程（注册 → 配置 → 启动）
• 定价 — 3 个套餐（免费、专业版、企业版）或简洁的定价卡片 保留：导航栏、主视觉区、服务 / 功能、行动号召、页脚

仪表板

将主视觉区和叙述内容替换为：

• 仪表板预览 — 模拟数据可视化（图表占位符、KPI 卡片）
• 侧边栏 — 导航模式预览
• 数据表格 — 使用对应风格的示例表格 保留：导航栏（侧边栏变体）、功能卡片、行动号召、页脚

电商

将叙述内容替换为：

• 商品网格 — 展示 4-6 张商品卡片，包含图片占位符、价格和行动号召
• 分类 — 分类导航
• 信任标识 — 评价、配送信息、保障 保留：导航栏（带购物车图标）、主视觉区（以商品为重点）、行动号召、页脚

作品集

将服务替换为：

• 项目网格 — 展示 4-6 张项目卡片，包含图片、标题和类别
• 关于版块 — 包含照片占位符的简介
• 客户评价 — 2-3 条客户引言 保留：导航栏、主视觉区（以姓名为重点）、叙述内容、行动号召（聘请我）、页脚