Smithery Logo
MCPsSkillsDocsPricing
Login
NewFlame, an assistant that learns and improves. Available onTelegramSlack
    neversight

    ant-design-guide

    neversight/ant-design-guide
    Design
    2

    About

    SKILL.md

    Install

    • Telegram
      Telegram
    • Slack
      Slack
    • Claude Code
      Claude Code
    • Codex
      Codex
    • OpenClaw
      OpenClaw
    • Cursor
      Cursor
    • Amp
      Amp
    • GitHub Copilot
      GitHub Copilot
    • Gemini CLI
      Gemini CLI
    • Kilo Code
      Kilo Code
    • Junie
      Junie
    • Replit
      Replit
    • Windsurf
      Windsurf
    • Cline
      Cline
    • Continue
      Continue
    • OpenCode
      OpenCode
    • OpenHands
      OpenHands
    • Roo Code
      Roo Code
    • Augment
      Augment
    • Goose
      Goose
    • Trae
      Trae
    • Zencoder
      Zencoder
    • Antigravity
      Antigravity
    • Download skill
    ├─
    ├─
    └─
    Smithery Logo

    Give agents more agency

    Resources

    DocumentationPrivacy PolicySystem Status

    Company

    PricingAboutBlog

    Connect

    © 2026 Smithery. All rights reserved.

    About

    包含 Ant Design (Antd) 所有核心组件的官方文档索引及最佳实践。用于查询组件 API、Props 定义及最新特性。

    SKILL.md

    Ant Design Component Guide

    当用户询问有关 Ant Design 组件的使用、样式修改、或者需要编写特定 UI 功能时,请参考此指南。

    ⚠️ 关键指令 (Critical Instructions)

    1. 查阅文档: Ant Design 版本更新较快(当前主流为 v5/v6),遇到复杂的 Props(如 Table columns, Form rules, Upload customRequest)时,必须使用浏览工具 (Browsing Tool) 读取对应组件的 URL 以获取准确的类型定义。
    2. V5/V6 风格: 默认使用 Functional Components + Hooks。优先使用 CSS-in-JS (Antd Style) 或 style 属性,避免使用旧版的 Less 导入方式,除非用户特定要求。
    3. App 包裹: 在使用 message, modal, notification 的静态方法时,推荐使用 <App> 组件包裹应用,并使用 App.useApp() hook 获取实例,以确保样式和 Context 正确继承。

    📚 常用框架集成 (Integration)

    如果用户询问如何初始化项目或配置环境:

    • Vite: https://ant.design/docs/react/use-with-vite
    • Next.js: https://ant.design/docs/react/use-with-next
    • Umi: https://ant.design/docs/react/use-with-umi
    • Remix/SSR: https://ant.design/docs/react/server-side-rendering

    🧩 组件索引 (Component Index)

    1. 通用与布局 (General & Layout)

    构建页面骨架和基础元素

    • Button (按钮): https://ant.design/components/button
    • Icon (图标): https://ant.design/components/icon
    • Typography (排版): https://ant.design/components/typography
    • Layout (布局): https://ant.design/components/layout
    • Grid (栅格): https://ant.design/components/grid
    • Flex (弹性布局): https://ant.design/components/flex
    • Space (间距): https://ant.design/components/space
    • ConfigProvider (全局配置): https://ant.design/components/config-provider

    2. 导航 (Navigation)

    页面跳转与层级导航

    • Menu (菜单): https://ant.design/components/menu
    • Breadcrumb (面包屑): https://ant.design/components/breadcrumb
    • Dropdown (下拉菜单): https://ant.design/components/dropdown
    • Steps (步骤条): https://ant.design/components/steps
    • Pagination (分页): https://ant.design/components/pagination

    3. 数据录入 (Data Entry)

    表单与交互控件

    • Form (表单总线): https://ant.design/components/form
    • Input / Textarea: https://ant.design/components/input
    • Select (选择器): https://ant.design/components/select
    • Radio / Checkbox: https://ant.design/components/radio / https://ant.design/components/checkbox
    • DatePicker (日期选择): https://ant.design/components/date-picker
    • Upload (上传): https://ant.design/components/upload
    • Switch (开关): https://ant.design/components/switch
    • TreeSelect (树选择): https://ant.design/components/tree-select
    • Transfer (穿梭框): https://ant.design/components/transfer

    4. 数据展示 (Data Display)

    核心展示组件

    • Table (表格): https://ant.design/components/table - 注意:复杂表格推荐优先考虑 ProTable
    • List (列表): https://ant.design/components/list
    • Descriptions (描述列表): https://ant.design/components/descriptions
    • Card (卡片): https://ant.design/components/card
    • Tabs (标签页): https://ant.design/components/tabs
    • Tag (标签): https://ant.design/components/tag
    • Image (图片): https://ant.design/components/image
    • Tree (树形控件): https://ant.design/components/tree
    • QRCode (二维码): https://ant.design/components/qr-code
    • Statistic (统计数值): https://ant.design/components/statistic

    5. 反馈与交互 (Feedback)

    交互反馈

    • Modal (对话框): https://ant.design/components/modal
    • Drawer (抽屉): https://ant.design/components/drawer
    • Message (全局提示): https://ant.design/components/message
    • Notification (通知提醒): https://ant.design/components/notification
    • Spin (加载中): https://ant.design/components/spin
    • Popconfirm (气泡确认): https://ant.design/components/popconfirm
    • Skeleton (骨架屏): https://ant.design/components/skeleton
    • Watermark (水印): https://ant.design/components/watermark

    6. 主题定制 (Theme)

    • Customize Theme: https://ant.design/docs/react/customize-theme
    • ColorPicker: https://ant.design/components/color-picker

    💡 使用场景示例

    1. 表单场景: 结合 Form, Input, Select, Button。使用 Form.useForm() 获取实例。
    2. 后台列表: 结合 Table, Pagination, Space (操作栏)。
    3. 详情页: 结合 Descriptions 或 Card。
    4. 全局反馈: 使用 <App> 组件包裹根节点,在子组件中使用 App.useApp() 调用 message 或 modal。
    Recommended Servers
    Ref
    Ref
    tldraw
    tldraw
    GST Cranes Public Discovery MCP
    GST Cranes Public Discovery MCP
    Repository
    neversight/skills_feed