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.
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.
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.
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.
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.
This article explains how the Titian component library uses Design Tokens to abstract visual attributes like color, typography, spacing, and shadow, allowing seamless theme customization, global and component-level styling, dark mode support, and multi‑framework integration for consistent front‑end development.
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 examines how design engineering—rooted in atomic design theory and design tokens—addresses modularity, scalability, and collaboration challenges between designers and front‑end engineers, offering practical workflows, tooling insights, and future directions for consistent, efficient UI production.
This comprehensive guide explains why component libraries are essential, compares Sketch and Figma features, outlines atomic design principles, and provides step‑by‑step instructions for building, structuring, naming, and publishing a robust Figma component library with practical tips on variants, auto‑layout, design tokens, and team collaboration.
This article explains why design tokens are essential for improving design decision efficiency, ensuring visual consistency across products, simplifying theme updates, and streamlining collaboration between designers and developers, illustrated with real‑world examples from the WorldFirst design system.
This article explains how design tokens serve as a platform‑agnostic bridge between design tools and front‑end code, improving collaboration, reducing visual‑to‑code errors, and enabling automated, consistent UI implementation across products.
This article explains why Tailwind CSS has become popular, how it bridges design tokens and UI code, enforces visual consistency, separates concerns with semantic class naming, and offers practical patterns—mixins, BEM, content‑agnostic styles, and inline‑style replacements—to build maintainable front‑end systems.
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 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.
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.
This article details Youku's comprehensive journey to fully support dark mode on both iOS and Android, covering its origins, benefits such as battery savings and accessibility, design methodology, color token system, implementation tactics, and references to official platform guidelines.
