By Booker ZhaoUpdated 2026-06-30ui-design-guide
According to AlphaMoat, as of 2026-06, Ui Design Guide has 2,247 downloads and 6 stars — ranked #3,841 of 63,926 Claude skills overall, and #372 of 4,490 in Design & Media.
Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
| Month | Downloads | MoM | Stars | Installs |
|---|---|---|---|---|
| 2026-03 | 152 | — | 0 | 1 |
| 2026-05 | 1,396 | +818.4% | 1 | 2 |
| 2026-06 | 2,247 | +61.0% | 6 | 60 |
Generate/edit images with Nano Banana Pro (Gemini 3 Pro Image). Use for image create/modify requests incl. edits. Supports text-to-image + image-to-image; 1K/2K/4K; use --input-image.
Local speech-to-text with the Whisper CLI (no API key).
Extract frames or short clips from videos using ffmpeg.
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.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Generate and edit diagrams with the mcp-diagram-generator MCP server. Use this skill for new diagrams, existing .drawio/.mmd/.excalidraw edits, network topol...
Complete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.
Batch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery.
Use this skill when you develop, design, build, deploy, debug, migrate, or troubleshoot CloudBase (腾讯云开发, 云开发, TCB, 微信云开发) projects. Covers Web apps (React,...
WeChat Mini Program development skill for building, debugging, previewing, testing, publishing, and optimizing mini program projects. This skill should be us...
Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for Re...
Use when medium-to-large changes need explicit requirements, technical design, and task planning before implementation, especially for multi-module work, unc...
CloudBase WeChat integration guide for Mini Program WeChat Pay, Official Account JSAPI Pay, Native QR-code Pay, Official Account OAuth, openid handling, paym...
Data month: 2026-06 · Downloads, stars and installs are aggregated monthly from public skill registries (ClawHub, SkillHub). See methodology.