frontend-design-zh

name	frontend-design-zh
description	使用 React、Tailwind CSS 和 shadcn/ui 创建独特、生产级的静态网站——无需设计稿。从纯文本需求生成大胆、令人难忘的设计，具备反AI套路美学、移动优先响应式模式和单文件打包功能。适用于构建落地页、营销网站、作品集、仪表盘或任何静态Web界面。支持 Vite（纯静态）和 Next.js（Vercel部署）两种工作流。
homepage	https://github.com/kesslerio/frontend-design-ultimate-clawhub-skill
metadata	{"openclaw":{"emoji":"🎨","requires":{"bins":["node","npm"]}}}

前端设计终极版

仅从文本需求创建独特、生产级的静态网站。无需设计稿、无需 Figma —— 只需描述你想要的，即可获得大胆、令人难忘的设计。

技术栈: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion
输出: Vite（静态HTML）或 Next.js（Vercel就绪）

快速开始

"为一个AI写作工具构建SaaS落地页。深色主题，
编辑排版风格，微妙纹理背景。页面包括：带动画演示的英雄区、
功能网格、价格表、FAQ手风琴、页脚。"

---

设计思维（先做这一步）

在编写任何代码之前，确定一个大胆的美学方向：

1. 理解背景

• 目的: 这个界面解决什么问题？谁使用它？
• 受众: 开发者工具？消费者应用？企业？创意代理？
• 约束: 性能要求、无障碍需求、品牌指南？

2. 选择一个极端基调

选择一个并完全投入 —— 犹豫的设计注定失败：

基调	特点
极简主义	稀疏、单色、巨大排版、原始边缘
繁复混乱	分层、密集、重叠元素、受控的混乱
复古未来	霓虹点缀、几何形状、CRT美学
有机自然	柔和曲线、大地色调、手绘元素
奢华精致	微妙动画、高级排版、克制的调色板
编辑杂志	强网格、戏剧性标题、留白作为特色
野兽派原始	暴露结构、强烈对比、反设计
装饰艺术几何	金色点缀、对称、华丽图案
柔和粉彩	圆角、温柔渐变、友好
工业实用	功能性、等宽字体、数据密集

3. 定义难忘元素

什么是用户会记住的一件事？一个英雄动画？排版处理？颜色组合？不寻常的布局？

---

美学指南

排版 —— 绝不使用通用字体

禁止使用: Inter, Roboto, Arial, 系统字体, Open Sans

应该使用: 独特、有个性的选择，提升设计品质。

用途	方法
展示/标题	鲜明个性 — Clash, Cabinet Grotesk, Satoshi, Space Grotesk（少量使用）, Playfair Display
正文	精致可读 — Instrument Sans, General Sans, Plus Jakarta Sans
等宽/代码	DM Mono, JetBrains Mono, IBM Plex Mono
搭配策略	对比字重（细体展示 + 粗体正文），对比风格（衬线 + 几何无衬线）

字号递进: 使用3倍以上的跳跃，而不是胆小的1.5倍增量。

颜色与主题

禁止使用: 白色上的紫色渐变、均匀分布的5色调色板

应该使用:

• 主色 + 鲜明强调色: 70-20-10法则（主色-次色-强调色）
• CSS变量: --primary, --accent, --surface, --text
• 坚定选择深色或浅色: 不要用灰色中间地带模棱两可
• 高对比CTA: 按钮应该戏剧性地突出

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --text-primary: #fafafa;
  --text-secondary: #a1a1a1;
  --accent: #ff6b35;
  --accent-hover: #ff8555;
}

动效与动画

优先级: 一个协调的页面加载 > 分散的微交互

高影响力时刻:

• 错开显示的英雄区揭示（animation-delay）
• 滚动触发的区块入场
• 令人惊喜的悬停状态（缩放、颜色变化、阴影深度）
• 平滑的页面过渡

实现:

• 简单动画只用CSS
• React使用Framer Motion（通过初始化脚本预装）
• 保持时长200-400ms（快速，不拖沓）

空间构成

禁止使用: 居中、对称、可预测的布局

应该使用:

• 有目的的不对称
• 重叠元素
• 对角线流动 / 突破网格
• 慷慨的负空间 或 受控的密度（二选一）
• 偏离网格的英雄区

背景与氛围

禁止使用: 纯白色/灰色背景

应该使用:

• 渐变网格（微妙，不刺眼）
• 噪点/纹理（SVG滤镜或CSS）
• 几何图案（点、线、形状）
• 分层透明度
• 戏剧性的阴影营造深度
• 模糊效果实现玻璃态

/* 微妙噪点覆盖 */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,...") repeat;
  opacity: 0.03;
  pointer-events: none;
}

---

移动优先模式

详见 references/mobile-patterns.md 获取详细CSS。

关键规则

模式	桌面	移动端修复
带隐藏视觉的Hero	2列网格	切换为 display: flex（不是grid）
大型选择列表	水平滚动	带分类标题的手风琴
多列表单	并排	垂直堆叠
状态/警告卡片	内联	align-items: center + text-align: center
功能网格	3-4列	单列

