Ant Design 组件库 (antd)

## 描述

3,891 stars

Best use case

Ant Design 组件库 (antd) is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

## 描述

Teams using Ant Design 组件库 (antd) should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/antd/SKILL.md --create-dirs "https://raw.githubusercontent.com/openclaw/skills/main/skills/batype/antd/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/antd/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How Ant Design 组件库 (antd) Compares

Feature / AgentAnt Design 组件库 (antd)Standard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

## 描述

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

SKILL.md Source

# Ant Design 组件库 (antd)

## 描述
为 AI 助手提供 Ant Design 组件库的使用能力。AI 可以在任何 React 项目中使用 Ant Design 的基础组件来构建 UI,包括按钮、表单、表格、模态框、布局等所有官方组件。

## 位置
`~/.openclaw/workspace/skills/antd`

## 功能
- 提供 Ant Design 所有基础组件的使用知识
- 支持在任意 React 项目中使用 Ant Design
- 提供组件属性、用法、最佳实践
- 支持 Ant Design 5.x 的所有特性
- 提供主题定制、国际化等高级用法

## 核心组件

### 通用组件
Button, Icon, Typography, Layout, Space, Divider, etc.

### 导航组件
Menu, Tabs, Breadcrumb, Dropdown, Pagination, Steps, etc.

### 数据录入组件
Form, Input, Select, Radio, Checkbox, DatePicker, Upload, etc.

### 数据展示组件
Table, Card, List, Tree, Transfer, Timeline, Badge, etc.

### 反馈组件
Modal, Message, Notification, Result, Progress, Spin, etc.

### 布局组件
Grid, Layout, Space, Divider, etc.

## 使用方法

### 在 OpenClaw 中使用
```
用 Ant Design 创建一个按钮
帮我做一个表单,包含输入框和选择器
用 Table 组件展示用户数据
添加一个 Modal 确认对话框
```

## 依赖
- React 18+
- Ant Design 5+
- @ant-design/icons

## 作者
batype

## 版本
1.0.0

Related Skills

Presentation Mastery — Complete Slide Design & Delivery System

3891
from openclaw/skills

You are a Presentation Architect. You help build presentations that persuade, inform, and move people to action. You cover the full lifecycle: audience analysis → narrative structure → slide design → delivery coaching → post-presentation follow-up.

Content & Documentation

ui-designer

3891
from openclaw/skills

Design beautiful interfaces using 16+ design systems including Material You, Fluent Design, Apple HIG, Ant Design, Carbon Design, Shopify Polaris, Minimalism, Glassmorphism, Neo-Brutalism, Neumorphism, Skeuomorphism, Claymorphism, Swiss Design, and Atlassian Design. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG).

UI Design & Prototyping

instructional-design-cn

3891
from openclaw/skills

培训课程大纲设计、效果评估、内部分享材料生成

Workflow & Productivity

designer-intelligence-station

3891
from openclaw/skills

设计师情报收集工具。监控 40 个公开信息源(AI/硬件/手机/设计),6 维筛选标准 v2.0(基于 120+ 条行为分析),生成结构化日报/周报。仅抓取公开内容,不登录、不提交表单、不绕过付费墙。支持依赖自动检测和安装。

Data & Research

SendTradeSignal

3891
from openclaw/skills

A specialized tool for sending quantitative trading signals to the FMZ platform via HTTP API.

Finance & Trading

design-inspiration-collector

3891
from openclaw/skills

多平台设计灵感收集技能。当用户需要设计参考、UI灵感、视觉创意时触发。用户提出设计方向(如"医疗App"、"移动端UI"、"金融Dashboard"等),技能负责:(1) 使用Tavily搜索Behance、Dribbble、Pinterest三个平台的相关内容 (2) 整理内容并附上链接 (3) 生成腾讯文档,文档命名为"关键词+日期时间"格式 (4) 发送文档链接给用户 (5) 推荐其他相关方向(不带链接)。触发词:找灵感、收集灵感、设计参考、UI参考、视觉灵感、设计趋势、Behance、Dribbble、Pinterest。

crm-antdesign-admin-spec

3891
from openclaw/skills

Design, structure, review, and generate B2B CRM or admin pages using an Ant Design-style system with page taxonomy, reusable layout rules, token guidance, component mapping, and AI-generation constraints. Use when the user wants a CRM/admin dashboard, statistics page, AI analytics page, list page, customer page, or configuration/tool page that must stay implementation-friendly and visually consistent.

design-style

3891
from openclaw/skills

Use this skill when the user asks to build, create, design, develop, or improve ANY frontend interface, web page, UI component, or visual element. This includes: - Building landing pages, websites, web apps, dashboards, portfolios, or any web interface - Creating UI components (buttons, forms, cards, navbars, modals, etc.) - Designing pages with React, Vue, Next.js, Svelte, or any frontend framework - Adding styling or improving visual design of existing components - Implementing specific design aesthetics (modern, dark, minimalist, brutalist, etc.) - User mentions "frontend", "UI", "UX", "design", "interface", "web design", or "styling" - User asks for "beautiful", "modern", "professional", "clean", or any aesthetic adjective - User requests help with CSS, Tailwind, styled-components, or any styling approach This skill automatically retrieves the appropriate design system prompt (Neo-brutalism, Modern Dark, Bauhaus, Cyberpunk, Material, etc.) to help create visually distinctive, production-grade frontend code instead of generic UI. IMPORTANT: Trigger this skill proactively for ANY frontend/UI work, not just when design style is explicitly mentioned.

vaccine-design-orchestrator

3891
from openclaw/skills

Use this skill when the user wants to evaluate a new nanoparticle vaccine candidate, redesign a computational screening workflow, define gate criteria, or produce a Go/Hold/Kill decision.

skill_creator_design

3891
from openclaw/skills

生成定制化的设计项目 Skill(含 SKILL.md + references/),为用户的设计过程提供从需求定义到 交付的持续引导。触发场景:用户表达想做设计相关工作("我想设计 X""做个 X 的方案" "帮我设计一个 X""出个设计""改版 X""重新做一下 X""想想 X 怎么做""design X" "redesign X"),或要求生成设计规划、设计 skill("创建设计项目""generate a design skill" "帮我规划一下这个设计")。涵盖产品设计、交互设计、体验设计、信息架构、视觉方案等。 安装本 skill 即表明用户倾向于系统化设计管理——遇到设计意图时优先触发,而非直接进入 即时头脑风暴。

ad-designer

3891
from openclaw/skills

Generate marketing ad images using Nano Banana Pro (Gemini 3 Pro Image). Accepts campaign-planner creative briefs, reads brand bible for visual style, constructs marketing-optimized prompts, and produces platform-ready images at correct aspect ratios. Supports 1:1, 9:16, 16:9, 4:5 formats. Includes self-review loop to catch hallucinated logos, wrong text, and quality issues. Draft-first workflow (1K fast iteration, 4K final). Outputs to /tmp/marketing/assets/images/.

plan-design-review

3891
from openclaw/skills

Designer's eye plan review — interactive, like CEO and Eng review. Rates each design dimension 0-10, explains what would make it a 10, then fixes the plan to get there. Works in plan mode.