Xpersona
agentCLAWHUBUnverified

awesome-design-skill

UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如"用Linear风格设计"、"使用Apple风格创建页面"、"按Stripe风格重构"）。也用于用...

OpenClaw
View on ClawHubHomepage

Rank

62

Safety

84

Downloads

1.6k

Updated

Oct 10, 2026

Version

1.2.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.6K downloads reported by the source. Last updated 10/10/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 10, 2026
Protocol compatibility
OpenClawcompatibility · observed Oct 10, 2026
Adoption signal
1.6K downloadsadoption · observed Oct 10, 2026
Latest release
1.2.0release · observed Apr 23, 2026
Handshake status
UNKNOWNsecurity

Install and run

Setup complexity: low.

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

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/snapshot"

Documentation

CLAWHUB

82,442 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: awesome-design-skill
description: UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如"用Linear风格设计"、"使用Apple风格创建页面"、"按Stripe风格重构"）。也用于用户询问可用设计风格列表（"列出所有风格"、"有哪些风格"）或查看特定风格详情（"看看Vercel风格"）。**不触发：用户未指定风格的一般设计请求**（如"设计一个页面"、"创建UI"等不会触发此技能）。
---

# Awesome Design Skill

根据用户指定的设计风格，从 design-md 风格库中选择对应的设计系统作为 UI 开发指导，并将 DESIGN.md 复制到当前工作目录。

**重要：此技能仅在用户明确指定设计风格时触发。如果用户未指定风格，不要使用此技能。**

## 字体说明

所有设计风格的预览文件（preview.html、preview-dark.html）使用 **fonts.loli.net** 作为 Google Fonts 的镜像源，以优化中国大陆地区的访问体验。如需更换为其他字体源，可批量替换文件中的 `fonts.loli.net` 为其他镜像地址。

## 自定义设计风格

**design-md 目录中的内容可以自由添加或替换。** 你可以：

- 添加自己喜欢的设计风格（只需在 `design-md/` 目录下创建新的风格文件夹和 DESIGN.md）
- 替换现有风格的 DESIGN.md 内容
- 删除不需要的风格

这样你可以构建属于自己的设计风格库，让 Claude 使用你熟悉和偏好的设计系统。

## 脚本文件

| 脚本 | 用途 |
|-----|------|
| `scripts/list-styles.sh` | 列出所有可用的设计风格 |
| `scripts/smart-select.sh [需求描述]` | 智能选择设计风格（根据需求关键词匹配，无匹配则随机） |
| `scripts/random-style.sh` | 随机选择一个设计风格 |
| `scripts/get-design.sh <风格名称>` | 获取指定风格的 DESIGN.md 路径 |
| `scripts/copy-design.sh <风格名称> [目标目录]` | 复制 DESIGN.md 到指定目录（默认当前目录） |

## 工作流程

### 用户指定风格进行设计

**前提：用户必须明确指定风格名称**

1. 运行 `scripts/get-design.sh <风格名称>` 验证风格存在并获取路径
2. 运行 `scripts/copy-design.sh <风格名称>` 复制 DESIGN.md 到当前目录
3. 读取当前目录的 DESIGN.md 作为风格指导
4. 告知用户使用的设计风格

### 用户查看可用风格

当用户询问"有哪些风格"、"列出所有风格"、"查看可用设计风格"时：

运行 `scripts/list-styles.sh` 列出所有可用的设计风格，并展示给用户。

### 用户查看特定风格详情

当用户询问"看看XX风格"、"查看XX风格的设计规范"时：

1. 运行 `scripts/get-design.sh <风格名称>` 获取风格路径
2. 读取并展示该风格的设计规范概要

### 用户重构现有页面（需指定风格）

**前提：用户必须明确指定目标风格**

当用户要求将现有页面改为某种风格时（如"将index.html改为airbnb的风格"、"用Vercel风格重构这个页面"）：

1. 首先读取用户指定的现有页面文件，理解其当前结构和内容
2. 运行 `scripts/get-design.sh <目标风格>` 验证风格存在
3. 运行 `scripts/copy-design.sh <目标风格>` 复制到当前目录
4. 读取 DESIGN.md 作为风格指导
5. 根据新风格的设计系统，重构页面的：
   - 颜色方案（背景、文字、强调色等）
   - 字体排版（字体家族、字号、行高等）
   - 间距系统（边距、内边距、元素间距）
   - 阴影和圆角
   - 组件样式（按钮、卡片、表单等）
   - 动画效果
6. 保持页面原有的功能和内容结构，仅改变视觉风格
7. 告知用户重构完成及主要变化

## 可用设计风格关键词

用户指定风格时可以使用以下关键词：

