初始化React項目並安裝Storybook，使用npx storybook@latest init配置環(huán)境，運(yùn)行npm run storybook啟動本地服務(wù)，建議啟用TypeScript以確保類型一致性；2. 按功能組織組件目錄結(jié)構(gòu)，將組件、設(shè)計令牌（colors、spacing、typography）、主題和工具函數(shù)分離，提升可維護(hù)性；3. 利用Storybook的Args和argTypes為組件編寫可交互故事，支持在UI中動態(tài)調(diào)整屬性，便於測試和評審；4. 使用MDX文件結(jié)合Markdown與JSX，通過Canvas嵌入可交互故事，構(gòu)建富文檔化的可視化指南；5. 集成Controls、Actions、Docs、Accessibility和Designs等插件，增強(qiáng)開發(fā)體驗與設(shè)計一致性；6. 採用Jest或React Testing Library進(jìn)行單元測試，結(jié)合Chromatic實現(xiàn)視覺回歸測試，並將設(shè)計系統(tǒng)打包發(fā)布至npm或私有倉庫供多團(tuán)隊共享。通過模塊化組件、統(tǒng)一設(shè)計令牌、完善文檔和自動化測試，React與Storybook的組合為構(gòu)建可擴(kuò)展、高一致性UI系統(tǒng)提供了完整解決方案。

Building a design system with Storybook and React has become a go-to approach for teams aiming to create consistent, maintainable, and scalable UIs. Storybook provides a sandbox environment to develop and test components in isolation, while React's component-based architecture fits naturally into a modular design system. Here's how to set it up effectively.

1. Set Up Storybook in a React Project

Start by initializing a React project (eg, using Vite or Create React App), then install Storybook:

 npx storybook@latest init

This command configures Storybook, adds necessary dependencies, and creates sample stories. Once installed, run:

 npm run storybook

This launches the local Storybook server, where you can view and interact with your components.

Pro tip: Use TypeScript and enforce strict typing from the start—this helps maintain consistency across your design system.

2. Structure Your Design System Components

Organize components in a logical folder structure. A common pattern:

 /src
  /components
    /Button
      Button.tsx
      Button.stories.tsx
      Button.test.tsx
      index.ts
    /Input
    /Card
  /tokens
    colors.ts
    spacing.ts
    typography.ts
  /themes
    defaultTheme.ts
  /utils
    styled-system.ts

• Tokens define design constants (colors, spacing, font sizes).
• Themes allow for theme switching and consistency.
• Utils can include helper functions for styling (eg, getColor , getSpacing ).

This separation makes it easier to scale and reuse styles.

3. Write Stories with Controls and Args

Storybook's “Args” system lets you dynamically change component props in the UI. Use args and argTypes to make stories interactive:

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

const meta: Meta<typeof Button> = {
  title: &#39;Components/Button&#39;,
  component: Button,
  tags: [&#39;autodocs&#39;],
  argTypes: {
    variant: {
      control: &#39;select&#39;,
      options: [&#39;primary&#39;, &#39;secondary&#39;, &#39;outline&#39;],
    },
    size: {
      control: &#39;radio&#39;,
      options: [&#39;sm&#39;, &#39;md&#39;, &#39;lg&#39;],
    },
  },
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    label: &#39;Click me&#39;,
    variant: &#39;primary&#39;,
    size: &#39;md&#39;,
  },
};

Now, in the Storybook UI, you can toggle props using controls—great for QA and design reviews.

4. Document with MDX and Canvas

Enhance documentation using MDX to mix Markdown with JSX. Create Button.stories.mdx :

 import { Meta, Story, Canvas } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

The Button component is used for actions. Supports multiple variants and sizes.

<Canvas>
  <Story of={ButtonStories.Primary} />
</Canvas>

Use the Canvas block to embed interactive stories. This turns Storybook into a living style guide.

5. Enforce Consistency with Addons

Leverage Storybook addons to improve quality:

• Controls : Edit props live.
• Actions : See events fired (eg, onClick ).
• Docs : Auto-generate docs.
• Accessibility : Check A11Y compliance.
• Designs : Embed Figma or Zeplin designs side-by-side.

Install them via main.ts config:

 // .storybook/main.ts
export default {
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    'storybook-addon-designs',
  ],
};

6. Test and Automate

• Write unit tests using Jest or React Testing Library.
• Use Chromatic for visual regression testing—automatically catches unintended UI changes during CI/CD.
• Publish your design system as a package (eg, with npm or a private registry) so other teams can consume it.

Final Thoughts

A React Storybook setup gives you a powerful foundation for a design system. Focus on:

• Component modularity
• Reusable design tokens
• Rich, interactive documentation
• Automated testing and review

With this workflow, your team can build UIs faster, with fewer inconsistencies.

Basically, start small, document thoroughly, and scale intentionally.

以上是用故事書創(chuàng)建設(shè)計系統(tǒng)，並進(jìn)行反應(yīng)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！