ui-design-system
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/alirezarezvani/ui-design-systemWhat This Skill Does
The ui-design-system skill is a comprehensive toolkit engineered for Senior UI Designers and front-end engineers. It serves as a centralized hub for managing design infrastructure within the OpenClaw environment. The skill enables users to generate industry-standard design tokens, build robust color palettes, establish typography scales based on the 8pt grid system, and automate the creation of CSS/SCSS variables. By bridging the gap between design theory and technical implementation, it allows users to maintain perfect visual consistency across complex applications while drastically reducing the time spent on manual documentation and developer handoff preparation.
Installation
To integrate this system into your OpenClaw environment, execute the following installation command in your terminal:
clawhub install openclaw/skills/skills/alirezarezvani/ui-design-system
Ensure your local environment has the required permissions for file system interactions, as the skill generates output files directly to your project directory.
Use Cases
- Design System Foundations: Kickstarting a project by converting a single brand color into a full semantic token set.
- Accessibility Audits: Automatically verifying color contrast ratios against WCAG 2.1 AA/AAA standards.
- Developer Handoff: Exporting design tokens into formatted CSS, SCSS, or JSON files, ensuring that the visual representation in code perfectly matches the Figma design documentation.
- Responsive Architecture: Calculating fluid typography scales and spacing systems that adapt seamlessly across mobile, tablet, and desktop breakpoints.
Example Prompts
- "Generate a modern design token set for primary color #2563EB and export them as CSS variables."
- "Create an 8pt grid-based spacing scale and document the primary, secondary, and semantic color palette for my new dashboard project."
- "Check the contrast ratio for my current primary button color #0066CC against white and suggest an alternative if it fails WCAG AA standards."
Tips & Limitations
- Precision: While the skill handles complex calculations, always manually review the generated contrast ratios to ensure they meet your specific brand requirements.
- Integration: For the best results, use the JSON output format when importing your tokens into Figma via plugins or sync tools.
- Scalability: The script is optimized for web-based design systems; customization for native mobile frameworks might require additional post-processing steps.
- Updates: Periodically re-run the token generation workflow whenever your brand guidelines or accessibility compliance requirements change.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-alirezarezvani-ui-design-system": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution
Related Skills
intl-expansion
International market expansion strategy. Market selection, entry modes, localization, regulatory compliance, and go-to-market by region. Use when expanding to new countries, evaluating international markets, planning localization, or building regional teams.
marketing-strategy-pmm
Product marketing skill for positioning, GTM strategy, competitive intelligence, and product launches. Use when the user asks about product positioning, go-to-market planning, competitive analysis, target audience definition, ICP definition, market research, launch plans, or sales enablement. Covers April Dunford positioning, ICP definition, competitive battlecards, launch playbooks, and international market entry. Produces deliverables including positioning statements, battlecard documents, launch plans, and go-to-market strategies.
paid-ads
When the user wants help with paid advertising campaigns on Google Ads, Meta (Facebook/Instagram), LinkedIn, Twitter/X, or other ad platforms. Also use when the user mentions 'PPC,' 'paid media,' 'ad copy,' 'ad creative,' 'ROAS,' 'CPA,' 'ad campaign,' 'retargeting,' or 'audience targeting.' This skill covers campaign strategy, ad creation, audience targeting, and optimization.
qms-audit-expert
ISO 13485 internal audit expertise for medical device QMS. Covers audit planning, execution, nonconformity classification, and CAPA verification. Use for internal audit planning, audit execution, finding classification, external audit preparation, or audit program management.
code-reviewer
Code review automation for TypeScript, JavaScript, Python, Go, Swift, Kotlin. Analyzes PRs for complexity and risk, checks code quality for SOLID violations and code smells, generates review reports. Use when reviewing pull requests, analyzing code quality, identifying issues, generating review checklists.