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
agile-product-owner
Agile product ownership for backlog management and sprint execution. Covers user story writing, acceptance criteria, sprint planning, and velocity tracking. Use for writing user stories, creating acceptance criteria, planning sprints, estimating story points, breaking down epics, or prioritizing backlog.
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.
mdr-745-specialist
EU MDR 2017/745 compliance specialist for medical device classification, technical documentation, clinical evidence, and post-market surveillance. Covers Annex VIII classification rules, Annex II/III technical files, Annex XIV clinical evaluation, and EUDAMED integration.
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.