---
title: "Piman A11Y UI Framework - Neil's portfolio"
description: "Piman is an open-source UI framework based on Vue, with a focus on accessible web design"
canonical_url: "https://neillin.com/en/products/piman/"
meta:
  author: Neil
  keywords: "Accessibility, UI Kit, UI Framework, Vue, Nuxt"
  "og:description": "Piman is an open-source UI framework based on Vue, with a focus on accessible web design"
  "og:image": "https://neillin.com/images/piman-thumbnail.webp"
  "og:title": "Piman A11Y UI Framework - Neil's portfolio"
---

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

:::

# Piman A11Y UI Framework

![Piman A11Y UI Framework](https://neillin.com/images/piman-thumbnail.webp)

*Piman A11Y UI Framework*

## summary

In recent years, the concept of user-centric design has become deeply ingrained, and this mindset has started to spread to the field of accessible web design. By continuously improving the user-friendliness of web pages, the core concept of universal design, "Design for All", can be achieved.Piman was created with this purpose in mind, starting with the improvement of web pages that people encounter frequently in their daily lives. Therefore, the primary task is to promote the use of Piman by developers in the development of government agency websites, and subsequently apply it to products, official websites, and other areas. In doing so, businesses can fulfill their social responsibilities and align with international trends.

  

### target

- Achieving universal design for web pages.
- Open Source
- Design System

### roles

- PM
- UI
- UX
- Layout

### tools

- Figma
- Github
- npm
- Notion

## process

### observe

- IBM Carbon
- Bootstrap 5
- Vital Ui Kit
- Material Design 3

### learn

- Through this project, we aim to delve deeper into the knowledge and techniques of accessible web design.
- The knowledge required for development of open-source software.
- Universal Design

## output

- Design System
- Design Document
- Develop Document
- Figma
- Nuxt Template
- Backstage Template
- Codesandbox

![Piman V3 Baclstage Template](https://neillin.com/images/piman-v3-design-system.webp)

*Piman V3 Baclstage Template*

![Piman V3 Button](https://neillin.com/images/piman-v3-button.webp)

*Piman V3 Button*

![Piman V3 Design System](https://neillin.com/images/piman-v3-backstage-template.webp)

*Piman V3 Design System*

## links

### website

1. [Piman V2 Github](https://github.com/ya-sai/piman "(open another Window) Go to  Piman V2 Github")
2. [Piman V3 Github](https://github.com/BPbase/piman "(open another Window) Go to  Piman V3 Github")
3. [Piman V3 Demo(Backstage and Components)](https://bpbase.github.io/piman/demo/#/ "(open another Window) Go to  Piman V3 Demo(Backstage and Components)")
4. [Piman Official Website](https://bpio.gitbook.io/piman "(open another Window) Go to  Piman Official Website")
5. [Piman Design System Community](https://www.figma.com/community/file/1182586164850970870 "(open another Window) Go to  Piman Design System Community")
6. [Piman Backstage Template](https://www.figma.com/community/file/1210126707767575165 "(open another Window) Go to  Piman Backstage Template")
7. [Material Design 3](https://m3.material.io/ "(open another Window) Go to  Material Design 3")
8. [IBM Carbon](https://carbondesignsystem.com/ "(open another Window) Go to  IBM Carbon")
9. [Bootstrap 5](https://getbootstrap.com/ "(open another Window) Go to  Bootstrap 5")
10. [Vital UI Kit](https://vitaluikit.com/ "(open another Window) Go to  Vital UI Kit")
11. [Open Source Guideline](https://opensource.guide/ "(open another Window) Go to  Open Source Guideline")
12. [Taiwan moda a11y](https://accessibility.moda.gov.tw/ "(open another Window) Go to  Taiwan moda a11y")

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://neillin.com/en/#website","@type":"WebSite","inLanguage":"en-US","name":"Neil's portfolio","url":"https://neillin.com/en/","translationOfWork":{"@id":"https://neillin.com/#website"}},{"@id":"https://neillin.com/en/products/piman/#webpage","@type":"WebPage","description":"Piman is an open-source UI framework based on Vue, with a focus on accessible web design","name":"Piman A11Y UI Framework","url":"https://neillin.com/en/products/piman/","isPartOf":{"@id":"https://neillin.com/en/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://neillin.com/en/products/piman/"]}]},{"@id":"https://neillin.com/en/#person","@type":"Person","jobTitle":"UI/UX Designer","name":"Neil Lin","url":"https://neillin.com/en/","sameAs":["https://github.com/Neil-Lin"]},{"@id":"https://neillin.com/en/products/piman/#/schema/creative-work/1","@type":"CreativeWork","dateModified":"2025-08-06T00:00:01.000Z","datePublished":2021,"description":"Piman is an open-source UI framework based on Vue, with a focus on accessible web design","inLanguage":"en","keywords":"Accessibility, UI Kit, UI Framework, Vue, Nuxt","name":"Piman A11Y UI Framework","url":"https://neillin.com/en/products/piman/","author":{"@type":"Person","name":"Neil Lin"},"image":{"@id":"https://neillin.com/#/schema/image/1"}},{"@id":"https://neillin.com/en/products/piman/#/schema/breadcrumb-list/1","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"home page","item":"https://neillin.com/"},{"@type":"ListItem","position":2,"name":"Products","item":"https://neillin.com/products/"},{"@type":"ListItem","position":3,"name":"Piman A11Y UI Framework","item":"https://neillin.com/en/products/piman/"}]},{"@id":"https://neillin.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://neillin.com/images/piman-thumbnail.webp","inLanguage":"en-US","url":"https://neillin.com/images/piman-thumbnail.webp"}]}
```

## Sitemap

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