diff --git a/example/pages/capsule/index.wxss b/example/pages/capsule/index.wxss
new file mode 100644
index 00000000..1141c678
--- /dev/null
+++ b/example/pages/capsule/index.wxss
@@ -0,0 +1,3 @@
+.zan-capsule + .zan-capsule {
+ margin-left: 10px;
+}
diff --git a/packages/badge/README.md b/packages/badge/README.md
new file mode 100644
index 00000000..c67972f6
--- /dev/null
+++ b/packages/badge/README.md
@@ -0,0 +1,21 @@
+## Badge 徽章
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+```html
+
+ 10
+
+```
+
+```css
+.badge-container {
+ width: 100px;
+ height: 100px;
+}
+```
diff --git a/packages/btn/README.md b/packages/btn/README.md
new file mode 100644
index 00000000..6ac40453
--- /dev/null
+++ b/packages/btn/README.md
@@ -0,0 +1,40 @@
+## Button 按钮
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+
+#### 基础用法
+```html
+
+```
+
+#### 按钮类型
+按钮支持额外的三种类型 primary, danger, warn
+```html
+
+
+
+```
+
+#### 按钮大小
+按钮支持额外三种大小 large, small, mini
+```html
+
+
+
+```
+
+#### 其他
+按钮支持镂空状态，可以直接使用 zan-btn--plain
+```html
+
+```
+同时支持加载状态，可以使用 zan-btn--loading 获得
+```html
+
+```
diff --git a/packages/capsule/README.md b/packages/capsule/README.md
new file mode 100644
index 00000000..dfa17018
--- /dev/null
+++ b/packages/capsule/README.md
@@ -0,0 +1,32 @@
+## Capsule 胶囊
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的模板里引入组件库模板
+```html
+
+```
+
+### 代码演示
+
+#### 基础用法
+可以用 leftText 和 rightText 控制左右文案
+```html
+
+```
+
+#### 使用不同类型胶囊
+按钮支持额外的三种类型 primary, danger, warn
+```html
+
+```
+
+#### 自定义颜色
+通过 color 熟悉，可以自定义显示的颜色
+```html
+
+```
diff --git a/packages/capsule/index.wxml b/packages/capsule/index.wxml
index da86deba..8306b99f 100644
--- a/packages/capsule/index.wxml
+++ b/packages/capsule/index.wxml
@@ -9,4 +9,4 @@
{{ rightText }}
-
\ No newline at end of file
+
diff --git a/packages/card/README.md b/packages/card/README.md
new file mode 100644
index 00000000..e9c548ed
--- /dev/null
+++ b/packages/card/README.md
@@ -0,0 +1,49 @@
+## Card 卡片
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+
+#### 基础用法
+卡片可以用于左侧图片，右侧描述信息的展示。
+`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示
+如下，是一个商品信息的展示：
+```html
+
+
+
+
+
+
+
+
+
+
+
+ ¥ 999.99
+
+ 红烧牛肉【虚拟商品】【有库存】【有sku】
+
+
+
+
+ x2
+
+ 3000克 50%
+
+
+
+
+ 已发货
+
+
+
+```
+
diff --git a/packages/cell/README.md b/packages/cell/README.md
new file mode 100644
index 00000000..4129159d
--- /dev/null
+++ b/packages/cell/README.md
@@ -0,0 +1,54 @@
+## Cell 单元格
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+
+#### 基础用法
+`zan-cell` 有三部分组成：
+顶部 Icon：`zan-cell__icon`
+主内容区：`zan-cell__bd`
+附属内容：`zan-cell__ft`
+
+```html
+
+
+ 单行列表
+ 详细信息
+
+```
+
+当然，也可以在内容区增加附加描述
+```html
+
+
+ 单行列表
+ 附加描述
+
+ 详细信息
+
+```
+
+#### 带箭头的单元格
+在根元素上增加 `zan-cell--access`，可以在右侧显示出箭头。
+```html
+
+ 单行列表
+
+
+```
+
+#### 带开关的单元格
+增加 `zan-cell--switch`，更好的适配带有开关的情况
+```html
+
+ 开关
+
+
+
+
+```
diff --git a/scripts/utils/extracter.js b/scripts/utils/extracter.js
index 41a0e289..32d5a1e9 100644
--- a/scripts/utils/extracter.js
+++ b/scripts/utils/extracter.js
@@ -1,3 +1,4 @@
+const path = require('path');
const fs = require('fs-extra');
const nodeWatch = require('node-watch');
require('shelljs/global');
@@ -18,7 +19,8 @@ function extracter(config = {}) {
// 复制 src
fs.copySync(config.src, config.dist, {
filter(src = '') {
- return src.indexOf('.pcss') < 0;
+ const extname = path.extname(src);
+ return ['.pcss', '.md'].indexOf(extname) < 0;
}
});