产品设计系统 - 提示词 (Prompt) 约束指南

本指南旨在规范如何使用 AI 辅助生成符合 Funtime Design System 标准的代码和内容。本系统基于 Vue 3 + TypeScript + Element Plus + Pinia 构建。

1. 技术栈约束 (Tech Stack Constraints)

在生成代码时，请始终遵循以下技术栈版本和规范：

框架: Vue 3 (Composition API, <script setup lang="ts">)
语言: TypeScript (严格模式)
UI 组件库: Element Plus
状态管理: Pinia
构建工具: Vite
CSS 预处理: CSS / SCSS (scoped)
图标库: @element-plus/icons-vue

2. 代码生成提示词模板 (Code Generation Prompts)

2.1 新增组件 (New Component)

当你需要 AI 生成一个新的 UI 组件时，请使用以下结构：

Role: Senior Vue 3 Engineer Task: Create a new component named [ComponentName] Requirements:

Use <script setup lang="ts">.

Use Element Plus components for UI.

Implement props interface definition using TypeScript.

Use Pinia store if global state is needed (refer to useDesignStore).

Ensure responsive design and proper styling (scoped CSS).

Do NOT use Options API. Context: This component is part of a Product Design System.

2.2 模拟数据 (Mock Data)

当需要填充数据时：

Task: Generate mock data for [FeatureName] Format: JSON or TypeScript array Constraint:

Use vite-plugin-mock structure if creating an API mock.

Data should look realistic for a product design context (e.g., project names, status, user counts).

Refer to mock/index.ts for existing patterns.

2.3 状态管理 (State Management)

当修改 Pinia Store 时：

Task: Update src/store/design.ts Action: Add state/actions for [Feature] Constraint:

Use Setup Store syntax (defineStore('id', () => { ... })).

Keep state reactive using ref or reactive.

Export a composable hook use[StoreName].

3. 设计规范 (Design Guidelines)

布局: 使用 src/layout/index.vue 作为主布局，包含侧边栏导航和顶部 Header。
颜色:
- Primary: #409eff (Element Plus Default)
- Background: #f5f7fa
字体: Helvetica Neue, Arial, sans-serif

4. 交互规范 (Interaction Rules)

反馈: 所有的增删改操作必须有用户反馈 (使用 ElMessage.success 或 ElMessage.error)。
加载状态: 异步操作期间应展示 Loading 状态。
表单验证: 所有输入表单必须包含基本的非空验证。

5. 示例 (Example)

请求: "创建一个用户列表页面，包含搜索功能。"

AI 应回复的代码结构:

<template>
  <div class="user-list">
    <el-card>
      <template #header>
        <div class="header-actions">
           <el-input v-model="searchQuery" placeholder="Search users..." />
           <el-button type="primary">Add User</el-button>
        </div>
      </template>
      <el-table :data="filteredUsers">
        <!-- Columns -->
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
// Imports...

// Logic...
</script>

3.2 KiB Raw Blame History