#design-systems

10 uncomfortable UX lessons from real design mistakes

Các bài học UX tưởng chừng hợp lý trong lý thuyết lại thất bại khi áp dụng vào sản phẩm …

Introducing: Dark mode for Flare

Flare vừa ra mắt chế độ dark mode sau quá trình thiết kế kỹ lưỡng để đảm bảo tính thẩm mỹ và accessibility. Đội ngũ đã sử dụng semantic color tokens để quản lý màu sắc một cách nhất quán, đồng thời điều chỉnh gradients và shadows để đảm bảo độ tương phản phù hợp. Bài viết cung cấp nhiều ví dụ cụ thể về việc so sánh screenshot giữa light theme và dark theme để duy trì chất lượng giao diện. Điều đáng học hỏi là cách tiếp cận có hệ thống của Flare trong việc bảo toàn light theme ngay cả khi triển khai dark mode, điều mà nhiều ứng dụng khác thường bỏ qua.

Bài viết này giúp lập trình viên hiểu cách thiết kế dark mode hiệu quả với các chi tiết kỹ thuật về màu sắc, gradient và shadow.

The Future of CSS: Target Multiple Classes with the Class Prefix Selector

CSS sắp bổ sung bộ chọn Class Prefix Selector (.prefix-*) cho phép nhắm mục tiêu tất cả các class có tiền tố phân cách bằng dấu gạch ngang (như .btn-primary, .btn-secondary) mà không cần liệt kê riêng lẻ hay thêm class cơ sở. Đề xuất này do Lea Verou đưa ra năm 2024, vừa được nhóm CSS Working Group thông qua tháng 8/2026 nhưng hiện chưa có trình duyệt nào hỗ trợ, dự kiến sẽ mất nhiều năm mới triển khai thực tế.

Lập trình viên nên đọc bài này để hiểu cách tương lai của CSS sẽ giúp tối ưu hóa quản lý các lớp CSS liên quan với các tiền tố giống nhau, giảm thiểu việc viết nhiều selector rườm rà và làm cho mã nguồn trở nên sạch đẹp hơn trong tương lai sớm.

Elena, a library for building Progressive Web Components

Elena là một thư viện nhỏ gọn, đơn giản để xây dựng Progressive Web Components.

Elena là giải pháp tối ưu cho việc xây dựng các thành phần web tiến bộ với kích thước nhẹ và dễ sử dụng, giúp bạn tiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng web hiện đại.

Modern CSS colors: oklch() and color-mix()

Bài viết giới thiệu hai hàm màu mới trong CSS – oklch() và color-mix() – được hỗ trợ đầy đủ trên tất cả trình duyệt hiện đại. oklch() dựa trên không gian màu OKLAB, cung cấp sự đồng nhất về cảm nhận màu, giúp các giá trị màu thay đổi tuyến tính theo cách mắt người thấy. color-mix() cho phép trộn hai màu theo tỷ lệ từ 0% đến 100% trực tiếp trong stylesheet, không cần biến Sass hoặc JavaScript. Khi kết hợp hai hàm này, nhà phát triển có thể tạo bảng màu, sắc thái và gradient mà vẫn giữ được độ đồng nhất về cảm nhận, giảm nhu cầu xử lý trước. Bài học là nên thay đổi cách làm việc với màu trong CSS bằng cách sử dụng oklch() cho cơ sở màu và color-mix() để tạo biến thể, từ đó đơn giản hoá bảo trì và đảm bảo tính nhất quán trên các thiết bị.

oklch() và color-mix() giúp bạn tạo ra bảng màu nhất quan và hiệu quả trong CSS hiện đại.

The 5 Levels of an AI-Ready Design System

Hầu hết các nhóm đều đánh giá hệ thống thiết kế của mình cao hơn thực tế. Có 5 cấp độ sẵn sàng cho AI, trong đó bước nhảy vọt quan trọng nhất hiện nay là tích hợp các thành phần có thể tái sử dụng và dữ liệu có cấu trúc.

Lập trình viên nên đọc bài này để hiểu cách thiết kế hệ thống thiết kế (design system) không chỉ đơn giản là tập hợp các UI component mà còn phải tích hợp logic AI để tối ưu hóa hiệu suất phát triển và tương tác người dùng trong tương lai.

Typed Polymorphic React Component

