semi-design
抖音开源的企业级 React UI 组件库与设计系统。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：semi-design。 它的用途是：抖音开源的企业级 React UI 组件库与设计系统。 完整的 Skill 内容见：https://321skill.com/skills/semi-design/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用 React 开发一个管理后台，需要一个包含侧边栏导航、数据表格和表单弹窗的页面原型。”，AI可以引导你使用 Semi Design 的 Layout、Table、Modal 等组件快速搭建出界面结构，并提供配置示例代码。或者，你可以将 Figma 设计稿链接提供给AI，询问如何利用 Semi 的 D2C 工具快速生成对应的 React 代码。
介绍
Semi Design 是一个现代化、全面且灵活的设计系统和 React UI 库。它旨在连接设计（DesignOps）与开发（DevOps），帮助团队快速构建美观且一致的 React 应用。
通过提供超过 80 个高质量的 React 组件，Semi Design 覆盖了企业级应用开发的绝大多数交互场景。其核心亮点在于强大的“设计到代码”（D2C）和“代码到设计”（C2D）能力，能够在 Figma 设计稿与前端代码之间实现高效、准确的转换，极大提升了设计与研发的协作效率。
它非常适合需要快速构建中后台系统、追求设计一致性、且希望打通设计与研发流程的前端团队、全栈开发者和 UI/UX 设计师。对于从零开始构建产品的中小团队，Semi Design 提供了完整的开箱即用解决方案；对于已有设计体系的大团队，其基于 Design Token 的系统架构也易于定制和扩展。
使用建议：建议与 Figma 配合使用，以充分发挥其设计-开发联动的优势。对于国际化、无障碍访问（A11y）或 SSR 有要求的项目，Semi Design 提供了原生支持。由于其组件库较为庞大，在轻量级项目中使用时，可考虑按需引入以优化打包体积。
核心特点
核心区别在于其深度集成的“设计-代码”双向工作流：不仅支持从 Figma 设计稿一键生成代码（D2C），还能根据代码中的主题配置自动生成对应的 Figma UI Kit（C2D），真正实现了设计与开发的无缝衔接与一致性维护。
注意事项
作为一套企业级 UI 库，其体积和复杂度可能不适合对包体积有极致要求的超轻量级 H5 或营销页面开发。
常见问题
Semi Design 和 Ant Design 有什么区别？
Semi Design 由抖音团队出品，在设计语言和组件细节上有所不同，其最大的特色是提供了与 Figma 深度集成的设计-代码双向转换工具链，这是其区别于其他 UI 库的核心能力。
支持 Vue 或 Angular 吗？
目前 Semi Design 主要专注于 React 生态，官方未提供 Vue 或 Angular 版本。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/semi-design/raw/index.md 读取 semi-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/semi-design/raw/index.md（查看排版版本）