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.
Calls external URL not in known-safe list
https://github.com/wpank/ai/tree/main/skills/meta/design-system-creationAudited Apr 17, 2026 · audit v1.0
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 19, 2026
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
An interactive 3D visualization application featuring an "Augmented Entity" with reactive shaders and emotional states.
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...