Back to Details

create-new-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Create New Design

创建新设计

Scaffold a new design inspiration with the correct file structure, ViewTransition naming, and component patterns.
在design-inspirations仓库中按照正确的文件结构、ViewTransition命名规则和组件模式，快速搭建新的设计灵感页面。

Required Information

所需信息

Before creating files, gather:
  1. Design ID (kebab-case): e.g., 
    pricing-table
    , 
    user-profile
  2. Title: e.g., "Pricing Table", "User Profile Card"
  3. Description: One-line description for the main page
  4. Tags: 2-4 category tags (e.g., "Card", "Form", "Dashboard")
  5. Attribution (optional): Twitter handle of original designer
在创建文件前，请准备以下信息：
  1. 设计ID（短横线分隔格式，kebab-case）：例如 
    pricing-table
    、
    user-profile
  2. 标题：例如 "Pricing Table"、"User Profile Card"
  3. 描述：主页展示的单行描述文本
  4. 标签：2-4个分类标签（例如 "Card"、"Form"、"Dashboard"）
  5. 来源署名（可选）：原设计师的Twitter账号

File Structure

文件结构

src/
├── app/
│   ├── designs/
│   │   └── [design-id]/
│   │       └── page.tsx          # Detail page
│   └── page.tsx                   # Update designs array
└── components/
    └── previews/
        └── [Name]Preview.tsx      # Preview component
src/
├── app/
│   ├── designs/
│   │   └── [design-id]/
│   │       └── page.tsx          # 详情页
│   └── page.tsx                   # 更新设计列表数组
└── components/
    └── previews/
        └── [Name]Preview.tsx      # 预览组件

Step 1: Create Preview Component

步骤1：创建预览组件

