Tag

Ant Design

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 6, 2025 · Frontend Development

Ant Design Component Model Context Protocol (MCP) Service: Design, Implementation, and Usage Guide

This article details the design, implementation, and practical usage of a Model Context Protocol (MCP) service for Ant Design components, explaining how to extract component documentation, define MCP tools and prompts, integrate with AI models like Claude, and improve frontend development efficiency.

AIAnt DesignMCP
0 likes · 21 min read
Ant Design Component Model Context Protocol (MCP) Service: Design, Implementation, and Usage Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 19, 2025 · Frontend Development

Using MasterGo MCP with Cursor to Generate Frontend Code from DSL

This guide explains how to obtain a token, install MasterGo MCP in Cursor, configure the mcp.json file, and use the provided getDSL and getComponentLink tools to retrieve design canvas DSL and generate front‑end code such as React, Vue, or Flutter components.

Ant DesignCursorDSL
0 likes · 6 min read
Using MasterGo MCP with Cursor to Generate Frontend Code from DSL
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 18, 2025 · Frontend Development

Comprehensive Guide to RTL Support in CSS and Frontend Development

This article explains the challenges of Right‑To‑Left (RTL) layout adaptation, compares three implementation strategies—including CSS logical properties, transform scaling, and manual RTL code—and demonstrates how tools like rtlcss, Tailwind, and Ant Design can automate or simplify RTL support for modern web projects.

Ant DesignCSSLogical Properties
0 likes · 20 min read
Comprehensive Guide to RTL Support in CSS and Frontend Development
大转转FE
大转转FE
Oct 18, 2024 · Frontend Development

Design and Implementation of ZhiZhu Customer Service Workbench

This article explains the architecture and key features of ZhiZhu's customer service workbench, covering the overall system, the iframe‑based IM communication, multi‑tab third‑screen design, conversation caching with LRU, and full‑event tracking implementation using React, Umi and Ant Design.

Ant DesignUmicustomer service
0 likes · 11 min read
Design and Implementation of ZhiZhu Customer Service Workbench
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 13, 2024 · Frontend Development

Implementing a Custom OnBoarding Tour Component with Ant Design 5 in React

This article walks through building a reusable OnBoarding (tour) component for React applications using Ant Design 5, explaining the underlying mask technique, step management, animation handling, resize observation, and providing complete source code and usage examples.

Ant DesignTour Componentfrontend
0 likes · 14 min read
Implementing a Custom OnBoarding Tour Component with Ant Design 5 in React
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 1, 2024 · Frontend Development

Resolving Large Number Precision Issues in Ant Design Table Selection Popup

During a daily stand‑up, a team member struggled with a bug where a data‑selection modal using Ant Design's Table failed to display selected rows correctly due to large numeric IDs losing precision in JavaScript, and the issue was resolved by preventing automatic JSON parsing of 16‑digit strings.

Ant DesignJSON parseJavaScript
0 likes · 5 min read
Resolving Large Number Precision Issues in Ant Design Table Selection Popup
ByteFE
ByteFE
Jan 25, 2024 · Frontend Development

Building a Screen Recording Application with Electron, React, Vite, and FFmpeg

This tutorial walks through creating a desktop screen‑recording tool using Electron with a React‑Vite front‑end, Ant Design UI, IPC communication, system‑tray controls, draggable windows, and FFmpeg for capturing video in WebM, MP4, or GIF formats.

Ant DesignElectronFFmpeg
0 likes · 8 min read
Building a Screen Recording Application with Electron, React, Vite, and FFmpeg
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 11, 2024 · Frontend Development

Ant Design Theme Customization: From Less Variables to CSS‑in‑JS and Performance Strategies

This article examines the evolution of Ant Design's theming—from the less‑based Antd 4.x approach to the CSS‑in‑JS design‑token system in Antd 5.x—analyzes the performance trade‑offs of CSS‑in‑JS, and presents the official antd‑style solution for high‑performance, extensible, and compatible style overrides.

Ant DesignCSS-in-JSFrontend Development
0 likes · 18 min read
Ant Design Theme Customization: From Less Variables to CSS‑in‑JS and Performance Strategies
政采云技术
政采云技术
Dec 21, 2023 · Frontend Development

Understanding Controlled and Uncontrolled Forms in React: Ant Design, Hooks, and React‑Hook‑Form

This article explains the concepts, use‑cases, and performance trade‑offs of controlled versus uncontrolled forms in React, demonstrates how Ant Design 3 and 4 implement form handling with HOC or Context + hooks, and introduces the lightweight, non‑controlled approach of react‑hook‑form with practical code examples.

Ant DesignControlledForms
0 likes · 12 min read
Understanding Controlled and Uncontrolled Forms in React: Ant Design, Hooks, and React‑Hook‑Form
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 7, 2023 · Frontend Development

Custom Ant Design Select Component with Integrated Table and Dumi Documentation Guide

This article explains how to create custom Ant Design select components that display additional information via integrated tables, covering form implementation, basic and advanced versions with infinite scrolling, handling Ant Design bugs, and documenting the components using Dumi, complete with code examples.

Ant DesignCustom Selectdocumentation
0 likes · 26 min read
Custom Ant Design Select Component with Integrated Table and Dumi Documentation Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 8, 2023 · Frontend Development

Best Practices for Ant Design Forms, Dynamic Form Handling, and Component Organization in React

