Bladeren bron

docs: update readme

pointhalo 2 jaren geleden
bovenliggende
commit
5a03209c5e
2 gewijzigde bestanden met toevoegingen van 33 en 20 verwijderingen
  1. 17 10
      README-zh_CN.md
  2. 16 10
      README.md

+ 17 - 10
README-zh_CN.md

@@ -3,7 +3,7 @@
     <p align="center"><img width="300" src="https://lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/SemiLogo/Logo_1576122865926.png" /></p>
     <h1 style="width: 100%; text-align: center;">Semi-UI</h1>
     <p>
-        现代、全面、灵活的设计系统和 UI 库。 快速搭建美观的 React 应用。
+        现代、全面、灵活的设计系统和 UI 库。 致力打通 DesignOps & DevOps ,快速搭建美观的 React 应用。
     </p>
 </article>
     
@@ -44,11 +44,15 @@
 
 # 🎉 特性
 
-- 💪 58+高质量组件
-- 💅 强大的主题定制,多达两千多个 Design Token,深入定制每一处细节
-- 🌍 国际化支持 14 种语言
-- 👏 使用 TypeScript,良好的类型定义
+- 💪 60+高质量组件
+- 💕 完善的无障碍支持,为所有组件提供遵循 W3C 标准的键盘交互、焦点管理和语义化
+- 🎨 设计系统管理工具 Semi DSM,多达2000+ Design Token,快速定制你的专属设计系统
+- 🌍 国际化支持 17 种语言,提供完备的多语言、多时区、RTL支持
+- 💅 Code2Design,根据不同主题自动生成 Figma UI Kit,保持代码与设计同源
+- 🚀 强大的 Design2Code支持,设计稿一键转代码,快速构建应用
+- ⚙️ 稳定的质量保障,覆盖单元测试、E2E测试、视觉回归测试等多种测试手段
 - 🥳 支持 SSR
+- 👏 使用 TypeScript, 良好的类型定义,基于 Foundation / Adapter 架构,源码易于阅读 / 贡献
 
 # 🔥 安装
 
@@ -71,10 +75,10 @@ import ReactDOM from 'react-dom';
 import { Button, Switch } from '@douyinfe/semi-ui';
 
 const App = () => (
-  <>
-    <Button type='primary'>primary button</Button>
-    <Switch size='large' />
-  </>
+    <>
+        <Button type='primary'>primary button</Button>
+        <Switch size='large' />
+    </>
 );
 
 ReactDOM.render(<App />, document.querySelector('#app'));
@@ -83,10 +87,13 @@ ReactDOM.render(<App />, document.querySelector('#app'));
 [Semi UI 官网](https://semi.design) 拥有上千个支持实时调试的例子,欢迎体验使用。
 
 # 📌 文档
-
+* [Semi DSM](https://semi.design/dsm)
+* [Semi Design2Code](https://semi.design/code)
+* [Semi Figma Plugin](https://www.figma.com/community/plugin/1166339852662786534/Semi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81)
 * [快速开始](https://semi.design/zh-CN/start/getting-started)
 * [组件总览](https://semi.design/zh-CN/start/overview)
 * [自定义主题](https://semi.design/zh-CN/start/customize-theme)
+* [DSM主题商店](https://semi.design/dsm_store)
 * [Design Tokens](https://semi.design/zh-CN/basic/tokens)
 * [暗色模式](https://semi.design/zh-CN/start/dark-mode)
 * [Icons](https://semi.design/zh-CN/basic/icon)

+ 16 - 10
README.md

@@ -3,7 +3,7 @@
     <p align="center"><img width="300" src="https://lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/SemiLogo/Logo_1576122865926.png" /></p>
     <h1 style="width: 100%; text-align: center;">Semi-UI</h1>
     <p>
-        A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps.
+        A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps.
     </p>
 </article>
     
@@ -45,10 +45,14 @@ English | [简体中文](./README-zh_CN.md)
 
 # 🎉 Features
 
-- 💪 Up to 58 high-quality Components.
-- 💅 2000+ Design Tokens. Flexible custom render structure. Build your own design system.
-- 🌍 Internationalization Support for Dozens of Languages.
-- 👏 Written in Typescript, Friendly Static Type Support.
+- 💪 Up to 60+ high-quality Components.
+- 💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components
+- 💅 Design system management Semi DSM, up to 2000+ Design Tokens, build your own design system quickly.
+- 🌍 Internationalization Support for Dozens of Languages, timezone, RTL support
+- 💅 Code2Design, automatically generate Figma UI Kit according to different themes, keep same between design and code
+- 🚀 Powerful Design2Code support, convert figma draft to code in a few seconds
+- ⚙️ Strict quality assurance, covering unit testing, E2E testing, visual testing
+- 👏 Written in Typescript, friendly Static Type Support. Based on Foundation/Adapter architecture, easy to read and contribute
 - 🥳 SSR (Server Side Rendering) Compatible.
 
 # 🔥 Install
@@ -72,10 +76,10 @@ import ReactDOM from 'react-dom';
 import { Button, Switch } from '@douyinfe/semi-ui';
 
 const App = () => (
-  <>
-    <Button type='primary'>primary button</Button>
-    <Switch size='large' />
-  </>
+    <>
+        <Button type='primary'>primary button</Button>
+        <Switch size='large' />
+    </>
 );
 
 ReactDOM.render(<App />, document.querySelector('#app'));
@@ -84,7 +88,9 @@ ReactDOM.render(<App />, document.querySelector('#app'));
 And [Semi UI Doc Site](https://semi.design/en-US/) has hundreds of editable examples and live preview, welcome to play with those examples.
 
 # 📌 Documentation
-
+* [Semi DSM](https://semi.design/dsm)
+* [Semi Design2Code](https://semi.design/code)
+* [Semi Figma Plugin](https://www.figma.com/community/plugin/1166339852662786534/Semi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81)
 * [Quick Start](https://semi.design/zh-CN/start/getting-started)
 * [Components Overview](https://semi.design/zh-CN/start/overview)
 * [Customizing Themes](https://semi.design/zh-CN/start/customize-theme)