前端设计入门实战：从零构建符合现代标准的skill frontend-design体系

3次阅读

共计 1547 个字符，预计需要花费 4 分钟才能阅读完成。

去年接手一个遗留项目时，我遇到了典型的 ” 样式地狱 ”：同样的 Button 组件在订单页是圆角，在详情页却变成直角；修改一个标题颜色会导致全局字体异常；团队成员都不敢动 CSS 文件 … 这种混乱不仅让开发效率低下，还导致了多次线上样式事故。这促使我开始研究如何用 skill frontend-design 方法论建立可持续维护的设计系统。

Atomic Design 理论把 UI 拆分为 5 个层次：

Atoms（原子）：不可再分的基础元素，如按钮、输入框。用 TypeScript 实现时要注意：

// Button.tsx
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

export const Button = ({variant = 'primary', size = 'md', ...props}: ButtonProps) => (
  <button 
    className={`btn-${variant} ${size}`}
    data-testid="custom-button"
    {...props}
  />
);

Molecules（分子）：由原子组成的简单组合，比如搜索框 = 输入框 + 按钮
Organisms（有机体）：更复杂的 UI 区块，如导航栏

通过 CSS 变量管理设计参数，这里推荐使用 Style Dictionary 工具：

/* tokens.css */
:root {
  --color-primary: #1890ff;
  --spacing-md: 16px;
  --font-size-base: 14px;
  /* 暗黑模式变量 */
  --dark-color-primary: #177ddc;
}

/* 主题切换示例 */
.dark {--color-primary: var(--dark-color-primary);
}

安装最新版并创建组件故事：

初始化配置
```
npx storybook@latest init --type react
```

创建 Button 组件故事

// Button.stories.tsx
import type {Meta, StoryObj} from '@storybook/react';
import {Button} from './Button';

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    children: 'Submit',
    variant: 'primary'
  },
};

方案	打包体积	开发体验	学习成本	适用场景
Tailwind	较小	优秀	低	快速迭代项目
CSS Modules	中等	良好	中	需要隔离样式的场景
Styled-components	较大	优秀	高	需要动态样式的场景