BestHub
Sign in
Tag

design system

0 views collected around this technical thread.

JD Tech Talk
JD Tech Talk
Mar 10, 2025 · Frontend Development

C2D2C (Code‑to‑Design‑to‑Code) Mode for Unified Design and Development Assets in JD Cloud Frontend

The JD Cloud frontend team introduced a C2D2C workflow that converts component code into design tokens, generates synchronized Figma controls, and then transforms those designs back into code, aiming to eliminate version gaps, reduce designers' workload, and improve design‑to‑code fidelity across the Mobius design system.

C2D2Ccode generationdesign system
0 likes · 9 min read
C2D2C (Code‑to‑Design‑to‑Code) Mode for Unified Design and Development Assets in JD Cloud Frontend
Ctrip Technology
Ctrip Technology
Dec 19, 2024 · Frontend Development

Building an Enterprise‑Level Multi‑Brand, Multi‑Platform Design System at Ctrip

This article details Ctrip's approach to creating a scalable enterprise design system that supports multiple brands and platforms through modular design, theme configuration, cross‑platform component libraries, and automated workflows, ultimately improving design efficiency, consistency, and development productivity.

Cross-Platformcomponent librarydesign system
0 likes · 16 min read
Building an Enterprise‑Level Multi‑Brand, Multi‑Platform Design System at Ctrip
Beijing SF i-TECH City Technology Team
Beijing SF i-TECH City Technology Team
Nov 29, 2024 · Mobile Development

SF Design Mobile: Design System, Token Integration, and Component Library Overview

The article outlines the background, goals, construction process, and comprehensive showcase of SF Design Mobile, a cross‑platform component library built by SF Technology, emphasizing design principles, the integration of Design Tokens, component categories, public platform, application examples, current usage, feedback, and future plans.

component librarydesign systemdesign tokens
0 likes · 8 min read
SF Design Mobile: Design System, Token Integration, and Component Library Overview
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Dec 28, 2023 · Frontend Development

Lossless Design-Frontend Collaboration: The Evolution of NetEase Cloud Music's Design Collaboration Practice

Since 2021, NetEase Cloud Music’s Design Platform has evolved its design‑frontend workflow through three stages—engineering phase 1.0, phase 2.0, and the AI‑driven intelligent phase—by introducing the C2D2C (Code‑to‑Design‑to‑Code) methodology, unified design systems, LLM‑enhanced code, and generative AI tools, cutting communication overhead and boosting designer and developer productivity by up to 200 %.

AI designC2D2CD2C
0 likes · 31 min read
Lossless Design-Frontend Collaboration: The Evolution of NetEase Cloud Music's Design Collaboration Practice
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 18, 2023 · Frontend Development

Evolution of Varlet UI: Architecture, Monorepo, Design System, and Tooling in 2023

In this article the author, creator of the Vue3 mobile component library Varlet UI, shares the latest architectural changes, monorepo setup, design system, development tooling, testing, build outputs, documentation deployment, playground, and VSCode extensions, reflecting on lessons learned over the past two years.

MonorepoOpen-sourceVue
0 likes · 12 min read
Evolution of Varlet UI: Architecture, Monorepo, Design System, and Tooling in 2023
Architects Research Society
Architects Research Society
Oct 8, 2023 · Frontend Development

Building a Frontend Core Team and Foundations at Razorpay

This article describes how Razorpay formed a frontend core team, defined its responsibilities, tackled infrastructure and design inconsistencies, and built a monorepo‑based toolchain and design system to improve developer experience, scalability, and product quality across the organization.

CI/CDMonorepoarchitecture
0 likes · 16 min read
Building a Frontend Core Team and Foundations at Razorpay
We-Design
We-Design
Mar 30, 2023 · Frontend Development

How to Implement Design Tokens in Figma and Sketch for Seamless Dev Collaboration

This article explains how to map design tokens—style, component, template, and file tokens—to appropriate carriers in Figma and Sketch, covering token categories, multi‑mode and multi‑business handling, component token strategies, property naming conventions, handoff methods, and version management.

FigmaSketchUI
0 likes · 20 min read
How to Implement Design Tokens in Figma and Sketch for Seamless Dev Collaboration
Qunhe Technology User Experience Design
Qunhe Technology User Experience Design
Nov 18, 2022 · Product Management

How to Streamline User Onboarding in SaaS: Design Patterns and Management Solutions

This article examines the challenges of user onboarding in a complex SaaS design tool and proposes a comprehensive solution that combines a structured design language, reusable design patterns, and a management backend to reduce development costs, improve consistency, and enable targeted, timely onboarding experiences.

SaaSUX designdesign system
0 likes · 12 min read
How to Streamline User Onboarding in SaaS: Design Patterns and Management Solutions
Qunhe Technology User Experience Design
Qunhe Technology User Experience Design
Jul 22, 2022 · Fundamentals

How to Accelerate Your Growth as a Junior B2B Designer: Essential Skills and Strategies

This article consolidates the common doubts junior interaction designers encounter, outlines professional and career competencies, and provides a step‑by‑step guide on demand analysis, design system construction, user research, and practical tips for thriving in B2B design projects.

B2B designUX fundamentalscareer development
0 likes · 15 min read
How to Accelerate Your Growth as a Junior B2B Designer: Essential Skills and Strategies
Qunhe Technology User Experience Design
Qunhe Technology User Experience Design
Jun 2, 2022 · Product Management

How Systematic Design Solutions Boost Product Quality and Team Efficiency

This article explains how a systematic, pattern‑based design approach—abstracting from elements to components and codifying rules—can unify product experiences, reduce development cycles, and dramatically improve the efficiency and consistency of large, complex product teams.

