design-system-creationComplete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
Install via ClawdBot CLI:
clawdbot install wpank/design-system-creationGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 1, 2026
A financial technology company is launching a new dashboard for investment tracking and wants to establish a unique visual identity that conveys trust and sophistication. This skill helps create a design system with dark themes, gradient text, and animated financial displays to differentiate from competitors.
An online retail platform has scattered styles across its website and mobile app, leading to inconsistent user experiences. This skill orchestrates a refactoring process by defining design tokens, typography systems, and surface components to unify the brand's aesthetic and improve maintainability.
A software-as-a-service startup is developing a new project management tool and needs to build a design system from scratch to ensure scalability and a cohesive user interface. This skill guides the creation of aesthetic foundations, color tokens, and motion patterns to support rapid feature development.
A digital media company is updating its website to enhance readability and visual appeal, aiming for a magazine-inspired look with bold typography and layered surfaces. This skill assists in implementing typography patterns, loading states, and component libraries to achieve a distinctive editorial feel.
Offer specialized consulting services to businesses needing custom design systems, leveraging this skill to provide end-to-end workflows from aesthetic documentation to token architecture. Revenue is generated through project-based fees or retainer contracts for ongoing maintenance and updates.
Develop and sell a SaaS platform that integrates this skill's methodologies, providing automated tools for generating design tokens, component libraries, and documentation. Revenue comes from subscription tiers based on usage, team size, and advanced features like AI-driven aesthetic suggestions.
Run a design agency that uses this skill to deliver complete design system packages for clients across industries, including fintech, e-commerce, and media. Revenue is generated through bundled service offerings that include implementation, training, and support for design teams.
💬 Integration Tip
Integrate this skill early in product development cycles to establish design tokens and aesthetic foundations, ensuring consistency across teams and reducing rework. Use the provided file structure to organize styles and components for seamless collaboration.
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.
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.
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.
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.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag