Semi Design 是字节跳动的设计系统，主张「用户中心、内容优先、对人友好」。React 实现下主蓝（#0064FA）展开 10 级色阶并配完整深色主题，4px 圆角、1px #E5E6EB 描边与 32px 紧凑控件适配高密度业务；表格、表单与长流程数据工作流被打磨得顺滑，焦点态与语义色 token 精细。适合内容与数据并重的企业级 React 产品。
Semi Design设计系统
提示词模板
基础模板
Design a Semi Design-inspired interface. - ByteDance design system with React components; - #0064FA primary blue with 10-step ramps and a full dark theme; - 4px radii, 1px #E5E6EB borders, compact 32px controls; - Dense tables, forms, and long-form data workflows; - Refined focus states and semantic color tokens. Colors: #0064FA, #E5E6EB, #F7F8FA, #1C1F23 with #0064FA accent. Typography: Inter.
变体提示词
📱 移动端
Design a mobile app with Semi Design aesthetics. Use Semi Design color identity with #0064FA accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Semi Design style. Use Semi Design color identity with #0064FA accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Semi Design design language. Use Semi Design color identity with #0064FA accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Semi Design visual identity. Use Semi Design color identity with #0064FA accents. Compelling, conversion-focused.
使用示例
Semi Design 数据仪表板
仪表板Build a data dashboard with Semi Design style: dense tables, filter forms, and #0064FA accent with dark mode support.
Semi Design 企业控制台
Web 端Create an enterprise console with Semi Design language: navigation sidebar, form workflows, and refined focus states.
✅ 适合场景
- React 项目
- 企业产品
- 深色模式应用
❌ 不适合场景
- 非 React 项目
- 重品牌个性的营销页
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。