component-template-generator

组件模板生成器

生成可用于生产环境的组件代码，并正确使用设计令牌。可生成带有变体、无障碍功能和令牌集成的 React、Vue 或 Svelte 组件。

快速开始

最简示例——生成 Button 组件：

// Input: Trend ID + Component type
// Output: Complete component with token usage

// Button.tsx (neobrutalism)
import { cn } from '@/lib/utils';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export function Button({ variant = 'primary', size = 'md', children }: ButtonProps) {
  return (
    <button className={cn(
      'border-3 border-brutal-black font-display transition-all duration-100',
      'shadow-brutal hover:shadow-brutal-hover hover:-translate-x-0.5 hover:-translate-y-0.5',
      'active:shadow-brutal-active active:translate-x-0.5 active:translate-y-0.5',
      // Variants
      variant === 'primary' && 'bg-brutal-red text-white',
      variant === 'secondary' && 'bg-brutal-cream text-brutal-black',
      variant === 'ghost' && 'bg-transparent border-transparent shadow-none',
      // Sizes
      size === 'sm' && 'px-3 py-1.5 text-sm',
      size === 'md' && 'px-4 py-2 text-base',
      size === 'lg' && 'px-6 py-3 text-lg',
    )}>
      {children}
    </button>
  );
}

核心原则：组件使用语义化令牌名称，而不是硬编码值。

核心使命

生成符合以下要求的组件模板：

1. 正确使用设计令牌（语义化名称，而非十六进制值）
2. 包含常见变体（尺寸、颜色、状态）
3. 内置无障碍功能（ARIA、键盘、焦点）
4. 符合框架惯用写法（React hooks、Vue 组合式 API、Svelte stores）

适用场景

✅ 在以下情况下使用：

• 使用生成的令牌启动组件库
• 需要在各组件中一致地使用令牌
• 希望模板内置无障碍功能
• 搭建设计系统实现的基础

❌ 在以下情况下请勿使用：

• 只需要令牌（请使用 design-system-generator）
• 需要完整的 UI 库（请使用 shadcn/ui 或类似工具）
• 自定义现有组件（直接编辑即可）

组件目录

核心组件

组件	变体	无障碍功能
Button	primary、secondary、ghost、destructive	✅ 焦点环、禁用状态
Input	default、error、disabled	✅ 标签关联、错误播报
Card	default、interactive、highlighted	✅ 语义化 article/section
Badge	default、success、warning、error	✅ 状态播报

布局组件

组件	变体	特性
Container	default、narrow、wide	最大宽度 + 内边距
Stack	vertical、horizontal	使用间距令牌设置间隔
Grid	2-col、3-col、4-col、auto	响应式断点

交互组件

组件	变体	无障碍功能
Dialog	default、alert	✅ 焦点陷阱、按 Escape 关闭
Dropdown	default	✅ 键盘导航
Tabs	default	✅ 方向键导航
Toggle	default	✅ switch 角色

模板结构

每个组件模板都包含：

// 1. Type definitions
interface ComponentProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  // ... other props
}

// 2. Component implementation
export function Component({ variant, size, ...props }: ComponentProps) {
  // Token-based styling
  // Accessibility attributes
  // Event handlers
}

// 3. Subcomponents (if applicable)
Component.Header = function Header() { /* ... */ };
Component.Body = function Body() { /* ... */ };

// 4. Default export
export default Component;

框架模板

React + Tailwind

// Uses: className, cn() utility, React.forwardRef for refs
import { forwardRef } from 'react';
import { cn } from '@/lib/utils';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', className, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(
        'border-3 border-brutal-black shadow-brutal',
        variant === 'primary' && 'bg-brutal-red',
        className
      )}
      {...props}
    />
  )
);

React + CSS Variables

// Uses: style prop with CSS variables, CSS modules
import styles from './Button.module.css';

export function Button({ variant = 'primary', ...props }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      style={{
        '--button-shadow': 'var(--shadow-md)',
        '--button-border': 'var(--border-width) solid var(--color-border)',
      }}
      {...props}
    />
  );
}

Vue 3 + Composition API

<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md',
});

const classes = computed(() => [
  'border-3 border-brutal-black shadow-brutal',
  props.variant === 'primary' && 'bg-brutal-red',
  props.variant === 'secondary' && 'bg-brutal-cream',
]);
</script>

<template>
  <button :class="classes">
    <slot />
  </button>
</template>

Svelte

<script lang="ts">
  export let variant: 'primary' | 'secondary' = 'primary';
  export let size: 'sm' | 'md' | 'lg' = 'md';
</script>

<button
  class="border-3 border-brutal-black shadow-brutal"
  class:bg-brutal-red={variant === 'primary'}
  class:bg-brutal-cream={variant === 'secondary'}
  on:click
>
  <slot />
</button>

无障碍模式

焦点管理

// All interactive components include visible focus
'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
'focus-visible:ring-brutal-blue'

键盘导航

// Dropdown with keyboard support
function handleKeyDown(e: KeyboardEvent) {
  switch (e.key) {
    case 'ArrowDown': focusNext(); break;
    case 'ArrowUp': focusPrev(); break;
    case 'Escape': close(); break;
    case 'Enter': select(); break;
  }
}

ARIA 属性

// Dialog with proper ARIA
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-description"
>

趋势专属模式

新粗野主义组件

// Hard shadows, bold borders, transform on interaction
'border-3 border-black shadow-brutal'
'hover:shadow-brutal-hover hover:-translate-x-0.5 hover:-translate-y-0.5'
'active:shadow-brutal-active active:translate-x-0.5 active:translate-y-0.5'

玻璃拟态组件

// Frosted glass, subtle borders, backdrop blur
'bg-glass-white/10 backdrop-blur-glass'
'border border-glass-white/20'
'shadow-glass'

终端风格组件

// Monospace, green-on-black, CRT effects
'font-mono bg-term-bg text-term-green'
'border border-term-green/30'
'shadow-term-glow'

生成工作流

1. design-system-generator → tokens (Tailwind/CSS)
2. component-template-generator → component code
3. Customize variants and props as needed
4. design-system-documenter → component docs

另请参阅

参考资料

• references/component-patterns.md - 新粗野主义、玻璃拟态、终端风格、web3、瑞士风格的完整模式
• references/component-catalog.md - 新增：21st.dev 组件数量（1400+ 个组件）
  • 营销区块：73 个主视觉区块、34 个 CTA、11 个导航菜单、36 个特性区块
  • UI 组件：130 个按钮、102 个输入框、79 个卡片、40 个折叠面板
  • 设计系统参考：Elastic UI、HeroUI、Ariakit、shadcn

相关技能

• design-system-generator - 先生成令牌（24 种趋势、31 种风格）
• design-system-documenter - 为生成的组件编写文档