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 May 6, 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.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Extract a color palette from an image and return HEX/RGB values with optional swatch image.
Design, preview, and generate UI code using Google Stitch (via MCP). Helps developers choose the best UI by generating previews first, allowing iteration, and then exporting code.
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.
从产品需求到可交互原型的完整工作流。当用户表达产品想法（如'我想做一个...'、'帮我设计...'）时触发。支持：1) 零提问直出PRD 2) 平台选择确认 3) 生成Awwwards级别的高保真HTML/Tailwind原型（移动端/PC端）。端到端产品设计流程。