This article reviews practical guidelines for building maintainable Ant Design forms in React, covering layout strategies, dynamic form techniques, component encapsulation, table and tab implementations, CSS styling conventions, architecture considerations, and custom hooks to improve code quality and developer productivity.

Ant DesignDynamic FormJavaScript
0 likes · 17 min read
Best Practices for Ant Design Forms, Dynamic Form Handling, and Component Organization in React
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 22, 2022 · Frontend Development

Building a Management Backend with Ant Design 5, React 18, Vite, and TypeScript

This article explains why Ant Design 5 is preferred over MUI, then walks through configuring Vite and tsconfig, creating login and home pages, designing a recursive routing system, implementing lazy loading, menu generation, route listening hooks, tab management with KeepAlive, theme customization, and dynamic routing with React Router 6.4.3 for a full‑featured admin dashboard.

Ant DesignRoutingadmin dashboard
0 likes · 17 min read
Building a Management Backend with Ant Design 5, React 18, Vite, and TypeScript
政采云技术
政采云技术
Jul 12, 2022 · Frontend Development

Configurable Form Data Design for React/Ant Design Projects

This article introduces a lightweight, configuration‑driven approach to building form fields in React using Ant Design, showing how to replace repetitive FormItem code with a declarative schema, handle edit/detail modes, render different component types, and apply common validation rules.

Ant DesignForm ConfigurationJavaScript
0 likes · 12 min read
Configurable Form Data Design for React/Ant Design Projects
Laiye Technology Team
Laiye Technology Team
Apr 15, 2022 · Frontend Development

Improving Maintainability of an Ant Design‑Based Component Library with HoC, Dumi, and Monorepo

This article describes how a company refactored its Ant Design‑based React component library by standardizing on higher‑order component wrappers, adopting the dumi documentation tool, and organizing the codebase with a Lerna‑Yarn monorepo, resulting in significantly improved maintainability and developer efficiency.

Ant DesignFrontend DevelopmentHOC
0 likes · 9 min read
Improving Maintainability of an Ant Design‑Based Component Library with HoC, Dumi, and Monorepo
ByteFE
ByteFE
Dec 13, 2021 · Frontend Development

Unified Route, Menu, and Breadcrumb Configuration for a React + Ant Design Admin Project

This article demonstrates how to centralize route, menu, permission, and breadcrumb definitions in a React and Ant Design based admin application by using nested configuration objects, flattening utilities, and dynamic lookup functions to reduce duplication and simplify maintenance.

Ant DesignBreadcrumbReact Router
0 likes · 13 min read
Unified Route, Menu, and Breadcrumb Configuration for a React + Ant Design Admin Project
政采云技术
政采云技术
Jul 13, 2021 · Frontend Development

Understanding rc-form: Internals, APIs, and Usage in React Forms

This article provides a comprehensive overview of rc-form, a React library used by Ant Design to manage form state, validation, and data collection, explaining why it is needed, its core APIs, practical usage examples, and a deep dive into its internal implementation.

Ant DesignJavaScriptValidation
0 likes · 19 min read
Understanding rc-form: Internals, APIs, and Usage in React Forms
ByteFE
ByteFE
Mar 22, 2021 · Frontend Development

Table Virtualization Practices in React Ant Design: Approaches and Lessons

This article examines the challenges of virtualizing large Ant Design tables in a React+Umi stack, outlines three internal implementation strategies, discusses common pitfalls such as blank flicker and column fixing, and recommends open‑source alternatives for efficient table rendering.

Ant DesignTable Virtualizationfrontend performance
0 likes · 13 min read
Table Virtualization Practices in React Ant Design: Approaches and Lessons
AntTech
AntTech
Jan 29, 2021 · Frontend Development

Invisible Design System: Ant Design’s Engineering Approach to Design Asset Management

This article introduces Ant Design’s Invisible Design System, explaining how design asset management and engineering rules (ETCG) are explored to create unified, hidden guidelines that improve component consistency, workflow efficiency, and collaboration, and outlines the open‑source plan, Kitchen tool, and community initiatives for frontend development.

Ant DesignDesign Opscomponent library
0 likes · 14 min read
Invisible Design System: Ant Design’s Engineering Approach to Design Asset Management
AntTech
AntTech
Oct 28, 2020 · Frontend Development

Ant Design 4.0: Design Philosophy of Happy Work and the ETCG 2.0 Methodology

The talk explains Ant Design's core assumption that everyone seeks happy work, outlines its four design values, introduces the ETCG 2.0 methodology for consistent component design, and discusses how natural, deterministic interactions can make digital products feel more intuitive and enjoyable.

Ant DesignDesign PhilosophyETCG
0 likes · 14 min read
Ant Design 4.0: Design Philosophy of Happy Work and the ETCG 2.0 Methodology
Fulu Network R&D Team
Fulu Network R&D Team
Oct 22, 2020 · Frontend Development

Frontend Technology Stack and Project Structure Guide for React‑Based Merchant Applications

This article introduces the essential frontend technology stack—including React, Webpack, Ant Design, DVA, ES6, and Axios—explains the typical project directory layout, walks through source code organization, and provides practical steps and tips for building merchant‑side applications with a React‑DVA architecture.

Ant DesignAxiosDVA
0 likes · 15 min read
Frontend Technology Stack and Project Structure Guide for React‑Based Merchant Applications