Create 
src/components/previews/[Name]Preview.tsx
.
See examples/preview-template.tsx for the full template.
Key conventions:
  • Export named function: 
    export function [Name]Preview()
  • ViewTransition names: 
    [design-id]-light
    , 
    [design-id]-dark
    , 
    [design-id]-light-panel
    , 
    [design-id]-dark-panel
  • Side-by-side layout with dot grid backgrounds
  • Light panel: 
    bg-[#f5f5f5]
    with 
    #d4d4d4
    dots
  • Dark panel: 
    bg-zinc-950
    with 
    #3f3f46
    dots
创建文件 
src/components/previews/[Name]Preview.tsx
。
完整模板可参考 examples/preview-template.tsx。
关键规范：
  • 导出命名函数：
    export function [Name]Preview()
  • ViewTransition 命名：
    [design-id]-light
    、
    [design-id]-dark
    、
    [design-id]-light-panel
    、
    [design-id]-dark-panel
  • 带点阵背景的并排布局
  • 浅色面板：
    bg-[#f5f5f5]
    搭配 
    #d4d4d4
    点阵
  • 深色面板：
    bg-zinc-950
    搭配 
    #3f3f46
    点阵

Step 2: Create Detail Page

步骤2：创建详情页

Create 
src/app/designs/[design-id]/page.tsx
.
See examples/page-template.tsx for the full template.
Key conventions:
  • Use DM Sans font for design pages
  • Split layout: 50/50 light/dark
  • Header with back arrow, Code button, and attribution
  • Code button links to the component file on GitHub
  • Attribution format: "Inspired from @username" with profile photo via 
    unavatar.io
创建文件 
src/app/designs/[design-id]/page.tsx
。
完整模板可参考 examples/page-template.tsx。
关键规范：
  • 设计页面使用 DM Sans 字体
  • 50/50 分栏布局：浅色/深色模式
  • 包含返回箭头、代码按钮和来源署名的头部
  • 代码按钮链接至GitHub上的组件文件
  • 来源署名格式："Inspired from @username"，通过 
    unavatar.io
    获取头像

Step 3: Update Main Page

步骤3：更新主页

Add entry to 
src/app/page.tsx
:
tsx
import { [Name]Preview } from "@/components/previews/[Name]Preview";

const designs = [
  // ... existing designs
  {
    id: "[design-id]",
    number: "XX",  // Increment from last
    title: "[Title]",
    description: "[Description]",
    tags: ["Tag1", "Tag2"],
    PreviewComponent: [Name]Preview,
  },
];
在 
src/app/page.tsx
中添加新条目：
tsx
import { [Name]Preview } from "@/components/previews/[Name]Preview";

const designs = [
  // ... 现有设计
  {
    id: "[design-id]",
    number: "XX",  // 在上一个编号基础上加1
    title: "[Title]",
    description: "[Description]",
    tags: ["Tag1", "Tag2"],
    PreviewComponent: [Name]Preview,
  },
];

Step 4: Update globals.css

步骤4：更新globals.css

Add ViewTransition CSS for new design in 
src/app/globals.css
:
css
/* Add to existing shared element transitions section */
::view-transition-old([design-id]-light),
::view-transition-new([design-id]-light),
::view-transition-old([design-id]-dark),
::view-transition-new([design-id]-dark),
::view-transition-old([design-id]-light-panel),
::view-transition-new([design-id]-light-panel),
::view-transition-old([design-id]-dark-panel),
::view-transition-new([design-id]-dark-panel) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add to reduced motion section */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old([design-id]-light),
  ::view-transition-new([design-id]-light),
  ::view-transition-old([design-id]-dark),
  ::view-transition-new([design-id]-dark),
  ::view-transition-old([design-id]-light-panel),
  ::view-transition-new([design-id]-light-panel),
  ::view-transition-old([design-id]-dark-panel),
  ::view-transition-new([design-id]-dark-panel) {
    animation: none;
  }
}
在 
src/app/globals.css
中添加新设计的ViewTransition CSS：
css
/* 添加至现有共享元素过渡区域 */
::view-transition-old([design-id]-light),
::view-transition-new([design-id]-light),
::view-transition-old([design-id]-dark),
::view-transition-new([design-id]-dark),
::view-transition-old([design-id]-light-panel),
::view-transition-new([design-id]-light-panel),
::view-transition-old([design-id]-dark-panel),
::view-transition-new([design-id]-dark-panel) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 添加至减少动效区域 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old([design-id]-light),
  ::view-transition-new([design-id]-light),
  ::view-transition-old([design-id]-dark),
  ::view-transition-new([design-id]-dark),
  ::view-transition-old([design-id]-light-panel),
  ::view-transition-new([design-id]-light-panel),
  ::view-transition-old([design-id]-dark-panel),
  ::view-transition-new([design-id]-dark-panel) {
    animation: none;
  }
}

ViewTransition Naming Convention

ViewTransition命名规范

ElementPatternExample
Light card
[design-id]-light
pricing-table-light
Dark card
[design-id]-dark
pricing-table-dark
Light panel
[design-id]-light-panel
pricing-table-light-panel
Dark panel
[design-id]-dark-panel
pricing-table-dark-panel
元素命名模式示例
浅色卡片
[design-id]-light
pricing-table-light
深色卡片
[design-id]-dark
pricing-table-dark
浅色面板
[design-id]-light-panel
pricing-table-light-panel
深色面板
[design-id]-dark-panel
pricing-table-dark-panel

Code Button Format

代码按钮格式

tsx
<a
  href="https://github.com/ainergiz/design-inspirations/blob/main/src/app/designs/[design-id]/page.tsx"
  target="_blank"
  rel="noopener noreferrer"
  className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 rounded-lg transition-colors"
>
  <Code className="w-4 h-4" />
  <span className="hidden sm:inline">Code</span>
</a>
tsx
<a
  href="https://github.com/ainergiz/design-inspirations/blob/main/src/app/designs/[design-id]/page.tsx"
  target="_blank"
  rel="noopener noreferrer"
  className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 rounded-lg transition-colors"
>
  <Code className="w-4 h-4" />
  <span className="hidden sm:inline">Code</span>
</a>

Attribution Format

来源署名格式