| 风格名称 | 适用场景 |
|---------|---------|
| linear.app | 项目管理、任务工具、深色主题 |
| apple | 产品展示、高端简洁、消费电子 |
| stripe | 支付、金融科技、企业级 |
| vercel | 开发者工具、深色主题 |
| spotify | 音乐、媒体播放器 |
| notion | 协作、文档工具 |
| figma | 设计工具、创意平台 |
| airbnb | 旅行、预订、民宿 |
| coinbase | 加密货币、区块链 |
| claude | AI产品、对话界面 |
| cursor | 开发者工具、代码编辑器 |
| posthog | 数据分析、监控仪表板 |
| framer | 设计工具、创意平台 |

...以及更多风格，使用 `scripts/list-styles.sh` 查看完整列表。

## DESIGN.md 文件结构

每个 DESIGN.md 包含：
- Overview - 设计概述
- Colors - 颜色系统
- Typography - 字体排版
- Spacing - 间距系统
- Shadows - 阴影效果
- Border Radius - 圆角设置
- Components - 组件样式
- Animations - 动画效果

## 输出格式

完成设计后，告知用户：
1. 使用的设计风格名称
2. 主要设计特点概述
3. 生成的文件列表

design-md/airbnb/README.md

# Airbnb Inspired Design System

[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) extracted from the public [airbnb](https://airbnb.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.

## Files

| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |

Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb design language.

## Preview

A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.

### Dark Mode
![Airbnb Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-dark-screenshot.png)

### Light Mode
![Airbnb Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-screenshot.png)

design-md/airtable/README.md

# Airtable Inspired Design System

[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) extracted from the public [airtable](https://airtable.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.

## Files

| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |

Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable design language.

## Preview

A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.

### Dark Mode
![Airtable Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-dark-screenshot.png)

### Light Mode
![Airtable Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-screenshot.png)

design-md/apple/README.md

# Apple Inspired Design System

[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) extracted from the public [apple](https://apple.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.

## Files

| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |


Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.

## Preview

A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.

### Dark Mode
![Apple Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-dark-screenshot.png)

### Light Mode
![Apple Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/apple/preview-screenshot.png)

design-md/bmw/README.md

# Bmw Inspired Design System

[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) extracted from the public [bmw](https://bmw.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.

## Files

| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |

Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/bmw/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Bmw design language.

## Preview

A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.

### Dark Mode
![Bmw Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-dark-screenshot.png)

### Light Mode
![Bmw Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/bmw/preview-screenshot.png)

Related agents

Same protocol, similar job.

Github ReposUpdated 15h 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 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 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/zhouchang1988/skills/awesome-design-skill",
      "sourceUrl": "https://clawhub.ai/zhouchang1988/skills/awesome-design-skill",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-10T07:30:38.985Z",
      "isPublic": true
    },
    {
      "factKey": "protocols",
      "category": "compatibility",
      "label": "Protocol compatibility",
      "value": "OpenClaw",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/contract",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/contract",
      "sourceType": "contract",
      "confidence": "medium",
      "observedAt": "2026-10-10T07:30:38.985Z",
      "isPublic": true
    },
    {
      "factKey": "traction",
      "category": "adoption",
      "label": "Adoption signal",
      "value": "1.6K downloads",
      "href": "https://clawhub.ai/zhouchang1988/awesome-design-skill",
      "sourceUrl": "https://clawhub.ai/zhouchang1988/awesome-design-skill",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-10T07:30:38.985Z",
      "isPublic": true
    },
    {
      "factKey": "latest_release",
      "category": "release",
      "label": "Latest release",
      "value": "1.2.0",
      "href": "https://clawhub.ai/zhouchang1988/awesome-design-skill",
      "sourceUrl": "https://clawhub.ai/zhouchang1988/awesome-design-skill",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-04-23T09:57:47.903Z",
      "isPublic": true
    },
    {
      "factKey": "handshake_status",
      "category": "security",
      "label": "Handshake status",
      "value": "UNKNOWN",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/trust",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-awesome-design-skill/trust",
      "sourceType": "trust",
      "confidence": "medium",
      "observedAt": null,
      "isPublic": true
    }
  ],
  "events": [
    {
      "eventType": "release",
      "title": "Release 1.2.0",
      "description": "Release v1.2.0 from GitHub",
      "href": "https://clawhub.ai/zhouchang1988/awesome-design-skill",
      "sourceUrl": "https://clawhub.ai/zhouchang1988/awesome-design-skill",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-04-23T09:57:47.903Z",
      "isPublic": true
    }
  ]
}

Record generated Oct 10, 2026.

Sponsored

Ads related to awesome-design-skill and adjacent AI workflows.