← Back to Skills Marketplace
binggg

Ui Design Guide

by Booker Zhao · GitHub ↗ · v1.5.0 · MIT-0
cross-platform ✓ Security Clean
222
Downloads
0
Stars
1
Active Installs
6
Versions
Install in OpenClaw
/install ui-design-guide
Description
Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
Usage Guidance
This skill appears coherent and low-risk: it's instruction-only, asks for no credentials or installs, and its rules are purely design preferences. Before installing, note that (1) it is highly prescriptive—it forbids certain colors and popular fonts (Inter/Roboto/Arial/etc.), which may conflict with your brand or implementation requirements; (2) the SKILL.md references external documentation URLs (cnb.cool) for sibling skills—these are only docs but you may want to verify those pages if you rely on them; and (3) the SKILL.md version and registry version differ (metadata mismatch). If those policy constraints or external doc links are acceptable, it's reasonable to enable the skill. If you need to use forbidden fonts/colors or want tooling that automatically generates implementation code without a mandated design-spec step, this skill may be inconvenient.
Capability Analysis
Type: OpenClaw Skill Name: ui-design-guide Version: 1.5.0 The skill bundle is a comprehensive UI design guide for an AI agent, focusing on high-fidelity prototyping and avoiding 'generic AI aesthetics.' It mandates a design specification process, prohibits specific common fonts and colors (e.g., Inter, Roboto, purple gradients), and requires the use of professional icon libraries instead of emojis. The bundle includes a self-audit checklist in SKILL.md to ensure compliance with these design rules. All external references point to legitimate Tencent CloudBase repositories (cnb.cool), and there is no evidence of malicious intent, data exfiltration, or unauthorized execution logic.
Capability Assessment
Purpose & Capability
The name/description match the SKILL.md: the content focuses on visual direction, layout, typography, color, and producing a design specification. The skill declares no binaries, env vars, or config paths. Minor inconsistency: the SKILL.md front-matter version (2.18.0) differs from the registry version (1.5.0), but this is likely just metadata drift and does not change behavior.
Instruction Scope
Runtime instructions are narrowly scoped to UI design tasks: they require producing a design specification before coding, reference a local checklist.md and other platform-specific SKILL.md files for implementation guidance, and enforce opinionated rules (forbidden colors/fonts/layout patterns). The instructions do not ask the agent to read system files, environment variables, or to transmit data to external endpoints beyond linking to documentation.
Install Mechanism
There is no install spec and no code is written to disk (instruction-only). The SKILL.md contains fallback documentation URLs hosted on cnb.cool for sibling skills; these are documentation links, not downloads or installers. This is low risk but worth noting if you rely on those external docs being available.
Credentials
The skill requests no environment variables, credentials, or config paths. There is nothing disproportionate—no sensitive secrets are requested or referenced.
Persistence & Privilege
always is false and the skill is user-invocable. It does not request persistent/system-level presence or modify other skills or system configs. Autonomous invocation is allowed by platform default, which is normal and not by itself concerning.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install ui-design-guide
  3. After installation, invoke the skill by name or use /ui-design-guide
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.5.0
Recent commits / 最近提交: - chore(release): 🔖 bump version to v2.18.0 - chore(release): 🔧 refresh generated tools doc before v2.18.0 - chore: sync claude skills mirror from source - Merge pull request #528 from TencentCloudBase/feature/cloudrun-deploy-log-refresh - chore: sync claude skills mirror from source
v1.4.0
Recent commits / 最近提交: - chore(release): bump version to v2.17.1 - chore(release): build artifacts for v2.17.1 - docs(workflow): 🧭 tighten git and mcp tooling conventions - Merge pull request #520 from TencentCloudBase/chore/refine-entry-guardrails-and-bump-toolbox - chore(cloudbase): 🔧 refine entry guardrails and bump toolbox
v1.3.0
Recent commits / 最近提交: - chore(release): 🔖 bump version to v2.17.0 - chore(release): 🔧 refresh generated docs for v2.17.0 - chore: sync claude skills mirror from source - fix(release): 🩹 repair app-auth build for v2.17.0-beta.2 - chore: sync claude skills mirror from source
v1.2.0
Recent commits / 最近提交: - fix(release): 🩹 repair app-auth build for v2.17.0-beta.2 - chore: sync claude skills mirror from source - chore(release): 🔖 bump version to v2.17.0-beta.1 - chore: sync claude skills mirror from source - Merge pull request #505 from TencentCloudBase/feature/update-skills-and-configs
v1.1.0
Recent commits / 最近提交: - chore(release): 🔖 bump version to v2.17.0-beta.1 - chore: sync claude skills mirror from source - Merge pull request #505 from TencentCloudBase/feature/update-skills-and-configs - Merge pull request #508 from TencentCloudBase/feature/search-knowledgebase-docs-mode - chore(merge): 🔀 resolve main conflicts for app auth and nosql
v1.0.0
Initial release of the UI Design Guide skill. - Provides detailed guidelines for UI design specification and prototype creation before coding. - Enforces a mandatory pre-design checklist including purpose, aesthetic direction, color palette, typography, and layout strategy. - Clearly lists forbidden colors, fonts, and layout patterns to avoid generic or AI-generated styles. - Outlines when to use this skill versus other skills related to backend, logic, or data modeling. - Requires all design work to comply with context-aware recommendations and project-specific constraints. - Establishes a step-by-step design workflow and strict audit before implementation.
Metadata
Slug ui-design-guide
Version 1.5.0
License MIT-0
All-time Installs 1
Active Installs 1
Total Versions 6
Frequently Asked Questions

What is Ui Design Guide?

Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI. It is an AI Agent Skill for Claude Code / OpenClaw, with 222 downloads so far.

How do I install Ui Design Guide?

Run "/install ui-design-guide" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Ui Design Guide free?

Yes, Ui Design Guide is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Ui Design Guide support?

Ui Design Guide is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Ui Design Guide?

It is built and maintained by Booker Zhao (@binggg); the current version is v1.5.0.

💬 Comments