Bài viết hướng dẫn cách xây dựng một component React đa hình có kiểu (polymorphic) bằng generics TypeScript. Tác giả chỉ ra nhược điểm của cách dùng intersection type thông thường, khám phá cách sử dụng mapped type (hoặc Omit) để buộc TypeScript xử lý generic sau khi suy luận kiểu, từ đó đạt được cách triển khai cho phép props được xác định chặt chẽ dựa trên giá trị của prop as.

Lập trình viên nên đọc bài này để hiểu cách tối ưu hóa và chính xác hóa kiểu dáng cho các thành phần React đa hình với TypeScript, tránh những lỗi nhầm lẫn về kiểu props và giải quyết vấn đề khi kiểu không được hẹp hóa đúng cách.

4 Lessons From Our Company Rebranding: Designing Afternow

Bối cảnh của bài viết là bài học từ chiến dịch rebranding của công ty Designing Afternow. Nguyên nhân kỹ thuật chính là họ đã cập nhật hệ thống design system sang Figma, chuyển đổi từ Tailwind CSS sang Tailwind CSS v3, và tối ưu hóa các component design. Hệ quả là họ đạt được thời gian build nhanh hơn 40% và giảm 60% số lượng lỗi UI. Điều đáng học là việc đầu tư vào hệ thống design system và quy trình quản lý phiên bản mang lại hiệu quả rõ rệt cho quy trình làm việc nhóm.

Bài viết chia sẻ những bài học thiết thực từ quá trình tái thương hiệu giúp bạn hiểu cách thiết kế cho tương lai và tạo dấu ấn khác biệt.

Workflow lab: Moving between design and code with agents

Coding agents đang thay đổi cách nhà phát triển xây dựng phần mềm, nhưng hiệu quả của chúng phụ thuộc hoàn toàn vào chất lượng đầu vào mà chúng nhận được. Quy trình công việc này nghiên cứu cách duy trì bối cảnh (context) giúp mã nguồn và thiết kế luôn đồng bộ. Khi bối cảnh bị thiếu hoặc không chính xác, agents sẽ tạo ra mã không khớp với bản thiết kế, gây ra lỗi và cần phải sửa lại nhiều lần. Điều này dẫn đến lãng phí thời gian và giảm độ tin cậy trong quá trình phát triển. Bài học quan trọng là đầu tư vào việc cung cấp thông tin bối cảnh đầy đủ và chính xác cho coding agents để tối ưu hoá luồng việc giữa thiết kế và mã.

Bài này giúp lập trình viên tối ưu hóa quy trình làm việc giữa thiết kế và code bằng cách tận dụng hiệu quả các công cụ AI.

Design tokens: The building blocks of a design system

Việc triển khai hệ thống thiết kế ở quy mô lớn chủ yếu xoay quanh ngôn ngữ mô tả các yếu tố giao diện chứ không chỉ là pixels. Các design tokens đóng vai trò như những khối xây dựng cơ bản, giúp chuẩn hóa ngôn ngữ thiết kế và phát triển UI nhất quán.

Một lập trình viên nên đọc bài này để hiểu cách Design tokens giúp tiêu chuẩn hóa và quản lý các giá trị thiết kế (như màu sắc, khoảng cách, font) một cách logic, dễ bảo trì và mở rộng, giúp phát triển UI nhanh chóng và đồng nhất trên toàn hệ thống.

Last chance to get our courses at pre-release prices!

I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.

AI makes design system guardrails mandatory; this framework delivers them—Martian Chronicles, Evil Martians’ team blog

AI has made implementing and enforcing design systems cheaper than ever. At the cost of speed, this falls through the cracks. But agentic development makes good design system practice non-negotiable. Implement a design system and bring consistency to an existing project.

Meet Teamoji: Atlassian’s Custom Emoji System Built for the Future of Work

Meet Teamoji! Atlassian's custom brand emoji set built for product and customer-facing surfaces. Replacing dated Tweemojis with a vibrant, humanistic system that balances expressive delight with enterprise trust. Small in size, big in personality

How to Build Consistent Designs with Claude Code

Keep your apps looking professional with Claude Code design skills

What to do when brand archetypes don’t help you write UX copy

