# DouyinFE/semi-design

🚀A modern, comprehensive, flexible design system and React UI library, AI-friendly built-in.🎨Provide 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design.🧑🏻‍💻 Design to Code in one click

Repository: https://github.com/DouyinFE/semi-design
Canonical: https://ross.abutalabs.com/products/semi-design
Homepage: https://semi.design
Language: TypeScript
License: NOASSERTION
License Family: other
Topics: react, ui-libary, design-system, dark-mode, design2code, code2design, designops, theme, designtocode, figma-plugin, ai-friendly
Last push: 2026-08-21T06:59:09+00:00

## Health v2 (maintenance only)
Score: 84/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 98, release rhythm 57, longevity 100
- inputs: {"age_days": 1773, "days_push": 12, "days_rel": 288, "gap_med": 4, "n_releases_24m": 26}
- flags: no_license
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 10318, forks 846 (observed 2026-08-28T04:10:41.604030+00:00)

## What it is
Semi Design is a modern, comprehensive React UI library and design system maintained by Douyin (TikTok) frontend team, offering 80+ high-quality components with 3000+ design tokens for deep theming. It includes Design-to-Code (Figma to code) and Code-to-Design tooling, full accessibility, i18n/RTL support, SSR compatibility, and AI-friendly components.

## Use cases
- build a react app with a component library
- customize a design system with design tokens
- convert figma designs to react code
- build accessible and internationalized web apps
- create a branded theme for a react ui
- build ai chat interfaces in react
- use ui components inside shadow dom for browser extensions

## When to choose
- you need a comprehensive React component library with strong theming and design token support
- your team wants to bridge design and code with Figma D2C/C2D workflows
- you need built-in accessibility, i18n, RTL, and SSR support
- you are building AI chat or bot interfaces and want ready-made AI components

## When to avoid
- you use Vue, Angular, or Svelte rather than React
- you need a minimal, unstyled headless component set
- your project requires a permissive OSI license (license is non-standard)
- you prefer a very lightweight library with a small bundle footprint

## Facets
- artifact type: library
- maturity: active
- function: ui-components, frontend-framework, theme, internationalization, accessibility, ssr
- domain: web-development, frontend, web-design, developer-tools
- platform: browser, cross-platform
- tags: react, design-system, design-tokens, figma-plugin, design-to-code, dark-mode, typescript, ai-friendly, web-components, bytedance, web-server, nodejs

## Member repositories
- DouyinFE/semi-design (main) score 84

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:10:41.604030+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:19:10.756547+00:00, confidence not recorded.
  - readme: https://github.com/DouyinFE/semi-design (fetched 2026-08-28T04:10:41.604030+00:00, sha eab528594f27)
  - homepage: https://semi.design (fetched 2026-08-29T08:18:57.690557+00:00, sha 94f29828fc32)
  - site_page: https://semi.design/zh-CN/start/getting-started (fetched 2026-08-29T08:18:57.694450+00:00, sha 1bc13ac5ed17)
- Data as of 2026-08-30T08:39:29.467469+00:00.