creative

Name: creative
Availability: InStock
Author: superpollo02

Generate design-system guidance for playful landing page UIs with tokens and WCAG 2.2 AA rules.

Updated May 13, 2026

Search Tags:#typography #accessibility #design-system #landing-pages #interaction-states #playful-ui #token-guided

Ready to run

npx skills add https://github.com/superpollo02/awesome-design-skill --skill creative-superpollo02

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: creative
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/creative
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill creative-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you implement a consistent, playful design system for creative landing pages so your UI looks intentional and stays accessible.

Core Features & Use Cases

Playful style foundations: Defines a character-driven visual direction using Bangers typography and a vibrant color palette.
Token-first guidance: Uses explicit tokens for primary/secondary colors, text/surface, spacing, and rounded corners to keep implementations consistent.
Accessible interaction rules: Enforces WCAG 2.2 AA and keyboard-first interactions with visible focus states.

Quick Start

Use the creative skill to generate engineering-ready design-system guidance for a landing page UI that follows its typography, color, spacing, and accessibility rules.

Frequently Asked Questions about creative

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

FAQPage Schema

How do I build a playful landing page UI that stays accessible?▼

To build a playful landing page UI that stays accessible, apply a token-guided design system with explicit spacing rhythm, WCAG 2.2 AA compliant interaction states, and keyboard-first navigation rules to ensure visual hierarchy remains consistent and usable.

What is token-guided design and how does it work for creative components?▼

Token-guided design defines explicit values for primary and secondary colors, text, surface, spacing, and rounded corners. It works by anchoring component behavior and visual hierarchy to these tokens, ensuring consistent implementation across responsive layouts.

How do I maintain visual hierarchy across responsive layouts with bold typography?▼

Maintain visual hierarchy across responsive layouts by anchoring bold typography to a defined spacing rhythm and token-guided color palette. This approach ensures character-driven UI components scale consistently while preserving the playful design direction.

Can I use this design system for keyboard-first interactions without breaking WCAG 2.2 AA?▼

Yes, this design system enforces WCAG 2.2 AA compatibility for keyboard-first interactions. It provides explicit component state rules and visible focus states, ensuring accessible navigation without sacrificing the playful visual style.

Does this playful UI approach work for non-landing page creative projects?▼

Yes, the token-guided design system applies to any creative project needing consistent component behavior and spacing rhythm. While optimized for landing pages, its explicit do/don't patterns and accessibility rules scale to various responsive layouts.

What are the limitations of using bold typography for accessible UI components?▼

Bold, character-driven typography can introduce accessibility limitations if not properly paired with token-guided contrast ratios and spacing rhythm. Explicit do/don't patterns and visible focus states are required to prevent keyboard-first interaction failures under WCAG 2.2 AA rules.