skills.rest
gahoccode
gahoccodeCOMMUNITY
Explore all skills by this author →
GitHub

design-system-builder

Generate neo-brutalist design tokens and component patterns for web frameworks.

Updated Aug 27, 2026
Search Tags:#typography#framework-agnostic#design-system#component-patterns
One-click install
npx skills add https://github.com/gahoccode/PRDs --skill design-system-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-builder
Source: https://github.com/gahoccode/PRDs/tree/main/skills/brutalism
Command: npx skills add https://github.com/gahoccode/PRDs --skill design-system-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

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

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.

Frequently Asked Questions about design-system-builder

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

FAQPage Schema
How do I create a cohesive design system across multiple frameworks?▼

A framework-agnostic design system centralizes typography, color tokens, spacing, and component patterns so you apply the same visual rules in HTML, React, Vue, Svelte, or Astro. This Skill automates that construction with Space Grotesk typography, a purple/cyan/pink palette, bold shadows, and sharp borders exported as CSS variables and Tailwind config.

Can I use neo-brutalist design tokens with React, Vue, and other frameworks?▼

Yes. Neo-brutalist tokens work across any framework because they're defined as CSS variables and exported in multiple formats. Copy the globals.css into your project and reference the tokens—the component patterns adapt to HTML, React, Vue, Svelte, Astro, or any tech stack you're using.

What's included in a design system built with this Skill?▼

The Skill generates typography scales, color tokens, spacing systems, shadow definitions, and border rules plus ready-made button, card, and navigation component patterns. All tokens export as CSS variables, Tailwind configuration, and starter components for immediate implementation.

How do I implement neo-brutalist design tokens in my project?▼

Apply the design tokens from the references documentation, copy the provided globals.css file into your project, and integrate the component patterns into your HTML or framework components. The tokens standardize typography, color, spacing, shadows, and borders across your UI.

Does this design system reduce CSS inconsistency across teams?▼

Yes. Centralizing design tokens and component patterns eliminates CSS drift by establishing a single source of truth for typography, colors, spacing, borders, and shadows. Teams reference the same tokens instead of duplicating styles across projects.

What problem does a brutalist design system solve?▼

Neo-brutalist design systems provide pixel-perfect, bold visual consistency with standardized tokens and patterns, eliminating design ambiguity and reducing the time to build cohesive interfaces across HTML or any framework.

Related Skills

Explore More Design & Creative Skills→
VMRam95VMRam95

add-shadcn-component

Automate shadcn/ui component integration with dependency installation and file scaffolding.

Community
Intermediate
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
Jst-Well-DanJst-Well-Dan
8

theme-factory

Apply predefined themes with colors and typography to slides, docs, or HTML outputs.

Community
Intermediate