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...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL requir...
Figma integration. Manage Files, Projects, Teams. Use when the user wants to interact with Figma data.
Build interactive HTML prototypes. Use when creating clickable mockups, adding animations, linking pages, or exporting HTML.
Generate professional book covers and ebook covers using each::sense API with AI-powered design