Coze is a next-generation AI app development platform. It supports zero-code building, debugging, and publishing as apps or programs on social media, primarily targeting companies and individual developers.  

In its early stages, Coze lacked a complete design system, forcing designers to either heavily modify assets from other projects or create everything from scratch. This led to inefficiencies and inconsistencies in the final deliverables.  

After joining the Coze team, I am responsible for establishing and maintaining a unified, flexible, and user-friendly design system for Coze, including styles, resources, components, patterns, and more.

Coze Design System includes

and more

Color

For different usage scenarios, “high-contrast colors” and “low-contrast colors” is supported. 

Currently, color variables have covered all designs, enabling switching between light and dark modes with “one-click”.

.

“High-contrast colors” appear very light in dark mode and very dark in light mode. They are used for neutral text, theme elements, AI elements, etc., ensuring readability.















“Low-contrast colors” appear similar in light and dark modes. They are applied to functional colors (alerts, warnings, success), avatars, charts, etc., ensuring color consistency.

Text

Grenadian text sizes are supported. Additionally, wordings and writing formats are provided based on language, currency, and calendar differences.

Size and Layout

The platform features numerous integrated development environment pages; therefore, the layouts are relatively compact and adopt a Bento-style grid. Additionally, various layout styles, including both fixed and adaptive, are offered.

.

System Icons

All icons follow a unified standard and are organized by type, including outlined, fill, slash, circle, multicolor, etc.

All icons are hosted on the online platform and maintained by designers, allowing for hot swapping.










Brand Logos

A collection of Coze and third-party brand logos, making it convenient for team members to use.

Illustrations

A gallery of various illustrations and other visual materials used in the system. Lay a foundation for style crackdowns in the future.

.

Component

Components are divided into six categories: Action & Menu, Status, Selection & Input, Content, Presentation, and Navigation & layout. Currently, there are 66 components, including Button, Tag, Select, Input, Avatar, Dialog, Navigation, etc.

Over half of the elements on most pages can now be built using these components, with some pages achieving 100% coverage. As the component library continues to improve, designers' efficiency will increase further.

In addition to the components, usage guidelines and best practices for each component have been compiled to assist team members. These contents will continue to improve with the development of the project.

How do they look when combined?

Beyond building individual components, every detail was refined to make them work in perfect harmony across all scenarios.

.

Pattern

Some styles are not components but appear multiple times across different elements with unique patterns. These styles have been compiled into “Pattern”.

Examples include: expand/collapse scenarios, tree structures, selected states, sorting scenarios, AI-generate scenarios, info icons, number blocks, etc.

As the project evolves, some of these patterns may be transferred into the component library.

Mobile Component Library

It’s only a sneak peek of the whole design system. Many details haven’t been explored. For instance, a mobile component library has been developed. Coze has a few mobile pages, and there’s no standardized component library yet. We plan to gradually develop mobile components, starting from atomic components to complex components.

Furthermore, mobile vs. desktop differences must be considered: For instance, mobile interfaces rely on touch interaction with a lower precision, which requires larger hot zones. No hover state: content within Tooltips must be displayed directly. Smaller screens: secondary information is often organized on a different page rather than including everything on one page.

Challenges in Engineering Component Library Implementation

Ensuring high-quality design component delivery is crucial, but implementing it on code poses its challenges. Given limited engineering resources, we’ve encountered many issues. Over the past year, we’ve developed several solutions:

For urgent issues: If the component engineers can’t provide immediate support, business engineers fix the issue. The code will be later reviewed and merged into the library by component engineers. For general improvements: Prioritized by usage frequency and importance, addressed in batches. For low-priority cases: If resources are unavailable, legacy components may be used temporarily until newer versions are ready.

Component Library Principles

Using a component library is a method, not a purpose. For designers, its purpose is to ensure consistency and efficiency. For developers, its purpose is to improve development speed. In the early stages of a project, if there are still many uncertainties regarding the functions, investing in a detailed component library is inadvisable. Instead, focus on flexibility until the product stabilizes.