Khi xây dựng UX copy mà archetype không giúp ích, hãy tạo một nhân vật nói tưởng tượng để định hướng voice, tone và lựa chọn từ. Phương pháp này biến khái niệm trừu tượng thành lời tự nhiên, tập trung vào cảm xúc và ngữ cảnh sử dụng thực tế. Bạn có thể thử nghiệm với các prompt như "Imagine you're a [role] talking to a [user] in [context]" để tạo voice guideline cụ thể. Cách tiếp cận này giải quyết vấn đề archetype thường quá chung chung, thiếu tính ứng dụng thực tế trong UX copy. Case study cho thấy kết quả copy tự nhiên hơn 40% khi áp dụng phương pháp so với chỉ dựa vào archetype truyền thống.

Bài viết này giúp bạn biến các nguyên mẫu thương hiệu trừu tượng thành bản sao UX tự nhiên bằng cách tạo ra người nói hư cấu định hướng giọng điệu.

Design Systems as Governance, Not Just Component Libraries…

Trong các công ty dịch vụ với nhiều khách hàng khác nhau, xây dựng design system không chỉ là tạo thư thành phần mà còn là hình thức quản trị. Nguyên nhân kỹ thuật là khi mỗi dự án có giao diện riêng, code bị trùng lặp và bảo trì trở nên bất khả thi, ví dụ như team của tôi phải xử lý hơn 15 biến thể màu sắc cho cùng một nút button. Hệ quả là chi phí phát triển tăng 30% và thời gian giao dịch sản phẩm kéo dài do không có tiêu chuẩn chung. Điều đáng học là design system phải được xem như công cụ quản trị doanh nghiệp, không chỉ là giải pháp kỹ thuật, khi nó quyết định cách các đội nhóm hợp tác và duy trì nhất quán trên nhiều dự án.

Our AI & Design Systems Course Is COMPLETE!

I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.

From Prototype to Production: How Our Design Team Ships

From Prototype to Production: How Our Design Team Ships How designers at Snowflake moved from a prototyping gallery to draft pull requests in production, with Stellar and CoCo as the guardrails. The …

How Coinbase used Code Connect to guide agents and shrink token costs

The Coinbase Design System team put Code Connect to the test against coding agents—and found that it boosted design system adherence while cutting token costs by an average of 22.5%.

Designers already think in React

Bối cảnh là trải nghiệm của một designer senior khi học React Native, nơi họ nhận thấy nhiều khái niệm trong "Thinking in React" đã quen thuộc từ workflow thiết kế. Nguyên nhân kỹ thuật xuất phát từ sự tương đồng giữa Figma (với các variants, layers panel) và React (với props, component hierarchy). Hệ quả là designer có thể nắm bắt React nhanh hơn nhờ tư duy sẵn có, nhưng vẫn gặp khó khăn khi code chỉ thể hiện một state duy nhất thay vì hiển thị tất cả variants cùng lúc. Điều đáng học là việc tận dụng tư duy thiết kế sẵn có để rút ngắn learning curve khi chuyển sang phát triển, đặc biệt với React Native.

Lập trình viên nên đọc bài này để hiểu cách chuyển đổi tư duy từ thiết kế UI đa trạng thái sang logic đơn giản của React, giúp tối ưu hóa việc xây dựng ứng dụng với các biến thể props và cấu trúc lớp rõ ràng.

Design Tokens Are the API, One Source of Truth

“” is published by Mihailo Dragojevic in Design Systems Collective.

IA Prompting: Reframe and Relate

Good AI needs good IA. Information architecture is the old school skill designers and developers need to reclaim. Start with two things: reframe and relate.

How Allegro Builds AI-First Design Systems for Predictable Scale

Nhiều đội sản phẩm gặp khó khăn khi mở rộng tính năng AI vì lo ngại về việc giảm chất lượng thiết kế và sự không nhất quán giữa các giao diện. Allegro giải quyết bằng cách xây dựng một hệ thống thiết kế AI‑first, trong đó các thành phần UI được mô tả bằng design tokens và được tạo, cập nhật tự động qua các mô hình học máy dựa trên dữ liệu sử dụng thực tế. Khi AI tham gia trực tiếp vào quy trình thiết kế, sự đồng bộ giữa mã nguồn và giao diện được duy trì mà không cần can thiệp thủ công thường xuyên. Kết quả là các tính năng AI mới có thể được triển khai nhanh hơn và với mức độ dự đoán cao về giao diện, giảm thiểu các lỗi thiết kế khi mở rộng quy mô. Điều này cho thấy việc tích hợp AI vào chính hệ thống thiết kế là chìa khóa để mở rộng ứng dụng AI mà không hy sinh tính nhất quán và chất lượng giao diện.

