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
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.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
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.
AI UI prototyping powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, u...
Design clear, consistent, and visually polished user interfaces.
Interact with Figma files to read structure, export layers as images, and retrieve comments using the Figma REST API with authentication.