The article explains why AI‑generated front‑end code often looks ugly, introduces DESIGN.md as a markdown‑based design system to guide agents, lists public DESIGN.md collections, shows how to integrate them into projects, and provides ready‑to‑copy prompts for better visual results.
The article details a data‑driven redesign of a mini‑game home page that shifted focus from increasing click volume to extending user playtime, removed childish visual cues, introduced a youthful and relaxed brand language, and leveraged A/B testing and layered visual hierarchy to improve engagement and brand perception.
The ui‑ux‑pro‑max skill adds a design‑system inference engine to Claude Code, replacing generic AI‑generated pages with industry‑specific styles, color palettes, typography, and UX rules, while offering installation options, usage tips, and a discussion of token costs and skill conflicts.
The article reviews html-ppt-skill, an AI‑driven tool that generates fully styled HTML presentations instead of PPTX files, detailing its theme, layout, and animation assets, presenter‑mode implementation, cross‑platform skill integration, practical advantages, limitations, and how it exemplifies the emerging AI skill ecosystem.
This article walks through a complete UI/UX redesign of the OpenSpec project, detailing the exploratory audit of nine visual issues, design‑system decisions on colors, fonts and tokens, the Propose and Apply steps with concrete code changes, verification pitfalls, and lessons learned for future visual changes.
Penpot is a popular open‑source design tool that bridges designers and developers by turning designs into reusable code, offering design‑system features, a plugin ecosystem, self‑hosting options, and an inspect mode for direct SVG, CSS, and HTML extraction.
Google Stitch's DESIGN.md lets developers define colors, typography, spacing, and component styles in a plain‑text file that AI assistants can read directly, enabling consistent UI without Figma exports or JSON configs, and tools like HyperDesign can generate it in seconds.
Claude Design is a web‑only AI visual collaboration platform powered by Claude Opus 4.7 that lets designers, product managers, and developers generate prototypes, pitch decks, marketing assets, and full design systems from natural‑language prompts, uploaded sketches, documents, or code repositories, with real‑time team collaboration, fine‑grained editing, and multiple export formats, while requiring a Pro‑level subscription.
The article clarifies the difference between visual style and brand theme color, shows how to implement each with CSS, provides design guidelines and code snippets for various product types, and warns common pitfalls so you can create cohesive, recognizable layouts for public‑account content.
The article reveals Claude’s design system prompt, detailing its role as an expert designer, a six‑step workflow, context‑driven methodology, exploration modes, strict technical rules, built‑in collaboration tools, and ethical content guidelines that together enable the AI to produce high‑quality, user‑centric designs.
This case study details how the Taobao fashion channel was redesigned by consolidating visual language, simplifying layouts, and focusing on product images, resulting in a cleaner, more consistent user experience that aligns with business goals and evolving user expectations.
Google’s Material 3 Expressive update moves motion from scattered component parameters into a unified theme layer called a motion scheme, providing preset expressive and standard schemes, semantic animation types, and customizable spring‑based tokens that let designers and developers control UI feel consistently across platforms.
This guide explains why AI‑generated interfaces often look generic, introduces the open‑source Impeccable agent skill that supplies design references and anti‑pattern checks, and walks through its core components, slash commands, installation, CLI detection, and real‑world use cases for creating polished, production‑ready UI.
The article introduces the open‑source VoltAgent/awesome-design‑md GitHub repository, explains how its DESIGN.md markdown design system enables AI‑friendly, zero‑cost reuse of major‑brand UI specifications, outlines its nine core modules, categorizes templates for various product types, and provides step‑by‑step guidance for quick integration into frontend projects.
This case study details how a national subsidy marketing project was transformed into a unified, flexible design system by defining clear mental symbols, building modular visual structures, and creating efficient, engaging user experiences across off‑site and on‑site channels, ultimately turning complex business logic into an intuitive consumer journey.
This tutorial walks through converting scattered UI code and design documents into structured, machine‑readable design tokens and AI‑callable skills, showing how to audit existing HTML/CSS, abstract design tokens, package them as an AI Skill, and maintain the system over time.
This article explains how to augment traditional agent dialogues with AI‑driven, real‑time front‑end component generation, turning textual responses into PPT‑style visualizations and interactive mini‑animations by converting design specifications into prompts that produce ready‑to‑render HTML or WebComponent code.
The article examines the difficulties of traditional front‑end component reuse, proposes a spec‑driven AI collaboration model that shifts from code reuse to specification reuse, and demonstrates the approach with a detailed Bottom component case study, including design principles, architecture, code snippets, and practical benefits.
Ant Design 6 drops IE support and adopts CSS variables, enabling smaller CSS bundles, easier theming, streamlined style overrides, conditional container queries, and scoped styling, while outlining practical code examples and compatibility considerations for modern browsers.
This article explains how a unified, maintainable vector icon library was designed, built, and deployed across multiple platforms—including web, mini‑programs, and native apps—using SVG, font formats, Iconify, and automated CI/CD pipelines to boost design‑development collaboration and product consistency.
This case study details how Baidu’s design team rebuilt the financial search and stock‑information experience—from a fragmented PC results page to a responsive, Bento‑style layout—enhancing information efficiency, visual professionalism, and user trust across multiple devices.
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.
This article describes JD Cloud’s C2D2C (Code‑to‑Design‑to‑Code) workflow that unifies design and development assets, solves version lag and designer distraction, and demonstrates early results and future plans for automating UI component generation.
TDesign, Tencent’s open‑source UI component library, now integrates AI‑powered search that instantly explains terminology, generates code snippets, and creates demo cases, aiming to cut development time and illustrate a broader shift toward AI‑driven tooling in front‑end engineering.
This article shares a practical methodology for creating high‑quality design components, outlining how to make them understandable, usable, and maintainable through multi‑layer nesting, flexible‑yet‑convergent construction, systematic variant mapping, and data‑driven maintenance, with a focus on Figma‑based workflows.
The article details a three‑phase redesign of Taobao’s marketing venues—convergence to simplify content, unification to ensure consistent experience, and efficiency to accelerate iteration—covering design principles, componentization, navigation overhaul, dynamic headers, and visual diversity that together improve user comprehension and conversion during major sales events.
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.
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.
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 %.
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.
This article explains what a design system is, how design patterns and shared design language work together, the role of pattern libraries, effective design principles, and a practical case study, offering frontend developers a comprehensive guide to building cohesive, user‑focused interfaces.
This article explains how Baidu Search’s design system was restructured using scenario‑driven thinking, detailing the challenges of asset redundancy and inconsistency, the three‑phase overhaul (unify, engineer, tool), and the resulting improvements in asset clarity, maintainability, and consumption efficiency.
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.
This article explains why traditional qualitative questionnaires are insufficient for maintaining a design system, introduces a four‑step framework (clarify, select, explore, solve) with specific quantitative metrics for component scale, maintenance efficiency, adoption breadth, and usability, and demonstrates how to apply these metrics to identify and resolve real‑world component library issues.
This article explains why the old component library became a bottleneck, outlines the creation of a new Figma‑based design system using composable components, variants, and instance swaps, and demonstrates how modular sub‑components, clear APIs, and open layouts improve flexibility, maintainability, and product delivery speed.
This article outlines the rationale, analysis, and detailed design proposals for upgrading B2B logistics map interaction standards, covering layout variations, element sizing, drill‑down mechanisms, and usability considerations to ensure consistent, efficient, and user‑friendly map experiences across diverse business scenarios.
The article reviews Ant Design 5.0’s redesign, explaining how its focus on clearer visuals, reduced distractions, and a relaxed feel—through updated color palettes, larger interaction zones, and a flexible corner‑radius algorithm—enhances user efficiency and creates a more pleasant virtual office experience.
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.
This article explains how Ant Design 5.0 introduces a visual theme editor, a comprehensive Design Token system, and a semantic model that together enable flexible, consistent, and efficient design customization across the entire product development workflow.
This article explains JD Cloud's visual design system, detailing the design thinking, core principles, color and texture usage, grid and size specifications, and the composition of 3D, 2.5D, and linear icons to create a consistent, technology‑focused brand image across multiple scenarios.
Ant Design V5’s CSS‑in‑JS architecture enables powerful dynamic theming, allowing developers and designers to implement global theme algorithms, partial theme overrides, component‑level styling, and seamless multi‑theme compositions, illustrated with real‑world applications, code snippets, and visual comparisons across light and dark modes.
This article explains the strategic importance of design systems, covering industry trends, survey insights, real‑world case studies, their multi‑level value for companies, design teams and designers, and practical guidance on building and evolving design systems across three development stages.
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.
This article explains how 58 Home Service builds and iterates a practical design system that balances consistency with creativity, aligns lead and business designers, defines measurable quality dimensions, and streamlines collaboration to deliver a unified user experience across multiple product lines.
This article explains why measuring a design system is essential, outlines how Baidu's Light Design System built a PATS metric framework through research and four practical steps, and shares real-world results that improved usability, reliability, and overall workflow efficiency.
This article explains how 58 Home Service transformed its design system across three development stages—product‑centered, consumer‑centered, and human‑centric—to create a consistent brand experience, outlining core visual principles, grid and typography guidelines, and the overall architecture that supports efficient, emotionally resonant product design.
This article details the end‑to‑end design of Ganji’s Job‑Protection Plan, explaining how a systematic protection framework, clear design principles, visual language, and data‑driven methods were created and applied across key product scenes to boost user trust and safety perception.
This article explains how 58 Recruitment’s design team created a consistent brand feel across multiple online hiring events by using user insights, clear positioning, standardized visual principles, and a modular template system that speeds up design, development, and deployment while enhancing user perception.
This article explains what a design system is, its evolution and composition, distinguishes components from controls, breaks down a button into foundational elements, and shows how atomic properties of color, symbol, and position combine to create reusable UI components following DRY principles.
This guide explains why design handoff is a critical quality‑check before launch, outlines the three phases—pre‑stage rigorous design, mid‑stage active communication, and post‑stage proactive follow‑up—and provides practical steps for designers and developers to ensure high‑fidelity implementation and smooth collaboration.
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.
This guide details RELAAAY's icon design system, covering standardized size specifications, line widths, corner radii, iconfont advantages, usage rules, and practical steps for creating, updating, and deploying single‑color icon fonts across platforms.
Over the past six months the author handled dozens of corporate website projects, identified recurring design problems such as limited resources, high labor cost, lack of brand identity and poor user experience, and introduced a systematic workflow—including resource integration, component libraries, modular templates and a code‑generation tool—that enables the rapid production of multiple web designs within a single day.
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.
This article explains how Tencent's TDesign design system leverages Figma's Variants, AutoLayout, and other new features to create a unified, role‑agnostic resource library that improves efficiency, consistency, and collaboration across designers, product managers, and developers.
This article explains how Tencent created the open‑source TDesign system, its multi‑team organization, rule‑based governance, tooling, GitHub automation, documentation strategy, and contributor incentives, showing how a large‑scale design system can stay consistent while evolving across many technology stacks.
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.
This article outlines practical strategies for operational designers to quickly produce high‑impact campaign assets, covering flexible design thinking, tiered activity planning, material standards, and component‑based workflows that boost efficiency while maintaining brand consistency.
The article explains why 58.com’s UXD team created the FaceTeam 3D character asset library, outlines industry trends, compares 3D assets with static images, defines target users, and details the end‑to‑end design process from role definition and clothing design to modeling, rendering, scene creation, and component system integration.
This article examines the challenges of the original Vivo official app home page—messy containers, redundant and incomplete information—and explains how a user‑centric, business‑driven “simplicity” strategy led to a redesign with three container types, refined visual rules, and a unified design system.
This article explains how establishing clear design specifications improves team collaboration, speeds up component assembly, ensures visual consistency across a product, and outlines a practical process for creating, reviewing, and iterating design guidelines within a mobile app ecosystem.
This case study details 58.com’s 11.0 product overhaul, covering six months of research, data analysis, live‑stream and short‑video integration, AI/AR/VR applications, redesign of the homepage layout, and the evolution of the LOCO Design System to improve user efficiency and service reach.
This article details the background, design process, style selection, component theory, color definition, workflow, and enterprise-wide application of a modular illustration system that enhanced visual appeal, streamlined collaboration, and empowered product development across multiple platforms.
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.
Douyin’s Semi Design, an open‑source React UI design system for enterprise apps, faced criticism after undisclosed Ant Design text was found in its documentation, prompting a public apology, license updates, and detailed attribution of the borrowed components.
The article explains how Douyin's Semi Design, an open‑source React UI design system, was found to contain undocumented Ant Design text, details the team's public apology, the architectural differences, license updates, and the specific components that were referenced.
Semi Design, ByteDance’s modern React UI library, was open‑sourced under MIT, later faced criticism for copying Ant Design documentation, prompting an apology and subsequent license updates that added proper attributions for referenced code and design inspirations, highlighting its distinct architecture and extensive component suite.
This article explains why a design system is essential, outlines the Shufang case study, and details practical steps—tool selection, color palette, base styles, icon library, componentization, global rules, and brand language—to create a scalable, consistent UI framework.
Design tokens transform design specifications into reusable, semantic values that streamline collaboration across web, mobile, and desktop platforms, ensuring consistent UI implementation, easier maintenance, and rapid theme updates throughout the product lifecycle.
LOCO Design System, created by 58.com, evolved from a poorly named “Basic Interaction” into a comprehensive, code‑driven UI framework covering graphic, interaction, marketing, and motion guidelines, offering three component modes, multimedia suites, and cross‑platform support to enhance collaboration between designers, engineers, and product teams.
The 2020 Lego V2.0 redesign overhauled the multi‑terminal UI component library by redefining user roles, restructuring site architecture, simplifying visuals, improving component search and drag‑and‑drop adaptability, and establishing clear motion design principles to enhance developer productivity and overall user experience.
The article explains how Ganji.com's "Dream Shop" user growth system uses gamified, story‑driven design, modular architecture, visual diversity, motion effects, and a complete consumption loop to increase user engagement, retention, and product value for blue‑collar workers.
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.
Rexd is a cross‑device design system released by Alibaba for Hema’s retail operations, offering a unified codebase, environment‑driven design tokens, lightweight theming, flexible styling, and dynamic forms to streamline multi‑platform frontend development.
This guide outlines a comprehensive UI standard design process—from requirement analysis and interaction design to visual design, design system creation, and implementation tracking—providing UI, interaction, and experience designers with structured steps, evaluation criteria, and best‑practice principles to deliver business‑driven, high‑quality products.
This article explains the concept of UI design codification, why it matters in modern cloud‑based development, outlines the essential elements and workflow, and details the Unflow DSL—including its SEE‑DO‑REACT pattern, atomic‑design decomposition, and Flex‑based layout system—while providing concrete code examples and repository links.
This article examines the evolving challenges of a mature rental product and outlines design‑driven solutions—standardized interfaces, engaging motion, brand‑focused visuals, trust‑building cues, and simplified terminology—to improve user experience, increase conversion, and strengthen platform credibility.
The IXDC 2020 workshop recounted how 58UXD’s Matrix project created a full‑link design system for complex mid‑platform products, detailing the rationale, component library, template automation, cross‑team collaboration, and the practical outcomes that boosted productivity and business impact.
This article outlines the background, composition issues, and a three‑principle design system—consistency, interaction reasonableness, and flexibility—used to create a unified UI for 58’s multi‑business‑line messaging center micro‑chat, detailing component specifications, navigation rules, typography, colors, and layout guidelines.
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.
This article explains how design tokens serve as the building blocks of a design system, enabling theme customization, cross‑platform consistency, and workflow efficiency for digital products by standardizing colors, spacing, typography, and other style values.
This case study details the complete redesign of Meishi’s PC client—an internal communication platform for over 20,000 employees—covering background challenges, visual and interaction upgrades, information‑noise reduction, motion integration, and the creation of a unified design system to boost efficiency and brand perception.
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.
This talk outlines Hema's exploration of a unified cross‑platform solution for its middle‑back office, covering industry trends, challenges of diverse devices and environments, and a three‑layer approach that combines a design system driven by environment‑aware design tokens, a model‑centric component architecture, and an application framework that synchronizes state across devices.
This case study details how 58心宠, a pet trading platform, identified outdated design, inconsistent branding, and poor information hierarchy, then implemented visual and structural redesigns—including unified colors, larger typography, improved card layouts, and prioritized transaction flow—to enhance user experience and align with the parent company's ecosystem.
Meituan Waimai’s UI consistency project unites designers and developers around a unified design system, the Jimu toolchain, and a cross‑platform component library—supported by documentation and a cloud collaboration platform—to eliminate UI fragmentation, cut package size, and boost development efficiency by up to 50 %.
This case study details the redesign of 58.com’s web‑based instant messaging tool, outlining the background, new design goals, implementation steps, visual and interaction upgrades, componentization, customization options, and the resulting improvements in reply‑read ratios and overall user experience.
This article details the design process behind a unified branding and UI system for an interactive marketing platform, covering project background, brand core, logo creation, visual language, atomic design methodology, component hierarchy, and the resulting product guidelines.
This article explains how 58.com’s UX design team created a unified design system—covering standards, core principles, shared assets, and specialized tools—to streamline cross‑business collaboration, reduce redundant work, and accelerate product development across its massive classified‑services platform.
The guide details how the Jimu Sketch plugin was transformed from a simple internal tool into a platform‑wide solution that supports multi‑business switching, automated library conversion, UI/UX enhancements, performance caching, a native inspector panel, and deep JavaScript‑Objective‑C integration for scalable design‑system workflows.
This article explains what a design system is, outlines its key advantages such as unified design, reduced design debt, and improved efficiency, describes its core components like visual language and component libraries, and showcases best‑practice examples from Google, Ant Design, and Shopify.
This article explains the challenges of translating design specifications into code, introduces Design Tokens as a solution, and provides step‑by‑step guidance—including variable generation with Theo, custom iOS/Android implementations, mixin creation, and deployment—to improve consistency and efficiency between designers and developers.
Matrix is an enterprise‑level design system that unifies UI components, templates, and design tools to boost productivity for designers, developers, and product teams, employing atomic design, an 8‑point grid, and responsive layout rules, while offering a Vue component library, Sketch assets, and Axure components.
This case study details how 58.com responded to the COVID‑19 pandemic by conducting market and user research, analyzing business opportunities, and creating a comprehensive design system—including brand, visual, illustration, and AI‑driven tools—to enhance service breadth, improve user experience, and drive growth across online and offline channels.
This article details 58’s comprehensive brand design language upgrade, outlining the exploratory process, key design goals of clarity, consistency and youthfulness, and the resulting visual system—including brand colors, symbols, typography and layout standards—that enables designers to deliver high‑quality, brand‑aligned work quickly and effectively.
This article details the step‑by‑step process of creating FaceTeam, a systematic brand illustration framework for the 58 platform, covering its inception, design principles, component integration, and how it boosts visual consistency and production efficiency across multiple business lines.
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.
This article explains why a design system is essential for large‑scale mobile products, outlines the preparation steps, details how to create and organize components, and offers guidance on rolling out, maintaining, and avoiding common pitfalls to keep development efficient and collaborative.
This article explores the rise of design systems, their historical roots in component‑based development, the cost of design debt, practical examples of savings, common misconceptions, visual‑coding for dark mode, and how they enable faster prototyping, iteration, and cross‑team collaboration in modern frontend engineering.
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.
