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.  

Coze's original design style was very businesslike and formal, lacking a bit of fun and personality. We also want to add a little bit of the geeky vibe.

Moreover, 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, one of my main tasks was to establish and maintain the Coze Design System (including Style, Resource, Component, Pattern, and more), as well as assist other team members as the component person of contact.

Color

Since our primary users are developers who frequently work with code, we plan to add a dark mode option alongside the existing light mode. This will utilize color variables to enable "one-click switching" between light and dark modes.

Currently, color variables have covered all designs.

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

“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.

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 designer (me), 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.

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.

New Icons

I drew a large "Shopping Cart" in the Figma. When business designers need to add new icons, they place them in this "Shopping Cart." If necessary, I‘ll adjust the icons according to Coze’s icon design guidelines, rename them, and integrate them into Coze‘s resource library. Then, I upload the new icons to the IconBox platform and release a new version. Finally, I’ll notify the business team of the new version number and update it in my signature on Lark. Developers only need to update the version number to access the newly added icons.

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.

Communication

Given that the component library involves numerous detailed tasks and multiple teams, communication becomes crucial to support cross-team collaboration.

Feishu Docs & Sheets
Whenever there are updates to the component library, I document them in the Component Library Changelog. I also maintain a Component Progress sheet to summarize the readiness status of all components (both UI and development sides) for reference by business teams.

Meetings & Private Talks
Every week, I organize a Component Library Sync Meeting with the UI team to communicate new additions to business designers. During these meetings, team members can raise requests for new features or improvements. They can also discuss it with me privately during the week.

Lark Messages
After each weekly UX review meeting, I anticipate potential new component needs and notify the component engineers in advance. Following the UI Component Library Sync Meeting, I’ll notify finalized updates to the development team. Finally, as the dev team rolls out updates to the component library, I share the newly added/ready components in the Coze Design and Develoment group chat on Lark weekly, ensuring stakeholders can leverage the latest features.

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.