docs: refactor design resources link

README.md

@@ -66,7 +66,7 @@ Naive UI recommends using [xicons](https://www.xicons.org) as icon library.
 
 ### Design Resources
 
-[Naive UI Design](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch).
+[Naive UI (Sketch)](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch).
 
 ## Contributing
 

README.zh-CN.md

@@ -66,7 +66,7 @@ naive-ui 建议使用 [xicons](https://www.xicons.org) 作为图标库。
 
 ### 设计资源
 
-[Naive UI 设计](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch)。
+[Naive UI (Sketch)](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch)。
 
 ## 贡献
 

demo/pages/docs/installation/enUS/index.md

@@ -22,26 +22,28 @@ naive-ui recommends using [xicons](https://www.xicons.org) as icon library.
 
 ## Design Resources
 
-
-<n-card :content-style="{padding: 0}" style="width: 420px; max-width: 100%;">
+<n-card size="small" footer-style="text-align: center;" style="width: 420px; max-width: 100%;">
   <template #cover>
     <img src="https://naive-ui.oss-accelerate.aliyuncs.com/naive-design.png">
   </template>
-  <n-text
-    tag="a"
-    href="https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch" 
-    download
-    strong
-    style="display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; text-decoration: none;"
-  >
-    Naive UI Design
-    <n-icon :size="20" style="margin-left: 8px;">
-      <MdDownload />
-    </n-icon>
-  </n-text>
+  <template #footer>
+    <n-button
+      tag="a"
+      href="https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch"
+      text
+      target="_blank"
+      icon-placement="right"
+    >
+      Naive UI (Sketch)
+      <template #icon>
+        <n-icon >
+          <ArrowDownload16Regular />
+        </n-icon>
+      </template>
+    </n-button>
+  </template>
 </n-card>
 
-
 ```component
-MdDownload: import { MdDownload } from '@vicons/ionicons4'
-```
+ArrowDownload16Regular: import ArrowDownload16Regular from '@vicons/fluent/ArrowDownload16Regular'
+```

demo/pages/docs/installation/zhCN/index.md

@@ -24,25 +24,28 @@ naive-ui 建议使用 [xicons](https://www.xicons.org) 作为图标库。
 
 ## 设计资源
 
-<n-card :content-style="{padding: 0}" style="width: 420px; max-width: 100%;">
+<n-card size="small"  footer-style="text-align: center;" style="width: 420px; max-width: 100%;">
   <template #cover>
     <img src="https://naive-ui.oss-accelerate.aliyuncs.com/naive-design.png">
   </template>
-  <n-text
-    tag="a"
-    href="https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch" 
-    download
-    strong
-    style="display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; text-decoration: none;"
-  >
-    Naive UI 设计
-    <n-icon :size="20" style="margin-left: 8px;">
-      <MdDownload />
-    </n-icon>
-  </n-text>
+  <template #footer>
+    <n-button
+      tag="a"
+      href="https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch"
+      text
+      target="_blank"
+      icon-placement="right"
+    >
+      Naive UI (Sketch)
+      <template #icon>
+        <n-icon >
+          <ArrowDownload16Regular />
+        </n-icon>
+      </template>
+    </n-button>
+  </template>
 </n-card>
 
-
 ```component
-MdDownload: import { MdDownload } from '@vicons/ionicons4'
+ArrowDownload16Regular: import ArrowDownload16Regular from '@vicons/fluent/ArrowDownload16Regular'
 ```