diff --git a/web/app/components/app-sidebar/snippet-info/dropdown.tsx b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
index 4022c6f3ec..1e1bddf615 100644
--- a/web/app/components/app-sidebar/snippet-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
@@ -2,6 +2,7 @@
 
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { SnippetDetail } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -24,7 +25,7 @@ import { toast } from '@/app/components/base/ui/toast'
 import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
 import { useRouter } from '@/next/navigation'
 import { useDeleteSnippetMutation, useExportSnippetMutation, useUpdateSnippetMutation } from '@/service/use-snippets'
-import { cn } from '@/utils/classnames'
+
 import { downloadBlob } from '@/utils/download'
 
 type SnippetInfoDropdownProps = {
@@ -170,10 +171,10 @@ const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
       <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
         <AlertDialogContent className="w-[400px]">
           <div className="space-y-2 p-6">
-            <AlertDialogTitle className="text-text-primary title-lg-semi-bold">
+            <AlertDialogTitle className="title-lg-semi-bold text-text-primary">
               {t('deleteConfirmTitle')}
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-text-tertiary system-sm-regular">
+            <AlertDialogDescription className="system-sm-regular text-text-tertiary">
               {t('deleteConfirmContent')}
             </AlertDialogDescription>
           </div>
diff --git a/web/app/components/app-sidebar/snippet-info/index.tsx b/web/app/components/app-sidebar/snippet-info/index.tsx
index e47f14fe9e..cc1f867026 100644
--- a/web/app/components/app-sidebar/snippet-info/index.tsx
+++ b/web/app/components/app-sidebar/snippet-info/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { SnippetDetail } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import { cn } from '@/utils/classnames'
 import SnippetInfoDropdown from './dropdown'
 
 type SnippetInfoProps = {
@@ -19,7 +19,7 @@ const SnippetInfo = ({
   const { t } = useTranslation('snippet')
 
   return (
-    <div className={cn('flex flex-col', expand ? 'px-2 pb-1 pt-2' : 'p-1')}>
+    <div className={cn('flex flex-col', expand ? 'px-2 pt-2 pb-1' : 'p-1')}>
       <div className={cn('flex flex-col', expand ? 'gap-2 rounded-xl p-2' : '')}>
         <div className={cn('flex', expand ? 'items-center justify-between' : 'items-start gap-3')}>
           <div className={cn('shrink-0', !expand && 'ml-1')}>
@@ -34,16 +34,16 @@ const SnippetInfo = ({
         </div>
         {expand && (
           <div className="min-w-0">
-            <div className="truncate text-text-secondary system-md-semibold">
+            <div className="system-md-semibold truncate text-text-secondary">
               {snippet.name}
             </div>
-            <div className="pt-1 text-text-tertiary system-2xs-medium-uppercase">
+            <div className="system-2xs-medium-uppercase pt-1 text-text-tertiary">
               {t('typeLabel')}
             </div>
           </div>
         )}
         {expand && snippet.description && (
-          <p className="line-clamp-3 break-words text-text-tertiary system-xs-regular">
+          <p className="system-xs-regular line-clamp-3 break-words text-text-tertiary">
             {snippet.description}
           </p>
         )}
diff --git a/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx b/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
index 3e4a9cb5c7..39aad51ffd 100644
--- a/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
+++ b/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
@@ -2,6 +2,7 @@
 
 import type { EvaluationWorkflowAssociatedTarget, EvaluationWorkflowAssociatedTargetType } from '@/types/evaluation'
 import type { I18nKeysWithPrefix } from '@/types/i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
@@ -13,7 +14,6 @@ import {
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 
 type EvaluationWorkflowSwitchConfirmDialogProps = {
   open: boolean
@@ -80,7 +80,7 @@ const DependentTargetItem = ({
         <span className={cn(meta.icon, 'size-5')} />
       </span>
       <span className="flex min-w-0 flex-1 flex-col gap-1 py-px">
-        <span className="truncate system-md-semibold text-text-secondary">
+        <span className="system-md-semibold truncate text-text-secondary">
           {targetName}
         </span>
         <span className="system-2xs-medium-uppercase text-text-tertiary">
@@ -108,10 +108,10 @@ const EvaluationWorkflowSwitchConfirmDialog = ({
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent className="w-[480px]">
         <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-          <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
+          <AlertDialogTitle className="title-2xl-semi-bold w-full text-text-primary">
             {t('common.switchToStandardWorkflowConfirm.title', { ns: 'workflow' })}
           </AlertDialogTitle>
-          <AlertDialogDescription className="w-full system-md-regular text-text-secondary">
+          <AlertDialogDescription className="system-md-regular w-full text-text-secondary">
             <span className="block">
               {t('common.switchToStandardWorkflowConfirm.activeIn', { ns: 'workflow', count: targets.length })}
             </span>
@@ -123,7 +123,7 @@ const EvaluationWorkflowSwitchConfirmDialog = ({
 
         <div className="flex flex-col gap-2 px-6 py-3">
           <div className="flex items-center gap-2">
-            <span className="shrink-0 system-xs-medium-uppercase text-text-quaternary">
+            <span className="system-xs-medium-uppercase shrink-0 text-text-quaternary">
               {t('common.switchToStandardWorkflowConfirm.dependentWorkflows', { ns: 'workflow' })}
             </span>
             <span className="h-px min-w-0 flex-1 bg-divider-subtle" />
diff --git a/web/app/components/app/workflow-log/evaluation-cell.tsx b/web/app/components/app/workflow-log/evaluation-cell.tsx
index 8cb3770681..3e49015454 100644
--- a/web/app/components/app/workflow-log/evaluation-cell.tsx
+++ b/web/app/components/app/workflow-log/evaluation-cell.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { EvaluationLogItem } from '@/models/log'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -9,7 +10,6 @@ import {
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
 import { getNodeVisual, getToneClasses } from '@/app/components/evaluation/components/metric-selector/utils'
-import { cn } from '@/utils/classnames'
 
 type EvaluationCellProps = {
   evaluation: EvaluationLogItem[]
@@ -30,7 +30,7 @@ const EvaluationCell = ({
 
   if (!evaluation.length) {
     return (
-      <div className="flex items-center justify-center px-2 py-3 system-sm-regular text-text-quaternary">
+      <div className="system-sm-regular flex items-center justify-center px-2 py-3 text-text-quaternary">
         -
       </div>
     )
@@ -73,19 +73,19 @@ const EvaluationCell = ({
                 )}
               >
                 <div className="min-w-0">
-                  <div className="truncate system-sm-medium text-text-secondary">{item.name}</div>
+                  <div className="system-sm-medium truncate text-text-secondary">{item.name}</div>
                   {item.nodeInfo && nodeVisual && nodeToneClasses && (
                     <div className="mt-1 flex min-w-0 items-center gap-1.5">
                       <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
                         <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
                       </div>
-                      <span className="truncate system-xs-regular text-text-tertiary">
+                      <span className="system-xs-regular truncate text-text-tertiary">
                         {item.nodeInfo.title}
                       </span>
                     </div>
                   )}
                 </div>
-                <div className="max-w-[120px] text-right system-sm-regular wrap-break-word text-text-secondary">
+                <div className="system-sm-regular max-w-[120px] text-right wrap-break-word text-text-secondary">
                   {formatEvaluationValue(item.value)}
                 </div>
               </div>
diff --git a/web/app/components/apps/app-type-filter.tsx b/web/app/components/apps/app-type-filter.tsx
index a7979daade..a1401100ae 100644
--- a/web/app/components/apps/app-type-filter.tsx
+++ b/web/app/components/apps/app-type-filter.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { AppListCategory } from './app-type-filter-shared'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -12,7 +13,6 @@ import {
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { isAppListCategory } from './app-type-filter-shared'
 
 const chipClassName = 'flex h-8 items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-[13px] leading-[18px] text-text-secondary hover:bg-components-input-bg-hover'
diff --git a/web/app/components/apps/creators-filter.tsx b/web/app/components/apps/creators-filter.tsx
index 4bcff660e5..9a00ccab6f 100644
--- a/web/app/components/apps/creators-filter.tsx
+++ b/web/app/components/apps/creators-filter.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
@@ -12,7 +13,6 @@ import {
 } from '@/app/components/base/ui/dropdown-menu'
 import { useAppContext } from '@/context/app-context'
 import { useMembers } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 
 type CreatorsFilterProps = {
   value: string[]
diff --git a/web/app/components/apps/studio-route-switch.tsx b/web/app/components/apps/studio-route-switch.tsx
index 53f1337d06..18235f9b74 100644
--- a/web/app/components/apps/studio-route-switch.tsx
+++ b/web/app/components/apps/studio-route-switch.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import type { StudioPageType } from '.'
+import { cn } from '@langgenius/dify-ui/cn'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   pageType: StudioPageType
@@ -18,7 +18,7 @@ const StudioRouteSwitch = ({
   showSnippets = true,
 }: Props) => {
   return (
-    <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-[1px]">
+    <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-px">
       <Link
         href="/apps"
         className={cn(
diff --git a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
index d8735065e2..4da6f6fe48 100644
--- a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
@@ -1,5 +1,6 @@
 import type { EvaluationResourceProps } from '../../types'
 import type { EvaluationLog, EvaluationLogFile } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
 import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,6 @@ import {
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
 import { consoleClient, consoleQuery } from '@/service/client'
-import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
 
@@ -92,15 +92,15 @@ const HistoryTab = ({
           </colgroup>
           <thead>
             <tr className="border-b border-divider-regular">
-              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">
                 <span className="inline-flex items-center gap-0.5">
                   {t('history.columns.time')}
                   <span aria-hidden="true" className="i-ri-arrow-down-line h-3.5 w-3.5" />
                 </span>
               </th>
-              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</th>
-              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</th>
-              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</th>
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.creator')}</th>
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.version')}</th>
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.status')}</th>
               <th className="h-7 text-center text-text-tertiary">
                 <span aria-hidden="true" className="i-ri-download-2-line inline-block h-3.5 w-3.5" />
               </th>
@@ -128,9 +128,9 @@ const HistoryTab = ({
                     setSelectedRunId(resourceType, resourceId, runId)
                 }}
               >
-                <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{formatCreatedAt(record.created_at)}</td>
-                <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.created_by}</td>
-                <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.version || '-'}</td>
+                <td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{formatCreatedAt(record.created_at)}</td>
+                <td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{record.created_by}</td>
+                <td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{record.version || '-'}</td>
                 <td className="h-10 px-3 text-center">
                   {record.result_file
                     ? <span aria-label={t('history.status.completed')} className="i-ri-checkbox-circle-fill inline-block h-4 w-4 text-util-colors-green-green-600" />
@@ -181,7 +181,7 @@ const HistoryTab = ({
           </tbody>
         </table>
         {!isInitialLoading && records.length === 0 && (
-          <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center system-sm-regular text-text-tertiary">
+          <div className="system-sm-regular rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center text-text-tertiary">
             {t('history.empty')}
           </div>
         )}
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
index 895eeb3f59..99ee09af11 100644
--- a/web/app/components/evaluation/components/batch-test-panel/index.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import type { BatchTestTab, EvaluationResourceProps } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useSaveEvaluationConfigMutation } from '@/service/use-evaluation'
-import { cn } from '@/utils/classnames'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
 import { buildEvaluationConfigPayload } from '../../store-utils'
 import { TAB_CLASS_NAME } from '../../utils'
@@ -65,7 +65,7 @@ const BatchTestPanel = ({
         <div className="flex items-start justify-between gap-3">
           <div className="min-w-0">
             <div className="system-xl-semibold text-text-primary">{t('batch.title')}</div>
-            <div className="mt-1 system-sm-regular text-text-tertiary">{t('batch.description')}</div>
+            <div className="system-sm-regular mt-1 text-text-tertiary">{t('batch.description')}</div>
           </div>
           <Button
             className="shrink-0"
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
index 0be65bd654..e19209ffb5 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
@@ -1,5 +1,6 @@
 import type { ChangeEvent, DragEvent } from 'react'
 import type { InputField } from './input-fields-utils'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
@@ -8,7 +9,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
-import { cn } from '@/utils/classnames'
 import { getExampleValue } from './input-fields-utils'
 
 type UploadRunPopoverProps = {
@@ -92,10 +92,10 @@ const UploadRunPopover = ({
                       <span aria-hidden="true" className="i-ri-file-excel-fill h-6 w-6 text-util-colors-green-green-600" />
                     </div>
                     <div className="min-w-0 flex-1 py-1 pr-2">
-                      <div className="truncate system-xs-medium text-text-secondary">
+                      <div className="system-xs-medium truncate text-text-secondary">
                         {currentFileName}
                       </div>
-                      <div className="mt-0.5 flex h-3 items-center gap-1 system-2xs-medium text-text-tertiary">
+                      <div className="system-2xs-medium mt-0.5 flex h-3 items-center gap-1 text-text-tertiary">
                         {!!currentFileExtension && <span className="uppercase">{currentFileExtension}</span>}
                         {!!currentFileExtension && !!currentFileSize && <span className="text-text-quaternary">·</span>}
                         {!!currentFileSize && <span>{currentFileSize}</span>}
@@ -138,7 +138,7 @@ const UploadRunPopover = ({
                         {' '}
                         {t('batch.uploadDropzoneSuffix')}
                       </div>
-                      <div className="mt-0.5 system-xs-regular text-text-tertiary">
+                      <div className="system-xs-regular mt-0.5 text-text-tertiary">
                         {t('batch.uploadDropzoneDownloadPrefix')}
                         {' '}
                         <button
@@ -159,10 +159,10 @@ const UploadRunPopover = ({
                 <div className="flex overflow-hidden rounded-lg border border-divider-regular">
                   {previewFields.map((field, index) => (
                     <div key={field.name} className={cn('min-w-0 flex-1', index < previewFields.length - 1 && 'border-r border-divider-subtle')}>
-                      <div className="min-h-8 border-b border-divider-regular px-3 py-2 system-xs-medium-uppercase text-text-tertiary">
+                      <div className="system-xs-medium-uppercase min-h-8 border-b border-divider-regular px-3 py-2 text-text-tertiary">
                         {field.name}
                       </div>
-                      <div className="min-h-8 px-3 py-2 system-sm-regular text-text-secondary">
+                      <div className="system-sm-regular min-h-8 px-3 py-2 text-text-secondary">
                         {getExampleValue(field, booleanExampleValue)}
                       </div>
                     </div>
diff --git a/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
index 9e370e565a..cbe44c05b2 100644
--- a/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
+++ b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { ConditionMetricOptionGroup, EvaluationResourceProps } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -11,7 +12,6 @@ import {
   SelectItem,
   SelectTrigger,
 } from '@/app/components/base/ui/select'
-import { cn } from '@/utils/classnames'
 import { useEvaluationStore } from '../../store'
 import { getConditionMetricValueTypeTranslationKey } from '../../utils'
 
@@ -46,7 +46,7 @@ const AddConditionSelect = ({
       <SelectContent placement="bottom-start" popupClassName="w-[320px]">
         {metricOptionGroups.map(group => (
           <SelectGroup key={group.label}>
-            <SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{group.label}</SelectGroupLabel>
+            <SelectGroupLabel className="system-xs-medium-uppercase px-3 pt-2 pb-1 text-text-tertiary">{group.label}</SelectGroupLabel>
             {group.options.map(option => (
               <SelectItem
                 key={option.id}
@@ -58,8 +58,8 @@ const AddConditionSelect = ({
                 }}
               >
                 <div className="flex min-w-0 flex-1 items-center gap-3">
-                  <span className="truncate system-sm-medium text-text-secondary">{option.itemLabel}</span>
-                  <span className="ml-auto shrink-0 system-xs-medium text-text-tertiary">
+                  <span className="system-sm-medium truncate text-text-secondary">{option.itemLabel}</span>
+                  <span className="system-xs-medium ml-auto shrink-0 text-text-tertiary">
                     {t(getConditionMetricValueTypeTranslationKey(option.valueType))}
                   </span>
                 </div>
diff --git a/web/app/components/evaluation/components/conditions-section/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
index 1f2ac8de43..c37fb615dc 100644
--- a/web/app/components/evaluation/components/conditions-section/condition-group.tsx
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -6,10 +6,11 @@ import type {
   EvaluationResourceProps,
   JudgmentConditionItem,
 } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Select,
   SelectContent,
@@ -19,7 +20,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/app/components/base/ui/select'
-import { cn } from '@/utils/classnames'
 import { getAllowedOperators, requiresConditionValue, useEvaluationResource, useEvaluationStore } from '../../store'
 import {
   buildConditionMetricOptions,
@@ -71,15 +71,15 @@ const ConditionMetricLabel = ({
   placeholder,
 }: ConditionMetricLabelProps) => {
   if (!metric)
-    return <span className="px-1 system-sm-regular text-components-input-text-placeholder">{placeholder}</span>
+    return <span className="system-sm-regular px-1 text-components-input-text-placeholder">{placeholder}</span>
 
   return (
     <div className="flex min-w-0 items-center gap-2 px-1">
       <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-[5px] shadow-xs">
         <span className={cn(getMetricValueTypeIconClassName(metric.valueType), 'h-3 w-3 shrink-0 text-text-secondary')} />
-        <span className="truncate system-xs-medium text-text-secondary">{metric.itemLabel}</span>
+        <span className="system-xs-medium truncate text-text-secondary">{metric.itemLabel}</span>
       </div>
-      <span className="shrink-0 system-xs-regular text-text-tertiary">{metric.groupLabel}</span>
+      <span className="system-xs-regular shrink-0 text-text-tertiary">{metric.groupLabel}</span>
     </div>
   )
 }
@@ -110,13 +110,13 @@ const ConditionMetricSelect = ({
       <SelectContent popupClassName="w-[360px]">
         {groupedMetricOptions.map(group => (
           <SelectGroup key={group.label}>
-            <SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{group.label}</SelectGroupLabel>
+            <SelectGroupLabel className="system-xs-medium-uppercase px-3 pt-2 pb-1 text-text-tertiary">{group.label}</SelectGroupLabel>
             {group.options.map(option => (
               <SelectItem key={option.id} value={serializeVariableSelector(option.variableSelector)}>
                 <div className="flex min-w-0 flex-1 items-center gap-2">
                   <span className={cn(getMetricValueTypeIconClassName(option.valueType), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
                   <span className="truncate">{option.itemLabel}</span>
-                  <span className="ml-auto shrink-0 system-xs-medium text-text-quaternary">
+                  <span className="system-xs-medium ml-auto shrink-0 text-text-quaternary">
                     {t(getConditionMetricValueTypeTranslationKey(option.valueType))}
                   </span>
                 </div>
@@ -139,7 +139,7 @@ const ConditionOperatorSelect = ({
   return (
     <Select value={operator} onValueChange={value => value && onChange(value as ComparisonOperator)}>
       <SelectTrigger className="h-8 w-auto min-w-[88px] gap-1 rounded-md bg-transparent px-1.5 py-0 hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-        <span className="truncate system-xs-medium text-text-secondary">{getComparisonOperatorLabel(operator, t)}</span>
+        <span className="system-xs-medium truncate text-text-secondary">{getComparisonOperatorLabel(operator, t)}</span>
       </SelectTrigger>
       <SelectContent className="z-[1002]" popupClassName="w-[240px] bg-components-panel-bg-blur backdrop-blur-[10px]">
         {operators.map(nextOperator => (
@@ -232,7 +232,7 @@ const ConditionGroup = ({
                 key={operator}
                 type="button"
                 className={cn(
-                  'rounded-md px-3 py-1.5 system-xs-medium-uppercase',
+                  'system-xs-medium-uppercase rounded-md px-3 py-1.5',
                   resource.judgmentConfig.logicalOperator === operator
                     ? 'bg-components-card-bg text-text-primary shadow-xs'
                     : 'text-text-tertiary',
diff --git a/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
index b9e6b7dd9e..c85c192aff 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { AvailableEvaluationWorkflow } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useInfiniteScroll } from 'ahooks'
 import * as React from 'react'
 import { useDeferredValue, useMemo, useRef, useState } from 'react'
@@ -20,7 +21,6 @@ import {
   ScrollAreaViewport,
 } from '@/app/components/base/ui/scroll-area'
 import { useAvailableEvaluationWorkflows } from '@/service/use-evaluation'
-import { cn } from '@/utils/classnames'
 
 type WorkflowSelectorProps = {
   value: string | null
@@ -119,9 +119,10 @@ const WorkflowSelector = ({
               </div>
               <div className="min-w-0 flex-1 px-1 py-1 text-left">
                 <div className={cn(
-                  'truncate system-sm-regular',
+                  'system-sm-regular truncate',
                   currentWorkflowName ? 'text-text-secondary' : 'text-components-input-text-placeholder',
-                )}>
+                )}
+                >
                   {currentWorkflowName ?? t('metrics.custom.workflowPlaceholder')}
                 </div>
               </div>
@@ -157,7 +158,7 @@ const WorkflowSelector = ({
               )
             : !workflows.length
                 ? (
-                    <div className="flex h-[120px] items-center justify-center text-text-tertiary system-sm-regular">
+                    <div className="system-sm-regular flex h-[120px] items-center justify-center text-text-tertiary">
                       {t('noData', { ns: 'common' })}
                     </div>
                   )
@@ -183,7 +184,7 @@ const WorkflowSelector = ({
                                   <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
                                 </div>
                               </div>
-                              <div className="min-w-0 flex-1 truncate px-1 py-1 text-text-secondary system-sm-medium">
+                              <div className="system-sm-medium min-w-0 flex-1 truncate px-1 py-1 text-text-secondary">
                                 {getWorkflowName(workflow)}
                               </div>
                               {workflow.id === value && (
diff --git a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
index 3fa84c946a..f8103aa2cc 100644
--- a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
@@ -2,6 +2,7 @@
 
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
 import type { NodeInfo } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
@@ -11,7 +12,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
-import { cn } from '@/utils/classnames'
 import { useEvaluationStore } from '../../store'
 import { dedupeNodeInfoList, getMetricVisual, getNodeVisual, getToneClasses } from '../metric-selector/utils'
 
@@ -41,7 +41,7 @@ const BuiltinMetricCard = ({
 
   return (
     <div className="group overflow-hidden rounded-xl border border-components-panel-border hover:bg-background-section">
-      <div className="flex items-center justify-between gap-3 px-3 pb-1 pt-3">
+      <div className="flex items-center justify-between gap-3 px-3 pt-3 pb-1">
         <button
           type="button"
           className="flex min-w-0 flex-1 items-center gap-2 px-1 text-left"
@@ -53,7 +53,7 @@ const BuiltinMetricCard = ({
             <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
           </div>
           <div className="flex min-w-0 items-center gap-0.5">
-            <div className="truncate text-text-secondary system-md-medium">{metric.label}</div>
+            <div className="system-md-medium truncate text-text-secondary">{metric.label}</div>
             <span
               aria-hidden="true"
               className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
@@ -65,7 +65,7 @@ const BuiltinMetricCard = ({
           size="small"
           variant="ghost"
           aria-label={t('metrics.remove')}
-          className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity hover:text-text-secondary focus-visible:opacity-100 group-hover:opacity-100"
+          className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-secondary focus-visible:opacity-100"
           onClick={() => removeMetric(resourceType, resourceId, metric.id)}
         >
           <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
@@ -73,7 +73,7 @@ const BuiltinMetricCard = ({
       </div>
 
       {isExpanded && (
-        <div className="flex flex-wrap gap-1 px-3 pb-3 pt-1">
+        <div className="flex flex-wrap gap-1 px-3 pt-1 pb-3">
           {selectedNodeInfoList.length
             ? selectedNodeInfoList.map((nodeInfo) => {
                 const nodeVisual = getNodeVisual(nodeInfo)
@@ -87,7 +87,7 @@ const BuiltinMetricCard = ({
                     <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
                       <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
                     </div>
-                    <span className="px-1 text-text-primary system-xs-regular">{nodeInfo.title}</span>
+                    <span className="system-xs-regular px-1 text-text-primary">{nodeInfo.title}</span>
                     <button
                       type="button"
                       className="flex h-4 w-4 items-center justify-center rounded-sm text-text-quaternary transition-colors hover:text-text-secondary"
@@ -105,7 +105,7 @@ const BuiltinMetricCard = ({
                 )
               })
             : (
-                <span className="px-1 text-text-tertiary system-xs-regular">{t('metrics.nodesAll')}</span>
+                <span className="system-xs-regular px-1 text-text-tertiary">{t('metrics.nodesAll')}</span>
               )}
 
           {shouldShowAddNode && (
@@ -144,7 +144,7 @@ const BuiltinMetricCard = ({
                         <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
                           <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
                         </div>
-                        <span className="truncate text-text-secondary system-sm-medium">{nodeInfo.title}</span>
+                        <span className="system-sm-medium truncate text-text-secondary">{nodeInfo.title}</span>
                       </div>
                     </DropdownMenuItem>
                   )
diff --git a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
index 3e06b0a637..d0c04bac04 100644
--- a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
 import CustomMetricEditorCard from '../custom-metric-editor'
 import { getToneClasses } from '../metric-selector/utils'
@@ -30,7 +30,7 @@ const CustomMetricCard = ({
           <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
             <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5" />
           </div>
-          <div className="truncate system-md-medium text-text-secondary">{metric.label}</div>
+          <div className="system-md-medium truncate text-text-secondary">{metric.label}</div>
         </div>
 
         <div className="flex shrink-0 items-center gap-1">
diff --git a/web/app/components/evaluation/components/metric-selector/index.tsx b/web/app/components/evaluation/components/metric-selector/index.tsx
index 2b690ee94c..0f91271a9f 100644
--- a/web/app/components/evaluation/components/metric-selector/index.tsx
+++ b/web/app/components/evaluation/components/metric-selector/index.tsx
@@ -2,6 +2,7 @@
 
 import type { ChangeEvent } from 'react'
 import type { MetricSelectorProps } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
@@ -11,7 +12,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
-import { cn } from '@/utils/classnames'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
 import SelectorEmptyState from './selector-empty-state'
 import SelectorFooter from './selector-footer'
@@ -68,7 +68,7 @@ const MetricSelector = ({
         render={(
           triggerStyle === 'text'
             ? (
-                <button type="button" className={cn('inline-flex items-center system-sm-medium text-text-accent', triggerClassName)}>
+                <button type="button" className={cn('system-sm-medium inline-flex items-center text-text-accent', triggerClassName)}>
                   <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
                   {t('metrics.add')}
                 </button>
diff --git a/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx b/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
index 1eecc3662a..9b4a0826a7 100644
--- a/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
+++ b/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
@@ -1,7 +1,7 @@
 import type { TFunction } from 'i18next'
 import type { EvaluationMetric } from '../../types'
 import type { MetricSelectorSection } from './types'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { getMetricVisual, getNodeVisual, getToneClasses } from './utils'
 
 type SelectorMetricSectionProps = {
@@ -46,7 +46,7 @@ const SelectorMetricSection = ({
         </div>
       )}
 
-      <div className="flex items-center justify-between px-4 pb-1 pt-3">
+      <div className="flex items-center justify-between px-4 pt-3 pb-1">
         <button
           type="button"
           className="flex min-w-0 items-center gap-2"
@@ -56,7 +56,7 @@ const SelectorMetricSection = ({
             <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
           </div>
           <div className="flex items-center gap-1">
-            <span className="truncate text-text-secondary system-xs-medium-uppercase">{metric.label}</span>
+            <span className="system-xs-medium-uppercase truncate text-text-secondary">{metric.label}</span>
             <span
               aria-hidden="true"
               className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
@@ -72,7 +72,7 @@ const SelectorMetricSection = ({
       {isExpanded && (
         <div className="px-1 py-1">
           {hasNoNodeInfo && (
-            <div className="px-3 pb-2 pt-0.5 text-text-tertiary system-sm-regular">
+            <div className="system-sm-regular px-3 pt-0.5 pb-2 text-text-tertiary">
               {t('metrics.noNodesInWorkflow')}
             </div>
           )}
@@ -100,12 +100,12 @@ const SelectorMetricSection = ({
                   <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
                     <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
                   </div>
-                  <span className="truncate text-[13px] font-medium leading-4 text-text-secondary">
+                  <span className="truncate text-[13px] leading-4 font-medium text-text-secondary">
                     {nodeInfo.title}
                   </span>
                 </div>
                 {isAdded && (
-                  <span className="shrink-0 px-1 text-text-quaternary system-xs-regular">{t('metrics.added')}</span>
+                  <span className="system-xs-regular shrink-0 px-1 text-text-quaternary">{t('metrics.added')}</span>
                 )}
               </button>
             )
@@ -120,7 +120,7 @@ const SelectorMetricSection = ({
                 <div className="flex items-center px-1 text-text-tertiary">
                   <span aria-hidden="true" className={cn(isShowingAllNodes ? 'i-ri-subtract-line' : 'i-ri-more-line', 'h-4 w-4')} />
                 </div>
-                <span className="truncate text-text-tertiary system-xs-regular">
+                <span className="system-xs-regular truncate text-text-tertiary">
                   {isShowingAllNodes ? t('metrics.showLess') : t('metrics.showMore')}
                 </span>
               </div>
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
index 314d3cfae8..1e9f9cc4c1 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import type { MetricOption } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Input from '@/app/components/base/input'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
-import { cn } from '@/utils/classnames'
 import { getTranslatedMetricDescription } from '../../default-metric-descriptions'
 import { DEFAULT_PIPELINE_METRIC_THRESHOLD } from '../../store-utils'
 
@@ -37,7 +37,7 @@ const PipelineMetricItem = ({
         onClick={onToggle}
       >
         <Checkbox checked={selected} />
-        <span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
+        <span className="system-sm-medium truncate text-text-secondary">{metric.label}</span>
         <Tooltip>
           <TooltipTrigger
             render={(
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
index df6c0107c7..15e21f1315 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
@@ -1,7 +1,7 @@
 import type { MetricColumn } from './pipeline-results-utils'
 import type { EvaluationRunItem } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import {
   formatValue,
   getIsItemPassed,
@@ -38,14 +38,14 @@ const PipelineResultsTable = ({
         <thead>
           <tr className="bg-background-section">
             <th className="h-7 rounded-l-lg" />
-            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.query')}</th>
-            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.expected')}</th>
-            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.actual')}</th>
+            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.query')}</th>
+            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.expected')}</th>
+            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.actual')}</th>
             {metricColumns.map((column, index) => (
               <th
                 key={column.id}
                 className={cn(
-                  'h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary',
+                  'system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary',
                   index === metricColumns.length - 1 && 'rounded-r-lg',
                 )}
               >
@@ -79,14 +79,14 @@ const PipelineResultsTable = ({
                     )}
                   />
                 </td>
-                <td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
+                <td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
                   <div className="line-clamp-2 break-words">{getQueryContent(item)}</div>
                 </td>
-                <td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
+                <td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
                   <div className="line-clamp-2 break-words">{formatValue(item.expected_output)}</div>
                 </td>
                 <td className={cn(
-                  'h-10 px-3 py-3 align-top system-sm-regular',
+                  'system-sm-regular h-10 px-3 py-3 align-top',
                   actualOutput ? 'text-text-secondary' : 'text-text-destructive',
                 )}
                 >
@@ -100,7 +100,7 @@ const PipelineResultsTable = ({
                   return (
                     <td
                       key={column.id}
-                      className={cn('h-10 px-3 py-3 align-top system-sm-regular', getMetricTextClassName(metricValue, column))}
+                      className={cn('system-sm-regular h-10 px-3 py-3 align-top', getMetricTextClassName(metricValue, column))}
                     >
                       {formatValue(metricValue)}
                     </td>
diff --git a/web/app/components/evaluation/components/section-header.tsx b/web/app/components/evaluation/components/section-header.tsx
index b2bb630ebe..6ddc155201 100644
--- a/web/app/components/evaluation/components/section-header.tsx
+++ b/web/app/components/evaluation/components/section-header.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
-import { cn } from '@/utils/classnames'
 
 type SectionHeaderProps = {
   title: string
@@ -31,8 +31,8 @@ const SectionHeader = ({
   return (
     <div className={cn('flex flex-wrap items-start justify-between gap-3', className)}>
       <div>
-        <div className={cn('text-text-primary system-xl-semibold', titleClassName)}>{title}</div>
-        {description && <div className={cn('mt-1 text-text-tertiary system-sm-regular', descriptionClassName)}>{description}</div>}
+        <div className={cn('system-xl-semibold text-text-primary', titleClassName)}>{title}</div>
+        {description && <div className={cn('system-sm-regular mt-1 text-text-tertiary', descriptionClassName)}>{description}</div>}
       </div>
       {action}
     </div>
@@ -48,7 +48,7 @@ export const InlineSectionHeader = ({
   return (
     <div className={cn('flex flex-wrap items-center justify-between gap-3', className)}>
       <div className="flex min-h-6 items-center gap-1">
-        <div className="text-text-primary system-md-semibold">{title}</div>
+        <div className="system-md-semibold text-text-primary">{title}</div>
         {tooltip && (
           <Tooltip>
             <TooltipTrigger
diff --git a/web/app/components/snippets/components/input-field-editor.tsx b/web/app/components/snippets/components/input-field-editor.tsx
index 82ae65d67b..a50f7bd0a4 100644
--- a/web/app/components/snippets/components/input-field-editor.tsx
+++ b/web/app/components/snippets/components/input-field-editor.tsx
@@ -2,11 +2,11 @@
 
 import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
 import type { SnippetInputField } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { convertFormDataToINputField, convertToInputFieldFormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/utils'
 import { useFloatingRight } from '@/app/components/rag-pipeline/components/panel/input-field/hooks'
-import { cn } from '@/utils/classnames'
 import InputFieldForm from './input-field-form'
 
 type SnippetInputFieldEditorProps = {
@@ -42,7 +42,7 @@ const SnippetInputFieldEditor = ({
         width: `min(${floatingRightWidth}px, calc(100vw - 24px))`,
       }}
     >
-      <div className="flex items-center pt-3.5 pr-11 pb-1 pl-4 system-xl-semibold text-text-primary">
+      <div className="system-xl-semibold flex items-center pt-3.5 pr-11 pb-1 pl-4 text-text-primary">
         {field ? t('inputFieldPanel.editInputField', { ns: 'datasetPipeline' }) : t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
       </div>
       <button
diff --git a/web/app/components/snippets/components/snippet-header/run-mode.tsx b/web/app/components/snippets/components/snippet-header/run-mode.tsx
index 1ed61b39ea..c8a9705360 100644
--- a/web/app/components/snippets/components/snippet-header/run-mode.tsx
+++ b/web/app/components/snippets/components/snippet-header/run-mode.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ import { useStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { cn } from '@/utils/classnames'
 
 type RunModeProps = {
   text?: string
@@ -40,7 +40,7 @@ const RunMode = ({
       <button
         type="button"
         className={cn(
-          'flex h-7 items-center gap-x-1 rounded-md px-1.5 text-components-button-secondary-accent-text system-xs-medium hover:bg-state-accent-hover',
+          'system-xs-medium flex h-7 items-center gap-x-1 rounded-md px-1.5 text-components-button-secondary-accent-text hover:bg-state-accent-hover',
           isRunning && 'cursor-not-allowed rounded-l-md bg-state-accent-hover',
         )}
         onClick={handleWorkflowStartRunInWorkflow}
@@ -49,13 +49,13 @@ const RunMode = ({
         {isRunning
           ? (
               <>
-                <span aria-hidden className="i-ri-loader-2-line mr-1 size-4 animate-spin" />
+                <span aria-hidden className="mr-1 i-ri-loader-2-line size-4 animate-spin" />
                 {t('common.running', { ns: 'workflow' })}
               </>
             )
           : (
               <>
-                <span aria-hidden className="i-ri-play-large-line mr-1 size-4" />
+                <span aria-hidden className="mr-1 i-ri-play-large-line size-4" />
                 {text ?? t('common.run', { ns: 'workflow' })}
                 <ShortcutsName keys={['alt', 'R']} textColor="secondary" />
               </>
diff --git a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
index 832372315e..f3d9bf05e1 100644
--- a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
+++ b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
@@ -1,5 +1,5 @@
 'use client'
-
+import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +16,6 @@ import {
   useConfirmSnippetImportMutation,
   useImportSnippetDSLMutation,
 } from '@/service/use-snippets'
-import { cn } from '@/utils/classnames'
 import ShortcutsName from '../../workflow/shortcuts-name'
 
 type SnippetImportDSLDialogProps = {
@@ -170,7 +169,7 @@ const SnippetImportDSLDialog = ({
             <DialogCloseButton className="top-6 right-5 h-8 w-8" />
           </div>
 
-          <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">
+          <div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
             {[
               { key: SnippetImportDSLTab.FromFile, label: t('importFromDSLFile', { ns: 'app' }) },
               { key: SnippetImportDSLTab.FromURL, label: t('importFromDSLUrl', { ns: 'app' }) },
@@ -202,7 +201,7 @@ const SnippetImportDSLDialog = ({
             )}
             {currentTab === SnippetImportDSLTab.FromURL && (
               <div>
-                <div className="mb-1 system-md-semibold text-text-secondary">DSL URL</div>
+                <div className="system-md-semibold mb-1 text-text-secondary">DSL URL</div>
                 <Input
                   placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                   value={dslUrlValue}
@@ -235,7 +234,7 @@ const SnippetImportDSLDialog = ({
             <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}
             </DialogTitle>
-            <div className="flex grow flex-col system-md-regular text-text-secondary">
+            <div className="system-md-regular flex grow flex-col text-text-secondary">
               <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
               <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
               <br />
diff --git a/web/app/components/workflow/block-selector/snippets/index.tsx b/web/app/components/workflow/block-selector/snippets/index.tsx
index b936ee7257..7c50644545 100644
--- a/web/app/components/workflow/block-selector/snippets/index.tsx
+++ b/web/app/components/workflow/block-selector/snippets/index.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useInfiniteScroll } from 'ahooks'
 import {
   memo,
@@ -20,7 +21,6 @@ import {
   TooltipTrigger,
 } from '@/app/components/base/ui/tooltip'
 import { useInfiniteSnippetList } from '@/service/use-snippets'
-import { cn } from '@/utils/classnames'
 import CreateSnippetDialog from '../../create-snippet-dialog'
 import SnippetDetailCard from './snippet-detail-card'
 import SnippetEmptyState from './snippet-empty-state'
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
index 0681fde8c7..fa4cd13b3b 100644
--- a/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
+++ b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
@@ -3,8 +3,8 @@ import type {
   Ref,
 } from 'react'
 import type { PublishedSnippetListItem } from './snippet-detail-card'
+import { cn } from '@langgenius/dify-ui/cn'
 import AppIcon from '@/app/components/base/app-icon'
-import { cn } from '@/utils/classnames'
 
 type SnippetListItemProps = {
   isHovered: boolean
@@ -36,11 +36,11 @@ const SnippetListItem = ({
         background={snippet.icon_info.icon_background}
         imageUrl={snippet.icon_info.icon_url}
       />
-      <div className="min-w-0 text-text-secondary system-sm-medium">
+      <div className="system-sm-medium min-w-0 text-text-secondary">
         {snippet.name}
       </div>
       {isHovered && snippet.author && (
-        <div className="ml-auto text-text-tertiary system-xs-regular">
+        <div className="system-xs-regular ml-auto text-text-tertiary">
           {snippet.author}
         </div>
       )}