ui-design-guideUse when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
Install via ClawdBot CLI:
clawdbot install binggg/ui-design-guideGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/Audited Apr 17, 2026 · audit v1.0
Generated May 6, 2026
A startup needs a complete visual overhaul of their analytics dashboard to improve user retention. The design must feature a distinctive aesthetic, clear data hierarchy, and professional iconography.
An online retailer wants a high-fidelity prototype for a mini program including product listings, cart, and checkout flow. The UI must align with their brand colors and avoid generic layouts.
A fitness company needs a visually engaging landing page for a new wellness app. The design should use energizing colors, custom typography, and asymmetric hero sections.
An education startup requires interface design for a course dashboard with progress tracking and video modules. The UI must be distraction-free yet visually memorable.
A freelance designer wants a unique portfolio site that stands out. The design should incorporate bold color blocking, creative grids, and custom icons to showcase their work.
Offer ongoing UI design subscriptions where clients pay a monthly fee for a set number of design hours or deliverables, like prototypes and specs.
Charge a one-time fee per design project (e.g., dashboard redesign, landing page). Scope is defined upfront, and deliverables include prototypes and design specifications.
Create and sell a library of professionally designed UI components (with code) that other developers can license for use in their projects.
💬 Integration Tip
Integrate with web-development and miniprogram-development skills for full-stack implementation. Use the standalone fallback URLs if sibling skills are not installed locally.
Scored Aug 2, 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)
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-conv...
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...