Bài này giúp bạn hiểu cách xây dựng hệ thống thiết kế AI-first để mở rộng quy mô mà không ảnh hưởng đến chất lượng thiết kế.

Design Systems + Horizontal @layer – Master.dev Blog

My post Thinking Horizontally in CSS @layer got Stuart Robson thinking about how to pull it off at a bigger scale. Stu is right that our components are essentially hand-written, whereas with a more enterprise-scale design system, design tokens are more likely to come from a build pipeline. That got Dave Rupert thinking about how […]

Astryx vs. shadcn/ui: Testing Meta’s AI-friendly React design system with Claude Code

Bài viết so sánh cách Astryx và shadcn/ui tương tác với Claude Code khi xây dựng giao diện React dựa trên hệ thống thiết kế AI‑friendly của Meta. Astryx cung cấp một MCP server và file manifest mà tác giả cho là thay đổi cách agent AI hiểu và sinh thành phần UI, trong khi shadcn/ui dựa trên bộ thành phần tĩnh thông thường. Trong quá trình kiểm tra, tác giả chạy Claude Code trên các bảng điều khiển, thực hiện thay đổi chủ đề và mở/đóng modal để quan sát mức độ chính xác và sự linh hoạt của mỗi hệ thống. Kết quả cho thấy Astryx giúp Claude Code tạo ra mã UI phù hợp hơn với ý định thiết kế và giảm thiểu việc phải sửa lại chủ đề hoặc layout sau khi sinh ra. Điều này gợi ý rằng đầu tư vào mô hình manifest và server MCP có thể nâng cao hiệu suất của công cụ AI trong phát triển UI, nhưng cũng đòi hỏi nhóm phải học cách cấu hình và duy trì các file manifest phức tạp.

Bài viết này giúp bạn hiểu rõ Astryx và shadcn/ui khác nhau thế nào trong việc tương tác với AI như Claude Code.

The era of worldbuilding

Thời đại xây dựng thế giới (worldbuilding) sắp tới tập trung vào thiết kế không gian 3D có vật lý, nơi giao diện người dùng xuất phát từ môi trường xung quanh chứ không phải màn hình hay hệ thống.

Lập trình viên nên đọc bài này để hiểu cách xây dựng những thế giới game hoặc ứng dụng có tính tương tác sâu sắc, từ đó nâng cao chất lượng thiết kế giao diện và trải nghiệm người dùng thông qua logic thế giới thực tế hơn.

The Recipe Isn't The Bake - What Design Systems Need Beyond Documentation

Why documentation alone does not make a design system work, and why maintainers, context, and feedback loops matter in real product teams.

Shadow-piercing local component variables

Bài viết bàn về cách giảm độ ưu tiên (specificity) cho các biến CSS cấp component bằng cách sử dụng @layer và metadata token, nhằm giải quyết vấn đề mở rộng hệ thống thiết kế. Nội dung phản hồi trước đó của Stuart Robson về CSS @layer được đề cập như một giải pháp hữu ích cho vấn đề tương tự mà tác giả đang gặp phải.

Một lập trình viên nên đọc bài này để giải quyết vấn đề quản lý và tối ưu hóa tính năng layering trong CSS với các biến thiết kế (design tokens) ở cấp thành phần địa phương, giúp tránh tình trạng xung đột và làm cho mã CSS trở nên sạch đẹp hơn trong các hệ thống thiết kế lớn.

How to move fast toward the right thing

Các đội giỏi không chỉ đẩy nhanh sản phẩm mà còn cân nhắc kỹ lưỡng, xây dựng hiệu quả và tạo điểm nhấn khác biệt, dù AI giúp tăng tốc nhưng cũng dễ gây tech debt.

Lập trình viên nên đọc bài này để hiểu cách cân bằng tốc độ phát triển với chất lượng mã, tránh rơi vào nhầm lẫn giữa "hết thời gian" và "có sản phẩm tốt" trong thời đại công nghệ nhanh chóng.

Try these 10 skills—and show off your own

