Generate and audit design tokens with JSON and CSS outputs.
npx skills add https://github.com/arbisoft/ai-skillforge --skill design-system-arbisoft
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/arbisoft/ai-skillforge/tree/main/Claude/skills/design-system Command: npx skills add https://github.com/arbisoft/ai-skillforge --skill design-system-arbisoft
Designers and developers spend excessive time reconciling visual systems across projects; this Skill automates the creation and auditing of a design system to maintain consistency and brand fidelity.
Provide an initial design-system draft for a new project by generating tokens and a preview from the existing CSS.
High-intent search queries and answers about installing and using this skill.
To extract design tokens from existing CSS, the Skill analyzes your codebase for typography, colors, spacing, and breakpoints, then generates structured token JSON and CSS variables for integration. This automates token extraction to maintain visual consistency.
The best way to audit UI consistency is using automated design system auditing, which reviews PRs touching styling, typography, and color systems. This visual audit ensures brand fidelity by checking components against your established design tokens.
Yes, you can generate a design system for a new project by providing an initial draft. The Skill generates tokens and an interactive live preview from existing CSS, establishing a cohesive visual system to maintain consistency from the start.
Yes, the design token generator outputs both JSON and CSS variables. These token deliveries are produced alongside an interactive live preview, allowing developers to easily integrate the generated design system into their frontend design workflow.
To audit a PR that modifies spacing and color tokens, the Skill reviews the styling changes against your existing design system. It performs a visual audit to ensure the modifications maintain UI consistency and adhere to established brand fidelity standards.
ovachieverGenerate design tokens from brand colors in JSON, CSS, or SCSS.
saajunaidGenerate and validate design tokens as CSS variables across three-layer architectures.
hgxszhj-pixelApply style recipes and component mappings to PowerPoint slide designs.
tankpkgTranslate Figma designs into CSS and component structures.
