# When to Use Official Design Systems vs Custom CSS for AI-Generated Frontends: A Taste Skill Guide

> Choose between official design systems or custom CSS for AI frontends. Learn when to use Fluent UI, Material, Carbon, or Tailwind for unique aesthetics.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: best-practices
- Published: 2026-06-01

---

**Use official design systems like Fluent UI, Material, or Carbon only when the brief explicitly signals a Microsoft, Google, or IBM-style interface; otherwise, default to Tailwind CSS or native styles for unique aesthetics and lightweight MVPs.**

The Leonxlnx/taste-skill repository provides an architectural framework that removes guesswork from frontend technology selection. By treating the choice between vendor-backed component libraries and hand-crafted styles as a deterministic mapping rather than a preference, the skill ensures AI-generated frontends balance **brand fidelity** with **maintainability** while following strict rules about dependency management.

## The Design System Map: How Taste Skill Makes the Choice

Immediately after parsing a brief, the skill consults the **Design System Map** located in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) to determine the implementation path. According to Section 2, this map functions as a decision tree that matches brief signals to specific technology stacks.

If the brief describes a Microsoft-style dashboard, Google-flavored product, or IBM-style analytics interface, the skill automatically installs the corresponding official package—such as `@fluentui/react-components`, `@material/web`, or `@carbon/react`—and constructs the UI atop that foundation【https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L86-L92】.

Conversely, when the brief specifies visual aesthetics like glassmorphism, brutalism, editorial layouts, or "Apple-liquid-glass" effects, the skill recognizes that **no single official package exists** for these styles. In these cases, it falls back to native CSS or Tailwind utilities and explicitly labels the output as a custom approximation【https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L106-L118】.

## When to Use Official Design Systems (Fluent UI, Material, Carbon)

Official design systems provide three critical advantages that justify their bundle size and dependency overhead.

**Accessibility and Token Compliance** – Fluent UI, Material 3, and Carbon ship with rigorously tested accessibility patterns and design tokens that match their vendor's canonical design language. This ensures WCAG compliance without additional configuration.

**Future-Proof Maintenance** – By consuming upstream updates automatically, projects avoid the technical debt of hand-rolled equivalents. When Microsoft or Google releases new theme tokens or bug fixes, these propagate through the package manager rather than requiring manual CSS patches.

**Consistent Visual Language** – When a product must "look like Microsoft SaaS" or "behave like a Shopify admin," recreating that visual language from scratch introduces fidelity risks. Official packages guarantee brand-level consistency through standardized components.

### Fluent UI Implementation Example

When the brief signals a Microsoft ecosystem, the skill generates code like this:

```tsx
// src/app/page.tsx – Fluent UI React (v9) example
"use client";

import { Button, TextField } from "@fluentui/react-components";

export default function Dashboard() {
  return (
    <section className="p-8">
      <h1 className="text-4xl font-semibold mb-6">
        Admin Dashboard
      </h1>

      <Button appearance="primary">Create Report</Button>

      <div className="mt-4">
        <TextField label="Search users" />
      </div>
    </section>
  );
}

```

The skill adds `@fluentui/react-components` to [`package.json`](https://github.com/Leonxlnx/taste-skill/blob/main/package.json) before emitting this code, ensuring the dependency tree reflects the architectural choice.

### Material 3 Web Components

For Google-style interfaces, the skill imports Material Web components:

```tsx
// src/components/PrimaryButton.tsx – Material Web example
import "@material/web/button/filled-button.js";

export default function PrimaryButton({ children }: { children: React.ReactNode }) {
  return (
    <md-filled-button className="bg-primary text-on-primary">
      {children}
    </md-filled-button>
  );
}

```

## When to Default to Custom CSS and Tailwind

Not every visual direction maps to a corporate design system. The Taste Skill framework identifies three scenarios where custom implementation outperforms official libraries.

**Aesthetic-Only Briefs** – Styles like glassmorphism, neo-brutalism, or editorial web design lack corresponding official packages. Here, the skill uses Tailwind utilities or plain CSS, adding only minimal helpers (such as `backdrop-filter` for glass effects or CSS Grid for Bento layouts).

**Lightweight MVPs** – For fast-turnaround local business or agency prototypes, the skill defaults to **Bootstrap 5.3** or pure Tailwind. Pulling a full component library like Carbon would introduce unnecessary bundle overhead for a temporary proof-of-concept【https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L97-L101】.

**Honest Approximation** – When implementing custom aesthetics, the skill inserts comments acknowledging that the implementation is an *approximation* because no official package exists for that specific visual style【https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L112-L119】.

### Glassmorphism with Tailwind

For a glassmorphism aesthetic, the skill generates:

```tsx
export default function GlassCard({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-white/30 backdrop-blur-sm rounded-xl p-6 border border-white/20">
      {children}
    </div>
  );
}

```

This approach avoids importing heavy component libraries when only CSS filters and transparency are required.

## The One-System-Per-Project Rule

Regardless of whether an official design system or custom CSS is selected, the repository enforces a strict architectural constraint: **exactly one system per project**. This rule, codified at lines 104-105 of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), prevents the bundle bloat and coherence degradation that results from mixing multiple design languages.

If a project starts with Fluent UI but the brief later shifts to Carbon, the skill **replaces** the dependency rather than mixing them:

```json
// package.json (generated by the skill)
{
  "dependencies": {
    "@fluentui/react-components": "^9.0.0",
    // ❌ DO NOT add @carbon/react in the same project – the skill will warn
  }
}

```

This invariant keeps the dependency graph clean and ensures visual consistency throughout the application lifecycle.

## Summary

- **Consult the Design System Map** in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) immediately after reading the brief to determine the technology stack【https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L86-L92】.
- **Use official design systems** (Fluent UI, Material, Carbon) only when the brief explicitly matches Microsoft, Google, or IBM ecosystems to guarantee accessibility and brand fidelity.
- **Default to Tailwind or native CSS** for aesthetic-driven briefs (glassmorphism, brutalism) or lightweight MVPs, explicitly labeling these as custom approximations.
- **Enforce the one-system rule** strictly—never mix Fluent UI with Carbon or other libraries in the same project to maintain bundle size and coherence【https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L104-L105】.

## Frequently Asked Questions

### Can I mix Fluent UI and Carbon components in the same project?

No. The Taste Skill framework explicitly forbids mixing multiple design systems. According to [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), enforcing exactly one system per project prevents bundle size inflation and visual incoherence. If the brief changes mid-stream, the skill replaces the existing dependency rather than adding a second library【https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L104-L105】.

### What happens if the brief describes a "glassmorphism" style?

The skill recognizes that no official "glass-css" package exists and falls back to Tailwind utilities or native CSS implementing `backdrop-filter` and transparency effects. It marks the resulting code as a custom approximation rather than a standardized component, as documented in the Design System Map【https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L106-L118】.

### Does Taste Skill support Bootstrap for prototyping?

Yes. For lightweight MVPs and fast-turnaround prototypes where full design systems would be overkill, the skill defaults to **Bootstrap 5.3** or pure Tailwind. This policy is defined in the brief-to-stack mapping to avoid unnecessary dependency overhead for temporary projects【https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md#L97-L101】.

### How does the skill handle maintenance for official vs custom implementations?

Official design systems receive automatic updates through the package manager, ensuring future-proof maintenance and accessibility compliance. Custom CSS implementations remain static unless manually updated, and the skill labels them as approximations to set appropriate maintenance expectations. The [`CHANGELOG.md`](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) clarifies this distinction: official packages are preferred only when the brief maps to a known system, otherwise web standards and honest labeling prevail【https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md#L27-L28】.