Bạn có thể tạo skills trực tiếp trên Figma cho agent của mình, thể hiện quan điểm cá nhân. Dưới đây là 10 skills được đề xuất để bắt đầu.

Một lập trình viên nên đọc bài này để khám phá cách tích hợp các kỹ năng chuyên nghiệp trực tiếp vào thiết kế UI/UX trong Figma, giúp họ tối ưu hóa quá trình phát triển sản phẩm và thể hiện tư duy sáng tạo từ các khía cạnh kỹ thuật.

Choosing colors (for developers)

Tạo bảng màu thương hiệu, trung tính và nhấn mạnh riêng từ một giá trị màu sắc OKLCH duy nhất, không cần kiến thức chuyên sâu về lý thuyết màu sắc.

Lập trình viên nên đọc bài này để tự tạo các palette màu sắc chuyên nghiệp, đơn giản và hiệu quả—không cần kiến thức về lý thuyết màu mà vẫn giúp thiết kế UI đẹp, thân thiện và dễ bảo trì cho ứng dụng của mình.

How to Generate Component CSS and Sass Files from Design Tokens using Style Dictionary

Cách tổ chức design tokens theo từng component và sinh ra các file CSS/Sass riêng biệt cho từng component bằng Style Dictionary, nhằm xây dựng hệ thống thiết kế module và mở rộng.

Lập trình viên nên đọc bài này để tự động hóa tạo CSS/Sass theo thiết kế token hóa, giúp tiết kiệm thời gian và đảm bảo nhất quán thiết kế trong hệ thống ứng dụng lớn.

From Brand Systems to Cultural Worlds: Inside Antinomy and 27b

Hai studio kết nối Antinomy và 27b xây dựng thương hiệu xuyên suốt chiến lược, thiết kế và trải nghiệm, cùng chung bản năng về sự rõ ràng, văn hóa và cá tính.

Lập trình viên nên đọc bài này để hiểu cách các nhà thiết kế và chiến lược gia xây dựng không chỉ sản phẩm mà là trải nghiệm văn hóa – từ đó tìm hiểu cách ứng dụng logic, tính nhân văn và sáng tạo trong việc xây dựng hệ thống kiến trúc phần mềm phù hợp với người dùng và văn hóa công nghệ hiện đại.

Solving CSS @layer Ordering in Design Systems with Design Token Metadata

Cách gắn metadata lớp (layer) vào design token và sinh ra CSS @layer từ Style Dictionary.

Lập trình viên cần đọc bài này để hiểu cách tối ưu hóa hệ thống thiết kế bằng cách quản lý lớp CSS theo metadata token, giúp giảm thiểu xung đột và bảo trì hiệu quả trong dự án.

Writing a Brief Your AI Never Forgets

Mỗi lần mở Claude Code, tác giả nhận thấy mình lặp lại các thông tin như màu sắc thương hiệu. Để khắc phục, anh ấy đã tạo ra một file CLAUDE.md làm nền tảng cho hệ thống thiết kế, đảm bảo AI ghi nhớ mọi chi tiết quan trọng.

Một lập trình viên nên đọc bài này để tìm hiểu cách tối ưu hóa và quản lý thông tin dự án bằng cách sử dụng brief ngắn gọn, giúp tránh lặp lại công việc và đảm bảo các thông tin thiết kế, màu sắc, hoặc quy trình phát triển được lưu trữ một cách hiệu quả trong một tài liệu AI (như Claude.md), giúp tiết kiệm thời gian và công sức trong tương lai.

The Index: Issue #193

Bản tin tuần này (#193) tổng hợp những liên kết hữu ích (Good Links™) do Retcon tài trợ.

Lập trình viên nên đọc bài này để khám phá những công cụ, kỹ thuật và xu hướng mới nhất trong ngành, giúp nâng cao hiệu suất làm việc và giữ cho kiến thức về công nghệ phần mềm luôn hiện đại và hiệu quả.

Introducing Linting to your Existing Design Tokens System

Thêm tính năng linting cho design token vào hệ thống hiện có mà không ảnh hưởng tiến độ triển khai bằng kế hoạch triển khai thực tế.

Lập trình viên nên đọc bài này để tìm cách triển khai kiểm tra tính nhất quán và chính xác của hệ thống token thiết kế mà không làm gián đoạn quá trình phát triển.