tsx
<a
  href="https://x.com/[username]"
  target="_blank"
  rel="noopener noreferrer"
  className="flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-700"
>
  <span className="hidden sm:inline text-zinc-400">Inspired from</span>
  <Image
    src="https://unavatar.io/x/[username]"
    alt="[Name]"
    width={24}
    height={24}
    className="w-6 h-6 rounded-full"
  />
  <span className="font-medium text-zinc-700">@[username]</span>
  <ExternalLink className="w-3.5 h-3.5" />
</a>
tsx
<a
  href="https://x.com/[username]"
  target="_blank"
  rel="noopener noreferrer"
  className="flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-700"
>
  <span className="hidden sm:inline text-zinc-400">Inspired from</span>
  <Image
    src="https://unavatar.io/x/[username]"
    alt="[Name]"
    width={24}
    height={24}
    className="w-6 h-6 rounded-full"
  />
  <span className="font-medium text-zinc-700">@[username]</span>
  <ExternalLink className="w-3.5 h-3.5" />
</a>

Step 5: Custom Animations (if needed)

步骤5：自定义动画（如有需要）

If your component has custom animations (e.g., carousels, progress bars), add keyframes to 
src/app/globals.css
:
css
/* Example: Carousel progress animation */
@keyframes carousel-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.animate-carousel-progress {
  animation: carousel-progress linear forwards;
}
Common animation patterns:
  • Progress bars: 
    scaleX(0)
    to 
    scaleX(1)
    with 
    origin-left
  • Fade in: 
    opacity: 0
    to 
    opacity: 1
  • Slide up: 
    translateY(10px)
    to 
    translateY(0)
如果你的组件包含自定义动画（例如轮播图、进度条），请在 
src/app/globals.css
中添加关键帧：
css
/* 示例：轮播图进度动画 */
@keyframes carousel-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.animate-carousel-progress {
  animation: carousel-progress linear forwards;
}
常见动画模式：
  • 进度条：从 
    scaleX(0)
    到 
    scaleX(1)
    ，设置 
    origin-left
  • 淡入：从 
    opacity: 0
    到 
    opacity: 1
  • 上滑：从 
    translateY(10px)
    到 
    translateY(0)

Related Skills

相关技能

Consider using these patterns in your design:
  • component-variants: Color token mapping for light/dark modes
  • expandable-card: Smooth expand/collapse with grid-rows
  • image-carousel: Auto-advance carousel with touch support
  • glassmorphism: Frosted glass overlay effects
  • nested-card: Outer gradient with inner content card
  • stacked-cards: Fanned/cascading card stacks with hover lift
  • dropdown-menu: Click-outside detection and z-index stacking
在设计中可参考以下模式：
  • component-variants：适配浅色/深色模式的颜色令牌映射
  • expandable-card：基于grid-rows的平滑展开/收起效果
  • image-carousel：支持触摸操作的自动轮播图
  • glassmorphism：毛玻璃覆盖层效果
  • nested-card：外层渐变搭配内层内容卡片
  • stacked-cards：带悬停抬升效果的扇形/层叠卡片组
  • dropdown-menu：点击外部关闭检测及z-index层级管理

Checklist

检查清单

  • Preview component created with correct ViewTransition names
  • Detail page created with split layout
  • Code button links to component file on GitHub
  • Design entry added to main page designs array
  • globals.css updated with ViewTransition CSS
  • Custom keyframes added to globals.css (if needed)
  • Attribution included (if available)
  • Both light and dark variants implemented
  • Components follow existing code style
  • Touch interactions considered for mobile
  • 已创建预览组件，且ViewTransition命名正确
  • 已创建详情页，采用分栏布局
  • 代码按钮已链接至GitHub上的组件文件
  • 已在主页的设计列表数组中添加新条目
  • 已在globals.css中更新ViewTransition CSS
  • 已在globals.css中添加自定义关键帧（如有需要）
  • 已包含来源署名（如提供）
  • 已实现浅色和深色两种变体
  • 组件遵循现有代码风格
  • 已考虑移动端的触摸交互