skills.rest
TeamWiseFlow
TeamWiseFlowOFFICIAL
Explore all skills by this author →
GitHub

design-system-picker

Select design systems from a predefined library using style keywords.

8.4k|1.4k|Updated Apr 24, 2024
Search Tags:#design system#style guide#brand identity#UX design#UI design
One-click install
npx skills add https://github.com/TeamWiseFlow/xiaobei --skill design-system-picker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-picker
Source: https://github.com/TeamWiseFlow/xiaobei/tree/main/addons/officials/crew/designer/skills/design-system-picker
Command: npx skills add https://github.com/TeamWiseFlow/xiaobei --skill design-system-picker

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Finding the right design system for a project can be time-consuming and overwhelming. This Skill helps you quickly identify and select the most suitable design system from a predefined library.

Core Features & Use Cases

  • Design System Selection: Search for design systems based on style keywords and select the best match.
  • Design System Details: Access detailed information about each design system's color palette, typography, and components.
  • Custom Design Systems: Import additional design systems from external sources and include them in the selection process.
  • Use Case: If you are designing a web application and need a consistent visual style, this Skill can help you choose a design system that aligns with your brand and project requirements.

Quick Start

Select a design system using the 'design-system-picker' skill. For example, to find a design system with "tech" in the style, run: ./skills/design-system-picker/scripts/pick.sh "tech"

Frequently Asked Questions about design-system-picker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose the right design system for my web application?▼

To choose a design system, you can use a picker tool that filters a predefined library based on style keywords. This helps you quickly identify a system that aligns with your brand identity and project requirements.

Can I find a design system based on specific style keywords like tech or minimal?▼

Yes, you can find a design system by searching a predefined library using specific style keywords. Running a script with your desired keyword instantly returns matching visual styles for your UI design.

How do I access color palette and typography details for a selected design system?▼

You can access detailed specifications for a design system, including its color palette, typography, and components. This information is provided directly within the picker after you select a matching style.

Can I import a custom design system into the picker for selection?▼

Yes, you can import custom design systems from external sources and include them in the selection process. This allows you to search both predefined libraries and your own imported styles.

What files do I need to use a design system picker?▼

You need access to design system files and metadata to use the picker. These files provide the necessary specifications and style keywords required to evaluate and select the correct visual style.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

roku

Provide a design system with styles, colors, typography, and components for Roku applications.

Community
Advanced
tenzirtenzir
3

tenzir-design-system

Provide design tokens, component specifications, and brand assets for Tenzir UI development.

Official
Basic
rshankrasrshankras
603

ux-spec

Generate UI/UX specifications and design system documentation from product requirements and architecture documents.

Community
Advanced
CrazySwamiCrazySwami
5

brand-guide

Generate HTML or Markdown brand guides documenting colors, typography, and responsive specs.

Community
Intermediate