Frontend Design Ultimate
Create distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs.
Stack: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion
Output: Vite (static HTML) or Next.js (Vercel-ready)
Quick Start
CODEBLOCK0
Design Thinking (Do This First)
Before writing any code, commit to a BOLD aesthetic direction:
1. Understand Context
- - Purpose: What problem does this interface solve? Who uses it?
- Audience: Developer tools? Consumer app? Enterprise? Creative agency?
- Constraints: Performance requirements, accessibility needs, brand guidelines?
2. Choose an Extreme Tone
Pick ONE and commit fully — timid designs fail:
| Tone | Characteristics |
|---|
| Brutally Minimal | Sparse, monochrome, massive typography, raw edges |
| Maximalist Chaos |
Layered, dense, overlapping elements, controlled disorder |
|
Retro-Futuristic | Neon accents, geometric shapes, CRT aesthetics |
|
Organic/Natural | Soft curves, earth tones, hand-drawn elements |
|
Luxury/Refined | Subtle animations, premium typography, restrained palette |
|
Editorial/Magazine | Strong grid, dramatic headlines, whitespace as feature |
|
Brutalist/Raw | Exposed structure, harsh contrasts, anti-design |
|
Art Deco/Geometric | Gold accents, symmetry, ornate patterns |
|
Soft/Pastel | Rounded corners, gentle gradients, friendly |
|
Industrial/Utilitarian | Functional, monospace, data-dense |
3. Define the Unforgettable Element
What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?
Aesthetics Guidelines
Typography — NEVER Generic
BANNED: Inter, Roboto, Arial, system fonts, Open Sans
DO: Distinctive, characterful choices that elevate the design.
| Use Case | Approach |
|---|
| Display/Headlines | Bold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair Display |
| Body Text |
Refined readability — Instrument Sans, General Sans, Plus Jakarta Sans |
| Monospace/Code | DM Mono, JetBrains Mono, IBM Plex Mono |
| Pairing Strategy | Contrast weights (thin display + bold body), contrast styles (serif + geometric sans) |
Size Progression: Use 3x+ jumps, not timid 1.5x increments.
Color & Theme
BANNED: Purple gradients on white, evenly-distributed 5-color palettes
DO:
- - Dominant + Sharp Accent: 70-20-10 rule (primary-secondary-accent)
- CSS Variables:
--primary, --accent, --surface, INLINECODE3 - Commit to dark OR light: Don't hedge with gray middle-grounds
- High contrast CTAs: Buttons should pop dramatically
CODEBLOCK1
Motion & Animation
Priority: One orchestrated page load > scattered micro-interactions
High-Impact Moments:
- - Staggered hero reveals (
animation-delay) - Scroll-triggered section entrances
- Hover states that surprise (scale, color shift, shadow depth)
- Smooth page transitions
Implementation:
- - CSS-only for simple animations
- Framer Motion for React (pre-installed via init scripts)
- Keep durations 200-400ms (snappy, not sluggish)
Spatial Composition
BANNED: Centered, symmetrical, predictable layouts
DO:
- - Asymmetry with purpose
- Overlapping elements
- Diagonal flow / grid-breaking
- Generous negative space OR controlled density (pick one)
- Off-grid hero sections
Backgrounds & Atmosphere
BANNED: Solid white/gray backgrounds
DO:
- - Gradient meshes (subtle, not garish)
- Noise/grain textures (SVG filter or CSS)
- Geometric patterns (dots, lines, shapes)
- Layered transparencies
- Dramatic shadows for depth
- Blur effects for glassmorphism
CODEBLOCK2
Mobile-First Patterns
See references/mobile-patterns.md for detailed CSS.
Critical Rules
| Pattern | Desktop | Mobile Fix |
|---|
| Hero with hidden visual | 2-column grid | Switch to display: flex (not grid) |
| Large selection lists |
Horizontal scroll | Accordion with category headers |
| Multi-column forms | Side-by-side | Stack vertically |
| Status/alert cards | Inline |
align-items: center +
text-align: center |
| Feature grids | 3-4 columns | Single column |
Breakpoints
CODEBLOCK3
Font Scaling
CODEBLOCK4
Build Workflow
Option A: Vite (Pure Static)
CODEBLOCK5
Option B: Next.js (Vercel Deploy)
CODEBLOCK6
Project Structure
Vite Static
CODEBLOCK7
Next.js
my-site/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── privacy/page.tsx
├── components/
├── lib/
├── config/
│ └── site.ts
└── tailwind.config.ts
Site Config Pattern
Keep all editable content in one file:
CODEBLOCK9
Pre-Implementation Checklist
Run this before finalizing any design:
Design Quality
- - [ ] Typography is distinctive (no Inter/Roboto/Arial)
- [ ] Color palette has clear dominant + accent (not evenly distributed)
- [ ] Background has atmosphere (not solid white/gray)
- [ ] At least one memorable/unforgettable element
- [ ] Animations are orchestrated (not scattered)
Mobile Responsiveness
- - [ ] Hero centers on mobile (no empty grid space)
- [ ] All grids collapse to single column
- [ ] Forms stack vertically
- [ ] Large lists use accordion (not horizontal scroll)
- [ ] Font sizes scale down appropriately
Form Consistency
- - [ ] Input, select, textarea all styled consistently
- [ ] Radio/checkbox visible (check transparent-border styles)
- [ ] Dropdown options have readable backgrounds
- [ ] Labels use CSS variables (not hardcoded colors)
Accessibility
- - [ ] Color contrast meets WCAG AA (4.5:1 text, 3:1 UI)
- [ ] Focus states visible
- [ ] Semantic HTML (nav, main, section, article)
- [ ] Alt text for images
- [ ] Keyboard navigation works
shadcn/ui Components
10 common components pre-installed (button, badge, card, accordion, dialog, navigation-menu, tabs, sheet, separator, avatar, alert). Add more with npx shadcn@latest add [name] or install all with npx shadcn@latest add --all.
See references/shadcn-components.md for full component reference.
Most used for landing pages:
- -
Button, Badge — CTAs and labels - INLINECODE12 — Feature cards, pricing tiers
- INLINECODE13 — FAQ sections
- INLINECODE14 — Modals, video players
- INLINECODE15 — Header nav
- INLINECODE16 — Feature showcases
- INLINECODE17 — Testimonials
References
Examples
Prompt → Output
Input:
"Portfolio site for a photographer. Minimal, editorial feel.
Grid gallery with lightbox, about section, contact form."
Design Decisions:
- - Tone: Editorial/Magazine
- Typography: Cormorant Garamond (display) + Inter... wait, banned. Plus Jakarta Sans (body)
- Color: Near-black bg (#0c0c0c), warm white text (#f5f5f0), copper accent (#b87333)
- Unforgettable: Full-bleed hero image with text overlay that reveals on scroll
- Motion: Gallery images fade in staggered on scroll
Output: Complete Next.js project with responsive gallery, lightbox component, and contact form with validation.
Based on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills.前端设计终极版
仅根据文本需求创建独特、生产级的静态网站。无需模型、无需Figma——只需描述你想要的内容，即可获得大胆、令人难忘的设计。
技术栈：React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion
输出：Vite（静态HTML）或Next.js（Vercel就绪）
快速开始
为AI写作工具构建一个SaaS着陆页。深色主题，
编辑排版，细腻的颗粒纹理。页面：带动画演示的英雄区、功能网格、定价表、常见问题手风琴、页脚。
设计思维（请先执行此步骤）
在编写任何代码之前，致力于一个大胆的美学方向：
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
- 坚持深色或浅色：不要使用灰色中间地带
- 高对比度行动号召按钮：按钮应具有戏剧性的突出效果
css
: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-400毫秒（干脆利落，不拖沓）
空间构成
禁用：居中、对称、可预测的布局
应使用：
- - 有目的的对称
- 重叠元素
- 对角线流动/打破网格
- 慷慨的负空间或可控的密度（二选一）
- 脱离网格的英雄区
背景与氛围
禁用：纯白/灰色背景
应使用：
- - 渐变网格（微妙，不花哨）
- 噪点/颗粒纹理（SVG滤镜或CSS）
- 几何图案（点、线、形状）
- 分层透明度
- 戏剧性阴影增加深度
- 毛玻璃效果的模糊
css
/ 微妙的颗粒叠加 /
.grain::before {
content: ;
position: fixed;
inset: 0;
background: url(data:image/svg+xml,...) repeat;
opacity: 0.03;
pointer-events: none;
}
移动优先模式
详细CSS请参见references/mobile-patterns.md。
关键规则
| 模式 | 桌面端 | 移动端修复 |
|---|
| 带隐藏视觉元素的英雄区 | 2列网格 | 切换到display: flex（非网格） |
| 大型选择列表 |
水平滚动 | 带分类标题的手风琴 |
| 多列表单 | 并排 | 垂直堆叠 |
| 状态/提示卡片 | 内联 | align-items: center + text-align: center |
| 功能网格 | 3-4列 | 单列 |
断点
css
/ 平板 - 堆叠侧边栏 /
@media (max-width: 1200px) { }
/ 移动端 - 完全单列 /
@media (max-width: 768px) { }
/ 小屏移动端 - 紧凑间距 /
@media (max-width: 480px) { }
字体缩放
css
@media (max-width: 768px) {
.hero-title { font-size: 32px; } / 从约48px /
.section-title { font-size: 24px; } / 从约32px /
.section-subtitle { font-size: 14px; } / 从约16px /
}
构建工作流
选项A：Vite（纯静态）
bash
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部署）
bash
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
站点配置模式
将所有可编辑内容保存在一个文件中：
typescript
// 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: [
