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.
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 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.
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.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
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.
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
Automation skill for ui-designer.