design patternsdesign systemproduct design
0 likes · 9 min read
How Systematic Design Solutions Boost Product Quality and Team Efficiency
Qunhe Technology User Experience Design
Qunhe Technology User Experience Design
Apr 26, 2022 · Frontend Development

How Manycore Design Unified Our UI Components Across Teams

This article outlines the evolution of Manycore Design, the in‑house design system created by Qunhe, detailing its transition from third‑party libraries to a unified component library, the four‑year development process, and the ongoing efforts to expand its ecosystem and ensure consistent product standards.

UI standardizationcomponent librarydesign system
0 likes · 3 min read
How Manycore Design Unified Our UI Components Across Teams
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Dec 15, 2021 · Frontend Development

Visual Interaction and Frontend Development: Enhancing User Experience and Development Efficiency

This article explores how visual interaction influences user experience and outlines strategies—such as design specifications, component libraries, design tokens, and D2C workflows—to improve consistency and efficiency in frontend development across product iterations.

component librarydesign systemdesign token
0 likes · 14 min read
Visual Interaction and Frontend Development: Enhancing User Experience and Development Efficiency
ByteFE
ByteFE
Jun 23, 2021 · Frontend Development

Building an Effective Frontend Team in a Startup

This article discusses the challenges faced by frontend developers in startup companies and offers practical solutions such as coding standards, design guidelines, component libraries, documentation, project infrastructure, collaboration processes, and team culture to improve professionalism, coordination, and productivity.

Collaborationcoding standardsdesign system
0 likes · 15 min read
Building an Effective Frontend Team in a Startup
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 OpsOpen-source
0 likes · 14 min read
Invisible Design System: Ant Design’s Engineering Approach to Design Asset Management
GrowingIO Tech Team
GrowingIO Tech Team
Jan 14, 2021 · Frontend Development

Master Frontend Tooling: Prettier, Stylelint, ESLint, and Git Hooks for Design Systems

This article explains how GrowingIO's Design System leverages a component library and introduces essential frontend development tools—including Prettier, stylelint, ESLint, Commitizen, commitlint, lint‑staged, and Husky—detailing their installation, configuration, usage, and integration into CI pipelines to ensure consistent, maintainable code.

CIcode formattingdesign system
0 likes · 13 min read
Master Frontend Tooling: Prettier, Stylelint, ESLint, and Git Hooks for Design Systems
iQIYI Technical Product Team
iQIYI Technical Product Team
May 22, 2020 · Mobile Development

Building a Mobile Component Library: Practices and Lessons from iQIYI

iQIYI’s mobile component library was built by first auditing 400+ pages to define design specs and business needs, then creating reusable “block‑card” components with a scalable granularity, a backend management platform, and a Sketch plugin, achieving 43% page coverage, 40% workflow efficiency gain and 25% UI consistency improvement while maintaining design flexibility.

best practicescomponent librarydesign system
0 likes · 12 min read
Building a Mobile Component Library: Practices and Lessons from iQIYI
Youku Technology
Youku Technology
Jan 7, 2020 · Mobile Development

Comprehensive Design and Technical Summary of Full Dark Mode Support for the Youku App

The article delivers a detailed 117‑page, eleven‑chapter overview of Youku’s full Dark Mode implementation, explaining the motivation, battery and accessibility benefits, design methodology—including color token systems and contrast hierarchy—and the coordinated technical execution across iOS and Android platforms.

Androidaccessibilitydark mode
0 likes · 13 min read
Comprehensive Design and Technical Summary of Full Dark Mode Support for the Youku App
流利说 Design Team
流利说 Design Team
Dec 20, 2019 · Mobile Development

How We Crafted a Child‑Friendly UI for a 3‑8 Year‑Old English Learning App

This article walks through the UI design process of the Liulishuo® children’s English app, covering user personas, core app functions, visual design goals such as efficient browsing, child‑friendly aesthetics, a structured design system, multi‑device adaptation, and component‑library collaboration to deliver a cohesive, engaging experience for both parents and kids.

Children's EducationUI designdesign system
0 likes · 11 min read
How We Crafted a Child‑Friendly UI for a 3‑8 Year‑Old English Learning App
Ctrip Technology
Ctrip Technology
Jun 19, 2019 · Frontend Development

Kirby: A Comprehensive Sketch Plugin System for Design Resource Management and Development

This article details the development of Kirby, a Sketch plugin created by Ctrip's front‑end team to manage design resources, enforce design language standards, and provide a full stack of features—including design token handling, static scans, WebView GUIs, and native integrations—while explaining the underlying Sketch plugin architecture, APIs, and tooling.

JavaScriptSketchdesign system
0 likes · 15 min read
Kirby: A Comprehensive Sketch Plugin System for Design Resource Management and Development
360 Tech Engineering
360 Tech Engineering
May 14, 2018 · Frontend Development

Weekly Tech Newsletter Summary – Highlights on Design Systems, Shaders, Observers, ResizeObserver, Async/Await, Code Literacy, Flutter Beta 3, and Drop‑Shadow

This weekly tech newsletter presents concise overviews of design systems, shader usage, modern browser observers, JavaScript ResizeObserver, advanced scrolling techniques, async/await pitfalls, font‑spider‑plus features, code literacy principles, Flutter Beta 3 updates, and creative applications of CSS drop‑shadow, offering valuable insights for developers.

CSSFlutterJavaScript
0 likes · 4 min read
Weekly Tech Newsletter Summary – Highlights on Design Systems, Shaders, Observers, ResizeObserver, Async/Await, Code Literacy, Flutter Beta 3, and Drop‑Shadow