What makes 界面设计 · UI Design notable?

5.2K downloads. Trust evidence available

How should 界面设计 · UI Design be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

Claim this agent

agentCLAWHUBUnverified

界面设计 · UI Design

Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

5.2k

Updated

Oct 9, 2026

Version

1.18.55

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 5.2K downloads reported by the source. Last updated 10/9/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 9, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 9, 2026
Adoption signal: 5.2K downloadsadoption · observed Oct 9, 2026
Latest release: 1.18.55release · observed Sep 30, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17cgdbxp195f7dy8f5h6p0d9183h6nq:ui-design-guide

Install using `clawhub skill install s17cgdbxp195f7dy8f5h6p0d9183h6nq:ui-design-guide` in an isolated environment before connecting it to live workloads.
No published capability contract is available yet, so validate auth and request/response behavior manually.
Review the upstream CLAWHUB listing at https://clawhub.ai/binggg/ui-design-guide before using production credentials.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-binggg-ui-design-guide/snapshot"

Documentation

CLAWHUB

160,000 characters of source documentation, loaded on request.

Extracted files

4 files captured from the source.

SKILL.md

---
name: 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.
version: 2.34.8
alwaysApply: false
---

## Sibling skills (local only)

Sibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.

If a referenced sibling skill file is missing from this environment, ask the user to install the full CloudBase plugin (or the missing skill). Do **not** HTTP-fetch remote skill or protocol markdown into the agent context.

## Activation Contract

### Use this first when

- The request is to decide visual direction, produce a design specification, create a prototype, or make layout, typography, color, and visual hierarchy choices for an interface.
- The implementation should follow a deliberate aesthetic rather than directly coding an already-approved design.

### Read before writing code if

- The response must choose typography, color, spacing, layout strategy, or other visual rules before code exists.
- The user asks for "design", "prototype", "look and feel", or "style" rather than straight implementation.

### Then also read

- Web implementation -> `../web-development/SKILL.md`
- Mini program implementation -> `../miniprogram-development/SKILL.md`

### Do NOT use for

- Backend-only tasks, database design, or pure API work without interface output.
- Straight implementation of an already-approved UI without new design decisions.
- Generic frontend coding requests where the visual direction is already settled.

### Common mistakes / gotchas

- Writing JSX, WXML, or CSS before outputting the design specification.
- Falling back to generic AI layouts instead of an explicit aesthetic direction.
- Jumping into implementation when the design intent is still unclear.
- Ignoring platform constraints after the visual concept is defined.

### Minimal checklist

- Read [UI Design Activation Checklist](checklist.md) before interface generation.

## When to use this skill

Use this skill for **frontend UI design and interface creation** in any project that requires:

- Creating web pages or interfaces
- Creating mini-program pages or interfaces
- Designing frontend components
- Creating prototypes or interfaces
- Handling styling and visual effects
- Any development task involving user interfaces

**Do NOT use for:**
- Backend logic or API design
- Database schema design (use data-model-creation skill)
- Pure business logic without UI components

---

## How to use this skill (for a coding agent)

1. **MANDATORY: Complete Design Specification First**
- Before writing ANY interface code, you MUST explicitly output the design specification
- This includes: Purpose Statement, Aesthetic Direction, Color Palette, Typography, Layout Strategy
- Never skip this step - it's required for quality design

2. **Follow the Design Process**
- User Experience Analysis
- Pr

_meta.json

{
  "ownerId": "kn7emfp36dbn1xx4fz4s5q4a6180439j",
  "slug": "ui-design-guide",
  "version": "1.18.55",
  "publishedAt": 1790775946392
}

checklist.md

# UI Design Activation Checklist

Use this checklist before generating any page, component, or visual interface.

## Required checks

1. Output the design specification first.
2. Choose a concrete aesthetic direction rather than generic adjectives.
3. Define a color palette and typography before writing markup or styles.
4. Confirm the target platform: Web or mini program.
5. Read the platform implementation skill after the design spec is fixed.

## Common failure patterns

- Starting with JSX, WXML, or CSS before design intent is stated.
- Falling back to generic AI visual patterns.
- Missing platform-specific layout or asset constraints.

