diff --git a/docs/miniprogram/_design/Cell.md b/docs/miniprogram/_design/Cell.md
new file mode 100644
index 0000000000..9d07a5ec62
--- /dev/null
+++ b/docs/miniprogram/_design/Cell.md
@@ -0,0 +1,57 @@
+# 单元格 Cell
+
+## 组件设计指南
+
+### 常见用法
+
+##### 常用作内容详情入口或功能入口的平铺陈列。
+
+
+
+
+
+
+
+
+
+
+
+##### 常用作同类型同格式信息项平铺陈列。
+
+
+
+
+
+
+
+
+
+
+
+
+##### 作为入口时，不建议在一个单元格内承载其他操作。
+
+
+
+
+
+
+
+
+
+
+##### 在展示多条内容较长的同类型信息时，通常从中抽取出关键信息作为标题，收纳在手风琴式折叠面板中，便于用户检索和查看。
+
+
+
+
+
+
+
+##### 在网站中，经常使用折叠面板作为分类导航，将页面进行归类、收纳在折叠面板中，展开后可点击跳转。
+
+
+
+
+
+
+
+
+
+
+##### 不建议使用右箭头作为折叠面板的展开图标，用户可能会误把它认作跳转二级页面的入口。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 当筛选维度为多选时，建议提供重置按钮，便于用户恢复到未筛选状态。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 用于承载网站、产品的联系方式，便于用户在页脚查找联系信息或查找获得客户支持的方式。
+
+
+
+
+
+
+
+##### 用于承载网站导航。
+
+
+
+
+
+
+
+##### 用于承载相关公司/品牌列表，让用户能认知合作或者旗下的品牌/公司，并提供找到他们的方式。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 通常承载图片、头像等信息进行展示，并作为查看相应信息的入口。
+
+
+
+
+
+
+
+
+
+
+
+##### 通常用于动作面板，和头像、图标按钮相结合，承载分享、保存到本地等操作。
+
+
+
+
+
+
+
+
+
+
+
+### 相似组件
+
+| 组件名 | 何时使用 |
+| :----- | :----------------------------------- |
+| [单元格](./cell) |用于各个类别行的信息展示。|
diff --git a/docs/miniprogram/_design/Popup.md b/docs/miniprogram/_design/Popup.md
new file mode 100644
index 0000000000..cdafb95b2c
--- /dev/null
+++ b/docs/miniprogram/_design/Popup.md
@@ -0,0 +1,55 @@
+# 弹出层 Popup
+
+## 组件设计指南
+
+### 常见用法
+
+##### 在筛选的场景，若筛选条件外露，通常会使用顶部弹出的弹出层；若为筛选入口，则通常触发使用右侧弹出的弹出层。
+
+
+
+
+
+
+
+
+
+##### 承载页面中某个任务操作流程，通常会使用底部弹出的弹出层。
+
+
+
+
+
+##### 承载重要提示且可能需要用户做出一些重要决策时，通常会使用中间弹出的弹出层。
+
+
+
+
+
+
+
+##### 承载较为重要的运营活动入口（如拍脸图）时，通常会使用中间弹出的弹出层。
+
+
+
+
+
+
+
+##### 承载网站、应用收折起来的导航菜单时，通常会使用左侧弹出的弹出层。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 与[下拉菜单](./dropdown-menu)组合使用，作为菜单面板下拉后的选项，供用户进行选择。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 常用于内容数据基于某个维度或某些维度的检索、筛选。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 标签文案需要经过概括和提炼，不建议过长。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 常用作同类型同格式信息项平铺陈列。
+
+
+
+
+
+
+
+
+
+
+
+
+##### 作为入口时，不建议在一个单元格内承载其他操作。
+
+
+
+
+
+
+
+
+
+
+##### 在展示多条内容较长的同类型信息时，通常从中抽取出关键信息作为标题，收纳在手风琴式折叠面板中，便于用户检索和查看。
+
+
+
+
+
+
+
+##### 在网站中，经常使用折叠面板作为分类导航，将页面进行归类、收纳在折叠面板中，展开后可点击跳转。
+
+
+
+
+
+
+
+
+
+
+##### 不建议使用右箭头作为折叠面板的展开图标，用户可能会误把它认作跳转二级页面的入口。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 当筛选维度为多选时，建议提供重置按钮，便于用户恢复到未筛选状态。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 用于承载网站、产品的联系方式，便于用户在页脚查找联系信息或查找获得客户支持的方式。
+
+
+
+
+
+
+
+##### 用于承载网站导航。
+
+
+
+
+
+
+
+##### 用于承载相关公司/品牌列表，让用户能认知合作或者旗下的品牌/公司，并提供找到他们的方式。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 通常承载图片、头像等信息进行展示，并作为查看相应信息的入口。
+
+
+
+
+
+
+
+
+
+
+
+##### 通常用于动作面板，和头像、图标按钮相结合，承载分享、保存到本地等操作。
+
+
+
+
+
+
+
+
+
+
+
+### 相似组件
+
+| 组件名 | 何时使用 |
+| :----- | :----------------------------------- |
+| [单元格](./cell) |用于各个类别行的信息展示。|
diff --git a/docs/miniprogram/design/popup.md b/docs/miniprogram/design/popup.md
new file mode 100644
index 0000000000..2fd21868f9
--- /dev/null
+++ b/docs/miniprogram/design/popup.md
@@ -0,0 +1,53 @@
+
+
+### 常见用法
+
+##### 在筛选的场景，若筛选条件外露，通常会使用顶部弹出的弹出层；若为筛选入口，则通常触发使用右侧弹出的弹出层。
+
+
+
+
+
+
+
+
+
+##### 承载页面中某个任务操作流程，通常会使用底部弹出的弹出层。
+
+
+
+
+
+##### 承载重要提示且可能需要用户做出一些重要决策时，通常会使用中间弹出的弹出层。
+
+
+
+
+
+
+
+##### 承载较为重要的运营活动入口（如拍脸图）时，通常会使用中间弹出的弹出层。
+
+
+
+
+
+
+
+##### 承载网站、应用收折起来的导航菜单时，通常会使用左侧弹出的弹出层。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 与[下拉菜单](./dropdown-menu)组合使用，作为菜单面板下拉后的选项，供用户进行选择。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 常用于内容数据基于某个维度或某些维度的检索、筛选。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### 标签文案需要经过概括和提炼，不建议过长。
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+