断点

/* 平板 - 堆叠侧边栏 */
@media (max-width: 1200px) { }

/* 移动端 - 完全单列 */
@media (max-width: 768px) { }

/* 小屏移动端 - 紧凑间距 */
@media (max-width: 480px) { }

字体缩放

@media (max-width: 768px) {
  .hero-title { font-size: 32px; }      /* 从 ~48px */
  .section-title { font-size: 24px; }   /* 从 ~32px */
  .section-subtitle { font-size: 14px; } /* 从 ~16px */
}

---

构建工作流

选项A: Vite（纯静态）

# 1. 初始化
bash scripts/init-vite.sh my-site
cd my-site

# 2. 开发
npm run dev

# 3. 构建静态文件
npm run build
# 输出: dist/

# 4. 打包为单个HTML（可选）
bash scripts/bundle-artifact.sh
# 输出: bundle.html

选项B: Next.js（Vercel部署）

# 1. 初始化
bash scripts/init-nextjs.sh my-site
cd my-site

# 2. 开发
npm run dev

# 3. 部署到Vercel
vercel

---

项目结构

Vite 静态

my-site/
├── src/
│   ├── components/     # React组件
│   ├── lib/           # 工具函数, cn()
│   ├── styles/        # 全局CSS
│   ├── config/
│   │   └── site.ts    # 可编辑内容配置
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── tailwind.config.ts
└── package.json

Next.js

my-site/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── privacy/page.tsx
├── components/
├── lib/
├── config/
│   └── site.ts
└── tailwind.config.ts

---

站点配置模式

将所有可编辑内容放在一个文件中：

// config/site.ts
export const siteConfig = {
  name: "Acme AI",
  tagline: "写得更好、更快",
  description: "AI驱动的写作助手",
  
  hero: {
    badge: "现在测试中",
    title: "你的文字，\n如虎添翼",
    subtitle: "用理解你风格的AI，10倍速写作",
    cta: { text: "开始使用", href: "/signup" },
    secondaryCta: { text: "观看演示", href: "#demo" },
  },
  
  features: [
    { icon: "Zap", title: "闪电般快速", description: "..." },
    // ...
  ],
  
  pricing: [
    { name: "免费", price: 0, features: [...] },
    { name: "专业", price: 19, features: [...], popular: true },
  ],
  
  faq: [
    { q: "如何运作？", a: "..." },
  ],
  
  footer: {
    links: [...],
    social: [...],
  }
}

---

实施前检查清单

在最终确定任何设计之前运行此检查：

设计质量

• 排版独特（无Inter/Roboto/Arial）
• 调色板有清晰的主色 + 强调色（非均匀分布）
• 背景有氛围（非纯白色/灰色）
• 至少有一个令人难忘/难忘的元素
• 动画经过协调（非分散）

移动端响应

• Hero在移动端居中（无空网格空间）
• 所有网格折叠为单列
• 表单垂直堆叠
• 大型列表使用手风琴（非水平滚动）
• 字体大小适当缩小

表单一致性

• Input、select、textarea样式一致
• Radio/checkbox可见（检查透明边框样式）
• 下拉选项有可读背景
• 标签使用CSS变量（非硬编码颜色）

无障碍

• 颜色对比符合WCAG AA（文字4.5:1，UI 3:1）
• 焦点状态可见
• 语义化HTML（nav, main, section, article）
• 图片有alt文本
• 键盘导航可用

---

shadcn/ui 组件

预装10个常用组件（button, badge, card, accordion, dialog, navigation-menu, tabs, sheet, separator, avatar, alert）。使用 npx shadcn@latest add [name] 添加更多，或用 npx shadcn@latest add --all 安装全部。

详见 references/shadcn-components.md 获取完整组件参考。

落地页最常用：

• Button, Badge — CTA和标签
• Card — 功能卡片、价格层级
• Accordion — FAQ部分
• Dialog — 模态框、视频播放器
• NavigationMenu — 头部导航
• Tabs — 功能展示
• Carousel — 推荐/评价

---

参考资料

• references/design-philosophy.md — 扩展的反AI套路指南
• references/mobile-patterns.md — 详细响应式CSS
• references/shadcn-components.md — 组件快速参考
• templates/site-config.ts — 完整siteConfig示例

---

示例

提示词 → 输出

输入:

"摄影师的作品集网站。极简、编辑感。 网格画廊带灯箱、关于部分、联系表单。"

设计决策:

• 基调: 编辑/杂志
• 排版: Cormorant Garamond（展示）+ Plus Jakarta Sans（正文）
• 颜色: 近黑背景（#0c0c0c），暖白文字（#f5f5f0），铜色强调（#b87333）
• 难忘元素: 全出血英雄图片，文字覆盖在滚动时显示
• 动效: 画廊图片在滚动时交错淡入

输出: 完整的Next.js项目，包含响应式画廊、灯箱组件和带验证的联系表单。

---

基于Anthropic的frontend-design、web-artifacts-builder和社区frontend-design-v2技能。