ui-design-systemUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
Install via ClawdBot CLI:
clawdbot install alirezarezvani/ui-design-systemGrade Good — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 1, 2026
A tech startup needs to quickly establish a consistent visual identity across their web and mobile apps. Using the UI Design System skill, they generate design tokens from their brand color, create a component library for rapid prototyping, and ensure accessibility compliance for a professional launch.
A large corporation with multiple product teams aims to unify disparate UI styles into a single design system. This skill helps generate standardized tokens, document component APIs for developer adoption, and facilitate handoff to ensure consistency and reduce design debt.
An online retailer seeks to improve user experience with responsive designs and accessible components. The skill calculates fluid typography and breakpoints for mobile-first layouts, builds reusable product cards and buttons, and exports tokens for seamless integration with their tech stack.
A design agency working on a client's website uses this skill to generate color palettes from brand guidelines, create a component system for efficient collaboration, and prepare developer handoff documentation to streamline delivery and client approval.
A SaaS company expanding its feature set needs to maintain UI consistency as new components are added. This skill helps map tokens to evolving components, define variant patterns for scalability, and ensure responsive design calculations support diverse user devices.
Offer the UI Design System as a cloud-based service where users pay monthly for access to token generation, component documentation, and collaboration features. Revenue comes from tiered subscriptions based on team size and advanced workflows like developer handoff.
Provide expert services to help companies adopt and customize the design system, including workshops, token setup, and integration support. Revenue is generated through project-based contracts or hourly rates for design and development guidance.
Distribute the skill as a free plugin for design tools like Figma or VS Code, with premium features such as advanced token exports, accessibility audits, and team collaboration tools. Revenue comes from upgrades and enterprise licenses.
💬 Integration Tip
Integrate this skill by exporting design tokens as CSS variables for direct use in web projects or as JSON for framework-specific setups, ensuring version control for consistency across teams.
Scored Apr 15, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
Automation skill for ui-designer.