---
title: "Vital UI Kit - Neil 的作品集"
description: "一個優雅且容易客製化的前端 UI 框架。"
canonical_url: "https://neillin.com/products/vital-ui-kit/"
meta:
  author: Neil
  keywords: "UI Kit, UI 框架, 設計系統"
  "og:description": "一個優雅且容易客製化的前端 UI 框架。"
  "og:image": "https://neillin.com/images/vitaluikit-thumbnail.webp"
  "og:title": "Vital UI Kit - Neil 的作品集"
---

> Index of every page on this site: [llms.txt](https://neillin.com/llms.txt)

:::

# Vital UI Kit

![Vital UI Kit](https://neillin.com/images/vitaluikit-thumbnail.webp)

*Vital UI Kit*

## 概要

一個優雅且容易客製化的前端 UI 框架。

  

### 目標

- 建造設計系統
- 屬於台灣開源的 UI Kit
- 建造工程師與設計師之謙的橋樑

### 角色

- UX
- 切版

### 工具

- Sketch app
- Fabricator

## 過程

### 觀察

- jQuery UI
- Bootstrap
- Foundation
- Semantic UI
- Material UI

### 學習

- 什麼是設計系統？
- 什麼是 UI kit？
- 有什麼競品？
- 誰會使用？
- 為什麼台灣沒有開源 UI Kit？

### 研究

- 研究前述各大前端 UI 框架設計稿與切版如何搭配。
- 研研究 Sketch App 設計稿管理與協作規則制定，例如參數設定等。
- 研究 CSS 管理與命名規則。
- 研究融合 設計稿 與 CSS 命名規則，方便一眼便知是哪個元件。
- 研究以何種方式建立 Document 網站內容。
- 研究LandingPage 文案、個性朔造。

## 產出

![使用 Fabricator 建立文件](https://neillin.com/images/vitaluikit-docs.webp)

*使用 Fabricator 建立文件*

![Sketch App 檔案 Button 元件示意圖](https://neillin.com/images/vitaluikit-sketch.webp)

*Sketch App 檔案 Button 元件示意圖*

## 相關連結

### 網站

1. [Vitals UI Kit](https://vitaluikit.com/ "(另開視窗) 前往  Vitals UI Kit")

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://neillin.com/#website","@type":"WebSite","inLanguage":"zh-Hant-TW","name":"Neil 的作品集","url":"https://neillin.com/","workTranslation":{"@id":"https://neillin.com/en/#website"}},{"@id":"https://neillin.com/products/vital-ui-kit/#webpage","@type":"WebPage","description":"一個優雅且容易客製化的前端 UI 框架。","name":"Vital UI Kit","url":"https://neillin.com/products/vital-ui-kit/","isPartOf":{"@id":"https://neillin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://neillin.com/products/vital-ui-kit/"]}]},{"@id":"https://neillin.com/#person","@type":"Person","jobTitle":"UI/UX 設計師","name":"Neil Lin","url":"https://neillin.com/","sameAs":["https://github.com/Neil-Lin"]},{"@id":"https://neillin.com/products/vital-ui-kit/#/schema/creative-work/1","@type":"CreativeWork","dateModified":"2025-08-06T00:00:01.000Z","datePublished":2016,"description":"一個優雅且容易客製化的前端 UI 框架。","inLanguage":"zh-Hant-TW","keywords":"UI Kit, UI 框架, 設計系統","name":"Vital UI Kit","url":"https://neillin.com/products/vital-ui-kit/","author":{"@type":"Person","name":"Neil Lin"},"image":{"@id":"https://neillin.com/#/schema/image/1"}},{"@id":"https://neillin.com/products/vital-ui-kit/#/schema/breadcrumb-list/1","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"回首頁","item":"https://neillin.com/"},{"@type":"ListItem","position":2,"name":"產品","item":"https://neillin.com/products/"},{"@type":"ListItem","position":3,"name":"Vital UI Kit","item":"https://neillin.com/products/vital-ui-kit/"}]},{"@id":"https://neillin.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://neillin.com/images/vitaluikit-thumbnail.webp","inLanguage":"zh-Hant-TW","url":"https://neillin.com/images/vitaluikit-thumbnail.webp"}]}
```

## Sitemap

See the full [sitemap](https://neillin.com/sitemap.md) for all pages.