How to Collaborate with AI to Build a Complete UnoCSS Setup for UniApp Vue3 Projects

1. Introduction – The myth of a "perfect prompt"

Many tutorials claim that a single, perfectly crafted prompt can make an AI produce a correct answer instantly. In practice you cannot know all details up‑front; effective AI‑assisted development requires an iterative dialogue that gradually clarifies requirements.

2. Dialogue‑driven workflow for configuring UnoCSS in a UniApp + Vue3 project

Round 1 – From vague request to execution plan

我：项目需要用 UnoCSS，帮我配置一下

The AI asks for context (project structure, target platform, required features) and, after the user supplies details (UniApp + Vue3, target WeChat mini‑program + H5), proposes a concrete plan:

📋 Execution plan
1. Install dependencies: unocss, @uni-helper/unocss-preset-uni, @iconify-json/carbon
2. Create <strong>uno.config.ts</strong> with presetUni, presetAttributify, presetIcons, transformerDirectives
3. Add UnoCSS plugin to <strong>vite.config.ts</strong>
4. Import <strong>uno.css</strong> in <strong>main.ts</strong>

After confirmation the AI performs the steps and shows a usage example:

<view class="flex items-center gap-4 p-4 bg-white rounded-xl">
  <text class="text-lg font-bold">Hello UnoCSS</text>
</view>

Round 2 – Fixing transform variable issue in mini‑programs

The class translate-x-2 does not work because UnoCSS generates transform: translateX(var(--un-translate-x)), and the variable --un-translate-x is not defined in the mini‑program environment (no :root support).

Solution: add a preflights entry that injects the missing variables.

preflights: [{
  layer: 'unocss-transform-fix',
  getCSS: () => `
    page, view, text, image {
      --un-translate-x: 0;
      --un-translate-y: 0;
      /* other variables */
    }
  `
}]

Round 3 – Adding safe‑area padding rules

To avoid iPhone bottom safe‑area obstruction, custom rules are added:

rules: [
  ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
  ['p-safe', { 'padding': 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)' }]
]

Round 4 – Defining shortcuts for common class combinations

Shortcuts reduce repetitive long class strings:

shortcuts: [
  { 'center': 'flex justify-center items-center' },
  { 'between': 'flex justify-between items-center' },
  { 'col': 'flex flex-col' },
  { 'card': 'bg-white rounded-xl p-4' }
]

Round 5 – Supporting dynamic class names

Dynamic classes such as text-${status}-500 are not statically scanned. The user chooses the safelist approach:

safelist: ['text-red-500', 'text-green-500', 'text-blue-500', 'i-carbon-code']

3. Final unified uno.config.ts

import { presetUni } from '@uni-helper/unocss-preset-uni'
import { defineConfig, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss'

export default defineConfig({
  presets: [
    presetUni({ attributify: { prefixedOnly: true } }),
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: { display: 'inline-block', 'vertical-align': 'middle' }
    }),
    presetAttributify()
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  preflights: [{
    layer: 'unocss-transform-fix',
    getCSS: () => `
      page, view, text, image {
        --un-translate-x: 0;
        --un-translate-y: 0;
        --un-rotate: 0;
        --un-scale-x: 1;
        --un-scale-y: 1;
      }
    `
  }],
  rules: [
    ['p-safe', { padding: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)' }],
    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }]
  ],
  shortcuts: [
    { 'center': 'flex justify-center items-center' },
    { 'between': 'flex justify-between items-center' },
    { 'col': 'flex flex-col' },
    { 'card': 'bg-white rounded-xl p-4' }
  ],
  safelist: ['text-red-500', 'text-green-500', 'text-blue-500', 'i-carbon-code'],
  theme: {
    colors: { primary: 'var(--wot-color-theme, #0957DE)' },
    fontSize: { '2xs': ['20rpx', '28rpx'], '3xs': ['18rpx', '26rpx'] }
  }
})

4. Component development – ReplyCard.vue

A reusable reply‑card component with props tone, text and optional hideTag. The tone tag colour is chosen by hashing the tone string into one of five preset colours.

<!-- components/ReplyCard.vue -->
<template>
  <view class="flex items-center gap-2.5 bg-white rounded-xl p-4 pr-2">
    <!-- tone tag – hidden when hideTag is true -->
    <view v-show="!hideTag" class="text-xs font-bold rounded-sm px-2 py-1 flex-shrink-0" :style="{ backgroundColor: tagStyle.bg, color: tagStyle.text }">{{ tone }}</view>
    <view class="text-sm text-#1F2937 flex-1">{{ text }}</view>
    <view class="w-9 h-9 center cursor-pointer" @click="$emit('copy', text)">
      <image src="/static/images/home/copy.svg" mode="aspectFit" class="w-5 h-5" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
interface Props { tone: string; text: string; hideTag?: boolean }
const props = withDefaults(defineProps<Props>(), { hideTag: false })

defineEmits<{ copy: [text: string] }>()

const COLORS = [
  { bg: '#F3E8FF', text: '#8B5CF6' },
  { bg: '#E6FFFA', text: '#319795' },
  { bg: '#FFF5E6', text: '#F56500' },
  { bg: '#FFE4E6', text: '#E11D48' },
  { bg: '#E0F2FE', text: '#0284C7' }
]

const tagStyle = computed(() => {
  let hash = 0
  for (let i = 0; i < props.tone.length; i++) {
    hash = (hash + props.tone.charCodeAt(i)) % COLORS.length
  }
  return COLORS[hash]
})
</script>

5. Core experience – Best practices for AI‑assisted development

Do not chase a “perfect prompt”; use short, iterative requests.

Always ask the AI for an execution plan before writing code.

When a problem occurs, provide concrete context (error messages, generated CSS, platform details).

Ask the AI to explain the rationale behind its suggestions to deepen understanding.

6. Summary of the five dialogue rounds

Round 1 – Basic configuration: presets, transformers, theme.

Round 2 – Fix transform variable issue: added preflights to inject CSS variables.

Round 3 – Safe‑area adaptation: custom rules for pb-safe, pt-safe, p-safe.

Round 4 – Shortcut definitions for frequent class combos.

Round 5 – Dynamic class name support via safelist.