ui-designComprehensive 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.
Install via ClawdBot CLI:
clawdbot install wpank/ui-designGrade Good — 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/design-systems/ui-designAudited Apr 17, 2026 · audit v1.0
Generated Mar 20, 2026
This scenario involves creating a clean, functional interface for a SaaS product, focusing on typography and spacing for readability. Use grid layouts for structured data and semantic colors for status indicators to enhance user productivity and reduce cognitive load.
Focus on visual hierarchy and color to drive conversions, with playful or luxury design directions depending on the brand. Implement responsive grids for product displays and ensure accessibility for broad audience reach, including contrast checks for text.
Apply editorial design principles with type-forward layouts and grid-based structures for articles. Use high-contrast serif fonts for headings and neutral body fonts to improve readability, with consistent spacing to guide users through long-form content.
Design an industrial or function-forward interface for enterprise tools, emphasizing robust component design and accessibility. Use fixed sidebar layouts with grid, limit color palettes for clarity, and implement surface layering for dark mode to reduce eye strain.
Focus on playful or minimal aesthetics with responsive flexbox for navigation and card grids. Ensure mobile padding and typography scales for small screens, using motion design subtly to enhance engagement without overwhelming users.
Offer custom UI design packages for small businesses or startups, leveraging the skill's fundamentals to create distinctive interfaces. Charge per project or hourly, with revenue from one-off designs or retainer agreements for ongoing support.
Develop a SaaS platform providing pre-built UI templates and components based on the skill's patterns. Monetize through subscription tiers, offering access to design tokens, code snippets, and customization tools for developers and designers.
Run an agency that uses the skill to deliver comprehensive UI design services for clients across industries. Generate revenue from full-service contracts, including design reviews, accessibility audits, and implementation guidance for frontend teams.
💬 Integration Tip
Integrate this skill by starting with typography and spacing fundamentals, then apply grid or flexbox based on layout needs, and use the provided color roles to ensure accessibility and brand consistency.
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.
Complete 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.
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.