design-system
by alirezarezvani (GitHub) in alirezarezvani/claude-skills
What it does
Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output directory + syntax theme + TOC behavior + optional logo/company), validates body-text and link contrast ag
Quoted from the skill's SKILL.md under its MIT license.
Install
git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git /tmp/claude-skills mkdir -p ~/.claude/skills/ cp -r /tmp/claude-skills/markdown-html/skills/design-system ~/.claude/skills/design-system
The command copies the skill from the author's repo. SkillTrove does not host it.
Files
- SKILL.md
- assets/design_system_schema.json
- references/design_token_canon.md
- references/typography_pairing.md
- references/wcag_accessibility.md
- scripts/brand_palette_validator.py
- scripts/config_loader.py
- scripts/onboard.py
Source: https://github.com/alirezarezvani/claude-skills/tree/main/markdown-html/skills/design-system. Checked 2026-10-13.
Similar skills
api-and-interface-design
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, def...
code-review-and-quality
Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to ...
constraint-driven-development
Establishes a project's quality bar as a written contract and stops agents quietly lowering it. Interviews the user on which dimensions matter, supplies sane...
documentation-and-adrs
Records decisions and documentation. Use when you need to document an architecture decision (ADR) or the reasoning behind a design choice, when changing publ...
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing lay...
git-workflow-and-versioning
Structures git workflow practices. Use when making any code change. Use when committing, branching, resolving conflicts, splitting uncommitted work in a mess...