Enforce a token-based design system with WCAG AA accessibility checks for frontend UI.
npx skills add https://github.com/vendeesign/codebloom --skill design-vendeesign
Please help me install this Agent Skill. Skill: design Source: https://github.com/vendeesign/codebloom/tree/main/skills/design Command: npx skills add https://github.com/vendeesign/codebloom --skill design-vendeesign
AI-generated UI frequently yields generic, inconsistent visuals and accessibility gaps. The Design Skill defines a distinctive design language and guardrails to keep interfaces cohesive, accessible, and on-brand.
Create and apply a distinctive design system to a current UI, focusing on typography, color, spacing, and accessibility while removing generic UI slop.
High-intent search queries and answers about installing and using this skill.
To prevent generic UI visuals, apply a formal design system with token-based theming for color, typography, spacing, and motion. This enforces a distinctive design language and guardrails against overused visuals, keeping landing pages and dashboards cohesive and on-brand.
A token-based design system works by defining reusable variables for color, typography, spacing, and motion. Applying these tokens to frontend components ensures design consistency across reusable UI elements and prevents visual drift during rapid prototyping.
To ensure WCAG AA accessibility compliance, apply automated guardrails that check color contrast and spacing in your design system. This prevents accessibility issues and poor contrast in generated UI components before they ship.
Yes, you can refine existing UI components by applying a distinctive design language with formal guardrails. This removes generic design slop by enforcing consistent typography, color systems, and spacing across your current interface.
The best way to establish a consistent color system and typography for product dashboards is to define token-based themes. This formal approach maintains visual consistency and prevents accessibility gaps across complex dashboard layouts.
AI-generated UI looks inconsistent and lacks motion design standards when it lacks a formal design system. Defining tokens for motion and spacing enforces design consistency and prevents the sloppy, generic visuals typical of unguided generation.
guideopsProvide editorial design guidelines with typography scales and color tokens.
dev-mirzabicerTranslate design briefs into production-ready frontend UI components.
boomNDSCreate cohesive visual design systems with tokens, typography, color, spacing, and iconography.
josephblaisValidate design system tokens against WCAG AA/AAA accessibility standards.