## Done criteria

- The design spec is visible in the response.
- Aesthetic direction, palette, and typography are explicit.
- The next implementation skill is known before UI code starts.

skill-card.md

## Description:

Guides visual direction, interface hierarchy, layout choices, design specifications, and prototypes for web and mini-program interfaces.

This skill is ready for commercial/non-commercial use.

## Publisher:

[binggg](https://clawhub.ai/user/binggg)

### License/Terms of Use:

MIT-0

## Use Case:

Developers and designers use this skill to establish a distinctive visual direction and design specification before building web or mini-program interfaces, then create and review frontend prototypes.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: Remote asset downloads may fetch untrusted content or write to unintended locations.

Mitigation: Require approval before downloads, restrict allowed URLs and output paths, and avoid shell downloads for untrusted or internal resources.

## Reference(s):

- [UI Design Activation Checklist](checklist.md)
- [ClawHub skill page](https://clawhub.ai/binggg/skills/ui-design-guide)

## Skill Output:

**Output Type(s):** [Design specifications, Guidance, Code]

**Output Format:** [Markdown with optional frontend code blocks]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [Includes a design specification before interface code and a visual self-audit.]

## Skill Version(s):

1.18.55 (source: ClawHub release metadata)

## Ethical Considerations:

Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular

OPENCLAW

Machine-readable data

The same record, as JSON, for agents and crawlers.

{
  "facts": [
    {
      "factKey": "vendor",
      "category": "vendor",
      "label": "Vendor",
      "value": "Clawhub",
      "href": "https://clawhub.ai/binggg/skills/ui-design-guide",
      "sourceUrl": "https://clawhub.ai/binggg/skills/ui-design-guide",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-09T04:19:49.582Z",
      "isPublic": true
    },
    {
      "factKey": "protocols",
      "category": "compatibility",
      "label": "Protocol compatibility",
      "value": "OpenClaw",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-binggg-ui-design-guide/contract",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-binggg-ui-design-guide/contract",
      "sourceType": "contract",
      "confidence": "medium",
      "observedAt": "2026-10-09T04:19:49.582Z",
      "isPublic": true
    },
    {
      "factKey": "traction",
      "category": "adoption",
      "label": "Adoption signal",
      "value": "5.2K downloads",
      "href": "https://clawhub.ai/binggg/ui-design-guide",
      "sourceUrl": "https://clawhub.ai/binggg/ui-design-guide",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-09T04:19:49.582Z",
      "isPublic": true
    },
    {
      "factKey": "latest_release",
      "category": "release",
      "label": "Latest release",
      "value": "1.18.55",
      "href": "https://clawhub.ai/binggg/ui-design-guide",
      "sourceUrl": "https://clawhub.ai/binggg/ui-design-guide",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-09-30T13:45:46.392Z",
      "isPublic": true
    },
    {
      "factKey": "handshake_status",
      "category": "security",
      "label": "Handshake status",
      "value": "UNKNOWN",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-binggg-ui-design-guide/trust",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-binggg-ui-design-guide/trust",
      "sourceType": "trust",
      "confidence": "medium",
      "observedAt": null,
      "isPublic": true
    }
  ],
  "events": [
    {
      "eventType": "release",
      "title": "Release 1.18.55",
      "description": "Recent commits / 最近提交: | - fix(clawhub): 🏷️ publish the curated display name and topics (#1124) | - docs: 🔄 sync CloudBase CloudAPI reference page | - feat(evals): ✨ score the secret and migration tasks (#1122) | - feat(evals): add the scenario runner and point it at a local endpoint (#1119) | - fix(mcp): 🔧 report local endpoint failures directly (#1118)",
      "href": "https://clawhub.ai/binggg/ui-design-guide",
      "sourceUrl": "https://clawhub.ai/binggg/ui-design-guide",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-09-30T13:45:46.392Z",
      "isPublic": true
    }
  ]
}

Record generated Oct 9, 2026.

About

Avoid when

Public facts

Install and run

Documentation

Extracted files

SKILL.md

_meta.json

checklist.md

skill-card.md

Related agents

activepieces

cherry-studio

AionUi

CopilotKit

Machine-readable data