OpenViSTAI · Agents · Blockchain · Crypto
Submit a project
Menu
Agent Frameworks

Awesome Design Skills

Awesome Design Skills is a public registry of design-system instruction folders for AI-powered agentic tools, pairing SKILL.md files for agent rules with DESIGN.md files for human-readable rationale and maintenance notes.

Explore the practical guide ↓

Independent OpenViST project profile, based on linked sources.

Awesome Design Skills — OpenViST project profile in Agent Frameworks.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use the registry when an AI-assisted UI workflow needs explicit visual, component, accessibility, writing, or quality-gate guidance drawn from a design system.

Who it is for

  • Developers using AI coding tools who want UI generation guided by a selected design system.
  • Design-system maintainers who need agent-readable rules alongside human-facing rationale.
  • Teams seeking a documented starting point for packaging and contributing reusable design skills.

Documented uses

  • Browse design-system skills and select one by slug.
  • Pull a skill's agent instructions into configured tool locations.
  • Preview intended file writes or target particular providers.
  • Create a custom skill folder and prepare it for contribution.
Before you choose

Requirements & limits

The repository is public and MIT-licensed. The documented pull workflow uses the TypeUI CLI and npx.

  • A skill consists of both SKILL.md agent instructions and a DESIGN.md human-facing companion.
  • The CLI fetches SKILL.md into configured provider paths; DESIGN.md remains alongside the skill in the registry.
  • The registry describes constraints and quality gates, but those instructions are not evidence that generated code meets them.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Pull a design skill into a project

Fetch a registry skill into the configured locations for selected AI tools.

Before you start

  • Node.js package execution via npx
  • The TypeUI CLI
  • A skill slug from the registry

Steps

  1. Use the CLI list command to browse available skills and preview links.

  2. Run the command below to fetch a skill.

    Documented command
    npx typeui.sh pull

  3. Use -p cursor,claude to target named providers, or --dry-run to preview the files that would be written.

Expected outcome

The CLI fetches the skill's SKILL.md into configured provider paths; the companion DESIGN.md remains in the registry.

Guide limitations

  • The pull command fetches SKILL.md; DESIGN.md is retained in the registry for reference and maintenance.
  • The dry-run option previews intended writes rather than making them.
Documentation 1 ↗
Source-based practical guide

Create and contribute a design skill

Add a custom design-system skill to the registry through the documented contribution process.

Before you start

  • A slug for the skill folder
  • A SKILL.md file and companion DESIGN.md
  • An entry in skills/index.json

Steps

  1. Create a folder under skills/ using the skill slug.

  2. Add SKILL.md and DESIGN.md following the existing format.

  3. Add the skill entry to skills/index.json.

  4. Submit a pull request.

Expected outcome

A proposed skill is organized in the registry format and submitted for contribution.

Guide limitations

  • The instructions describe submission by pull request, not acceptance or publication.
Documentation 1 ↗
Evidence and transparency

Sources & review

Official repository ↗
Source record details
Source availability
Active
Sources checked
10 October 2026
Original website title
bergside/awesome-design-skills · Official homepage title · retained in its source language
How we review sourcesSuggest a correction