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
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...