Skills
.Work. You
Rest

design-system-builder

Community

Create neo-brutalist UIs with tokens.

Design & Creative#typography#framework-agnostic#design-system#component-patterns
Authorgahoccode
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a framework-agnostic brutalist design system that standardizes typography, color tokens, shadows, and borders so teams can build cohesive, pixel-art-like interfaces quickly across HTML, React, Vue, Svelte, or any framework. It reduces design ambiguity and CSS drift by centralizing design tokens and component patterns.

Core Features & Use Cases

  • Design Tokens & Visual System: centralized tokens for typography, color, spacing, borders, and shadows to ensure consistency across apps.
  • Component Patterns: ready-made button, card, and navigation patterns with neo-brutalist aesthetics.
  • Framework-agnostic: apply principles in HTML/CSS or within React, Vue, Svelte, Astro, etc.
  • Implementation Checklist: simple steps to adopt: read tokens, apply patterns, use provided globals.css.

Quick Start

Apply the design tokens from references/design-tokens.md and start integrating the provided component patterns into your HTML or framework project. Copy the assets/globals.css into your project and reference the tokens to achieve a cohesive neo-brutalist look.

Dependency Matrix

Required Modules

None required

Components

assetsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-system-builder
Download link: https://github.com/gahoccode/PRDs/archive/main.zip#design-system-builder

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.