skills.rest
coco-de
coco-deOFFICIAL
Explore all skills by this author →
GitHub

design-system

Define and customize CoUI design tokens and themes for Flutter and Web.

Updated Aug 27, 2026
Search Tags:#theming#web development#design system#tokens#flutter#coui
One-click install
npx skills add https://github.com/coco-de/skills --skill design-system-coco-de
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/coco-de/skills/tree/main/plugins/cc-uiux-design/skills/design-system
Command: npx skills add https://github.com/coco-de/skills --skill design-system-coco-de

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the definition and customization of design tokens and themes for the CoUI design system, ensuring consistency across Flutter and Web platforms.

Core Features & Use Cases

  • Define Design Tokens: Create and modify color, typography, spacing, and motion tokens.
  • Customize Themes: Adapt CoUI themes or switch between different design systems (CoUI, M3 Expressive, Liquid Glass).
  • Ensure Cross-Platform Consistency: Validate that themes are applied correctly in both Flutter and Jaspr Web implementations.
  • Use Case: When introducing a new brand color or adjusting the default button radius, use this Skill to update the CoreThemeData and ensure all components reflect the changes seamlessly.

Quick Start

Update the primary color token in the CoUI design system to a new hex value.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage design tokens for consistent theming across Flutter and Web?▼

Manage design tokens for Flutter and Web theming by defining color schemes, typography scales, spacing, and motion configurations in a centralized system. This ensures cross-platform consistency by validating customized themes against both coui_flutter and coui_web implementations.

What is the best way to customize design system themes for different UI styles?▼

Customize design system themes by switching between predefined system variations like CoUI, M3 Expressive, and Liquid Glass. Modify CoreThemeData to introduce new brand colors or adjust component radii, ensuring all UI components reflect the changes seamlessly.

Can I use Jaspr Web implementations to validate cross-platform design token consistency?▼

Validate cross-platform design token consistency using Jaspr Web implementations alongside Flutter. The system checks that customized themes and tokens are applied correctly across both platforms, ensuring uniform rendering and preventing visual discrepancies.

How do I define spacing and motion tokens for a Web and Flutter design system?▼

Define spacing, radii, component sizes, durations, and motion configurations for a Web and Flutter design system using coui_core. This centralized token management ensures that structural and animated UI elements remain consistent across all platform implementations.

Does updating a primary color token automatically affect component sizes and typography scales?▼

Updating a primary color token updates color schemes across the system, while typography scales, spacing, and component sizes are managed as separate tokens. All these definitions are integrated within CoreThemeData to ensure synchronized application across components.

Related Skills

Explore More Design & Creative Skills→
bear2ubear2u
905

flutter-init

Automate Flutter project setup with Clean Architecture and Riverpod.

Community
Intermediate
mintuzmintuz
21

tailwind

Standardize Tailwind design systems with semantic tokens, CVA variants, and dark-mode theming.

Community
Intermediate
first-flukefirst-fluke
218

webf-native-ui-dev

Wrap Flutter widgets as HTML custom elements using WebF tooling.

Official
Advanced
faw01faw01
18

building-native-ui

Implement native-feeling mobile UI with Expo Router and platform-specific components.

Community
Intermediate