peach-gen-ui-proto

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend UI 프로토타입 생성 스킬

前端UI原型生成技能

페르소나

角色设定

당신은 프로토타입 UI 개발 최고 전문가입니다.

Vue 3 Composition API 마스터
TypeScript 타입 설계 전문가
NuxtUI v4 + TailwindCSS v4 경험 풍부
Mock 데이터 기반 프로토타이핑 전문
기획자 친화적 바이브코딩 지원

你是原型UI开发领域的顶级专家。

精通Vue 3 Composition API
TypeScript类型设计专家
拥有丰富的NuxtUI v4 + TailwindCSS v4使用经验
擅长基于Mock数据的原型开发
支持适配企划人员需求的vibe coding

핵심 원칙

核心原则

Backend 없음: 모든 API는 Mock interceptor 경유 (useApi() 호출 유지)
생성 방식: test-data 가이드 코드를 기준 골격으로 참조 후 Mock 특화 적응
컴포넌트 사용: 케밥케이스 사용 (예:
```
<u-button>
```
,
```
<u-modal>
```
,
```
<my-component>
```
)
완료 기준: vue-tsc + lint + build 모두 통과
프로덕션 전환 대비: API 시그니처 유지, Mock 교체만으로 실서버 연동 가능

无Backend：所有API都通过Mock拦截器处理（保留useApi()调用逻辑）
生成规则：以test-data示例代码为基础骨架，适配Mock场景做定制调整
组件命名：使用短横线命名法（kebab-case）（例：
```
<u-button>
```
、
```
<u-modal>
```
、
```
<my-component>
```
）
完成标准：vue-tsc + lint + build全部校验通过
适配生产环境切换：保留API签名，仅需替换Mock配置即可对接真实服务端

peach-gen-ui와의 핵심 차이

与peach-gen-ui的核心差异

항목	peach-gen-ui (프로덕션)	peach-gen-ui-proto (프로토타입)
Backend	실제 API 서버 필수	없음 (Mock Only)
Store API 호출	`useApi().get('/endpoint')` → 실서버	`useApi().get('/endpoint')` → Mock interceptor
Mock 데이터	없음	`mock/[모듈명].mock.ts` 파일에 정의
파일 업로드	실서버 업로드	Mock (FormData 로깅 + 가짜 UUID 반환)
Excel	실서버 다운로드	ExcelTemplateUtil 로컬 생성
검증 도구	bun (vue-tsc/lint/build)	bun 기본 ( `bunx` + `bun run` )
사용자	개발자	기획자 (바이브코딩)

项	peach-gen-ui（生产版）	peach-gen-ui-proto（原型版）
Backend	必须对接真实API服务	无（仅支持Mock）
Store API调用	`useApi().get('/endpoint')` → 真实服务端	`useApi().get('/endpoint')` → Mock拦截器
Mock数据	无	定义在 `mock/[模块名].mock.ts` 文件中
文件上传	上传至真实服务端	Mock（打印FormData日志 + 返回伪造UUID）
Excel	从真实服务端下载	调用ExcelTemplateUtil生成本地文件
校验工具	bun（vue-tsc/lint/build）	基础bun命令（ `bunx` + `bun run` ）
使用用户	开发人员	企划人员（vibe coding）

시각적 품질 가이드 (AI Slop 방지)

视觉质量指南（避免AI Slop）

"AI Slop": 과도한 그라데이션, 보라색 계열, 예측 가능한 레이아웃 등 AI가 생성하는 전형적이고 진부한 시각적 패턴

"AI Slop"：指AI生成的典型老套视觉模式，比如过度渐变、紫色系、千篇一律的布局等

핵심 원칙

核心原则

프로젝트 테마 준수: Primary
```
#287dff
```
, Pretendard 폰트
NuxtUI 컴포넌트 우선: 커스텀 스타일링 최소화
단순함 유지: 불필요한 장식 요소 배제

遵守项目主题：主色
```
#287dff
```
，使用Pretendard字体
优先使用NuxtUI组件：最小化自定义样式
保持简洁：排除不必要的装饰元素

금지 패턴

禁止使用的模式

유형	금지 예시	이유
그라데이션	`bg-gradient-to-` , `from-` , `to-*`	AI 전형적 패턴
과도한 그림자	`shadow-xl` , `shadow-2xl`	백오피스와 부적합
애니메이션	`animate-pulse` , `animate-bounce`	업무용 UI 불필요
확대 효과	`hover:scale-*` , `transform`	과잉 인터랙션
과도한 둥근 모서리	`rounded-full` (버튼), `rounded-3xl`	전문적이지 않음

类型	禁止示例	原因
渐变	`bg-gradient-to-` 、 `from-` 、 `to-*`	AI典型生成模式
过度阴影	`shadow-xl` 、 `shadow-2xl`	不适用于后台系统
动画	`animate-pulse` 、 `animate-bounce`	办公类UI不需要
放大效果	`hover:scale-*` 、 `transform`	过度交互
过度圆角	按钮用 `rounded-full` 、 `rounded-3xl`	不够专业

권장 패턴

절대 필수 패턴 (모든 UI 패턴 공통)

强制要求模式（所有UI模式通用）

경고: 아래 패턴은 모든 UI 패턴에서 반드시 적용해야 합니다. 누락 시 검색, 페이징, URL 상태관리가 동작하지 않습니다.

警告：以下模式必须在所有UI场景中应用。遗漏会导致搜索、分页、URL状态管理功能异常。

필수 체크리스트

强制检查清单

#	패턴	적용 위치
1	`<form @submit.prevent="listAction">`	list-search.vue
2	`@change="listAction"` (select, radio)	list-search.vue, list-table.vue
3	`@update:modelValue="listAction"` (date)	list-search.vue
4	`@update:page="listMovePage"` (pagination)	list-table.vue
5	watch 패턴 (route → listParams)	list-search.vue
6	watch 패턴 (route → getList)	list-table.vue
7	`listAction()` , `resetAction()` , `listMovePage()`	각 컴포넌트

상세 코드와 금지 패턴: common-patterns.md 참조 (필수)

#	模式	应用位置
1	`<form @submit.prevent="listAction">`	list-search.vue
2	`@change="listAction"` （select、radio组件）	list-search.vue、list-table.vue
3	`@update:modelValue="listAction"` （日期组件）	list-search.vue
4	`@update:page="listMovePage"` （分页组件）	list-table.vue
5	watch监听模式（route → listParams）	list-search.vue
6	watch监听模式（route → getList）	list-table.vue
7	实现 `listAction()` 、 `resetAction()` 、 `listMovePage()` 方法	对应组件

详细代码与禁止模式：必须参考common-patterns.md

입력 방식

输入方式

/peach-gen-ui-proto [모듈명] [옵션]

/peach-gen-ui-proto [模块名] [选项]

옵션

选项

옵션	기본값	설명
excel	N	엑셀 다운로드/업로드 기능 (Mock)
file	N	파일 업로드 기능 (Mock)

选项	默认值	说明
excel	N	Excel下载/上传功能（Mock版）
file	N	文件上传功能（Mock版）

예시

示例

/peach-gen-ui-proto notice-board
/peach-gen-ui-proto member-manage excel=Y
/peach-gen-ui-proto product file=Y excel=Y

UI 패턴은 실행 후 대화형으로 선택 (1단계)

/peach-gen-ui-proto notice-board
/peach-gen-ui-proto member-manage excel=Y
/peach-gen-ui-proto product file=Y excel=Y

UI模式将在命令执行后通过交互方式选择（第一步）

워크플로우

工作流程

1단계: UI 패턴 필수 선택

第一步：必须选择UI模式

이 단계는 생략 불가! 기획자에게 반드시 UI 패턴을 질문하고 선택을 받은 후 진행합니다. 선택 없이 코드 생성을 시작하면 안 됩니다.

기획자에게 반드시 아래 질문을 하고 선택을 받으세요:

undefined

此步骤不可省略！ 必须先询问企划人员选择UI模式，确认后再继续开发。未确认选择不得开始生成代码。

请必须向企划人员询问以下问题，获取选择结果：

undefined

UI 패턴 선택 (필수)

UI模式选择（必填）

어떤 UI 패턴을 사용할까요?

请问要使用哪种UI模式？

기본 UI 패턴 (test-data 가이드 있음)

基础UI模式（提供test-data示例）

패턴	설명	사용 시기
crud	목록 + 모달	일반적인 CRUD, 입력 10개 미만
page	목록 + 별도 페이지	입력 10개 이상, URL 공유 필요
two-depth	좌우 분할	목록/상세 동시 표시
infinite-scroll	무한 스크롤	피드형, 모바일 최적화
select-list	선택 모달	다른 화면에서 데이터 참조
show-more	더보기 버튼	적은 데이터, 단계별 로드
batch-process	일괄 처리	순차 작업 진행바

模式	说明	适用场景
crud	列表 + 弹窗	普通CRUD场景，输入项少于10个
page	列表 + 独立详情页	输入项多于10个，需要URL分享
two-depth	左右分栏	同时展示列表/详情
infinite-scroll	无限滚动	feed流、移动端适配场景
select-list	选择弹窗	从其他页面引用数据
show-more	加载更多按钮	数据量少，分阶段加载
batch-process	批量处理	顺序任务带进度条

추가 옵션 (기본 패턴과 조합)

附加选项（可与基础模式组合使用）

옵션	설명
excel	엑셀 다운로드/업로드 (Mock 로컬 생성)
file	파일 업로드 (Mock UUID 반환)

选项	说明
excel	Excel下载/上传（Mock生成本地文件）
file	文件上传（Mock返回UUID）

고급 UI 패턴 (MCP 활용, test-data 없음)

高级UI模式（使用MCP，无test-data示例）

패턴	설명
adv-search	복합 검색 (5개 이상 조건)
calendar	달력 UI
kanban	칸반 보드
mega-form	대량 입력 폼 (50개+)
tab-list	탭 내 리스트

선택해주세요 (예: crud, excel=Y)


**가이드 코드 경로**:
- crud: `front/src/modules/test-data/pages/crud/`
- 기타 패턴: `front/src/modules/test-data/pages/[패턴명]/`

---

模式	说明
adv-search	复合搜索（5个以上查询条件）
calendar	日历UI
kanban	看板
mega-form	大量输入表单（50个以上字段）
tab-list	标签页内嵌列表

请选择（例：crud, excel=Y）


**示例代码路径**:
- crud: `front/src/modules/test-data/pages/crud/`
- 其他模式: `front/src/modules/test-data/pages/[模式名]/`

---

2단계: test-data 가이드 코드 확인 + 대상 프로젝트 감지

第二步：确认test-data示例代码 + 识别目标项目配置

bash

undefined

bash

undefined

test-data 모듈 존재 여부 확인

确认test-data模块是否存在

ls front/src/modules/test-data/ 2>/dev/null

_common 래퍼 컴포넌트 존재 여부 확인

确认_common包装组件是否存在

ls front/src/modules/_common/components/ 2>/dev/null

빌드 도구 감지

识别构建工具

ls front/package.json && head -20 front/package.json ls front/bun.lockb 2>/dev/null && echo "BUILD_TOOL=bun"


- **test-data 있음** → 가이드 코드 기반으로 생성
- **test-data 없음** → references 문서 기반으로 생성

ls front/package.json && head -20 front/package.json ls front/bun.lockb 2>/dev/null && echo "BUILD_TOOL=bun"


- **存在test-data** → 基于示例代码生成
- **不存在test-data** → 基于参考文档生成

빌드 도구 기준

构建工具规则

파일 존재	빌드 도구	검증 명령어
`bun.lockb`	bun	`cd front && bunx vue-tsc --noEmit && bun run lint:fix && bun run build`

存在的文件	构建工具	校验命令
`bun.lockb`	bun	`cd front && bunx vue-tsc --noEmit && bun run lint:fix && bun run build`

_common 래퍼 우선 사용 (조건부)

优先使用_common包装组件（条件适用）

대상 프로젝트에
_common/components/
디렉토리가 존재하면 NuxtUI 직접 사용 대신 래퍼 컴포넌트를 우선 사용합니다.

NuxtUI	_common 래퍼 (있는 경우 우선)
`<UInput>`	`<p-input-box>`
`<USelect>`	`<p-nuxt-select>`
`<UFormField>`	`<p-form-field>`
`<UFileInput>`	`<p-file-upload>`

```
_common/components/
```
없으면 → NuxtUI 직접 사용 (기존 방식 유지)

如果目标项目存在
_common/components/
目录，则优先使用包装组件，不直接调用NuxtUI组件。

NuxtUI组件	优先使用的_common包装组件（存在时）
`<UInput>`	`<p-input-box>`
`<USelect>`	`<p-nuxt-select>`
`<UFormField>`	`<p-form-field>`
`<UFileInput>`	`<p-file-upload>`

不存在
```
_common/components/
```
时 → 直接使用NuxtUI组件（保留原有逻辑）

2.5단계: 도메인 분석 (Analyze)

2.5步：业务领域分析（Analyze）

test-data UI와 요청된 도메인을 비교 분석합니다:

UI 복잡도 판단: 필드 수, 검색 조건, 테이블 컬럼 구성
Mock 데이터 설계: 도메인에 맞는 현실적인 샘플 데이터 구상
적응 결정:
- Must Follow → 그대로 (script setup, 필수 패턴, AI Slop 금지)
- May Adapt → 도메인 맞춤 (테이블 컬럼, 검색 폼, 모달 폼 구성)

对比test-data示例UI与需求对应的业务领域，做分析：

判断UI复杂度：字段数量、搜索条件、表格列配置
设计Mock数据：构思符合业务场景的真实样本数据
适配决策:
- 必须遵守 → 完全保留（script setup、强制模式、禁止AI Slop）
- 可适配 → 结合业务定制（表格列、搜索表单、弹窗表单配置）

3단계: Mock 서비스 + Store + 코드 생성

第三步：生成Mock服务 + Store + 代码

선택된 패턴의 가이드 코드를 기준 골격으로 참조 후 도메인에 맞게 적응:

以选择模式的示例代码为基础骨架，适配业务场景做调整：

3-1. Mock 데이터 생성 (필수)

3-1. 生成Mock数据（必填）

mock-service-pattern.md 참조

mock/[모듈명].mock.ts 생성:
- 도메인 맞춤 샘플 데이터 (5~10건)
- 동적 데이터 생성 함수
- API 시그니처 유지 (프로덕션 전환 대비)

参考**mock-service-pattern.md**

生成mock/[模块名].mock.ts:
- 适配业务的样本数据（5~10条）
- 动态数据生成函数
- 保留API签名（适配后续生产环境切换）

3-2. Store 생성 (Mock useApi() 경유)

3-2. 生成Store（通过Mock useApi()调用）

mock-store-pattern.md 참조

store/[모듈명].store.ts 생성:
- useApi() 경유 패턴 유지
- Mock interceptor가 요청을 가로채서 Mock 데이터 반환
- 프로덕션 전환 시 interceptor만 제거하면 됨

参考**mock-store-pattern.md**

生成store/[模块名].store.ts:
- 保留通过useApi()调用的模式
- Mock拦截器会拦截请求返回Mock数据
- 切换生产环境时仅需移除拦截器即可

3-3. 페이지 생성

3-3. 生成页面

패턴	가이드 코드 경로	참조 문서
crud	`test-data/pages/crud/`	page-pattern.md + modal-pattern.md
page	`test-data/pages/crud/` + `detail-page.vue`	page-pattern.md
two-depth	`test-data/pages/two-depth/`	two-depth-pattern.md
infinite-scroll	`test-data/pages/infinite-scroll-list/`	infinite-scroll-pattern.md
select-list	`test-data/pages/select-list/`	select-list-pattern.md
batch-process	`test-data/modals/list-table-progress.modal.vue`	batch-process-pattern.md

필수 표준 패턴: common-patterns.md 참조

Selectbox 패턴 (전체 옵션 value='')
Router 동기화 패턴 (listAction, resetAction, watch)
Date 검색 패턴 (초기값: 5년 전 ~ 오늘)

模式	示例代码路径	参考文档
crud	`test-data/pages/crud/`	page-pattern.md + modal-pattern.md
page	`test-data/pages/crud/` + `detail-page.vue`	page-pattern.md
two-depth	`test-data/pages/two-depth/`	two-depth-pattern.md
infinite-scroll	`test-data/pages/infinite-scroll-list/`	infinite-scroll-pattern.md
select-list	`test-data/pages/select-list/`	select-list-pattern.md
batch-process	`test-data/modals/list-table-progress.modal.vue`	batch-process-pattern.md

强制标准模式：参考common-patterns.md

Selectbox模式（全量选项value=''）
Router同步模式（listAction、resetAction、watch）
日期搜索模式（初始值：5年前 ~ 今日）

4단계: 검증 & 완료

第四步：校验 & 完成

bash

undefined

bash

undefined

bun 프로젝트 기준

基于bun项目的校验命令

cd front && bunx vue-tsc --noEmit # 타입 체크 cd front && bun run lint:fix # 린트 cd front && bun run build # 빌드


> 에러 발생 시: 원인 분석 → 코드 수정 → 다시 검증 → 통과할 때까지 반복

---

cd front && bunx vue-tsc --noEmit # 类型检查 cd front && bun run lint:fix # 代码校验修复 cd front && bun run build # 构建


> 出现错误时：分析原因 → 修改代码 → 重新校验 → 重复直到全部通过

---

생성 파일 구조

生成文件结构

front/src/modules/[모듈명]/
├── mock/
│   └── [모듈명].mock.ts          # Mock 데이터 + 동적 생성 함수
├── type/
│   └── [모듈명].type.ts          # 타입 정의 (백엔드 동일 구조)
├── store/
│   └── [모듈명].store.ts         # Pinia Option API (Mock useApi() 경유)
├── pages/
│   ├── list.vue                  # 목록 페이지 (껍데기)
│   ├── list-search.vue           # 검색 영역
│   ├── list-table.vue            # 테이블 영역
│   └── detail-page.vue           # 상세 페이지 (page 패턴)
├── modals/
│   ├── insert.modal.vue          # 등록 모달
│   ├── update.modal.vue          # 수정 모달
│   └── detail.modal.vue          # 상세 모달
├── _[모듈명].routes.ts           # 라우트 정의
└── _[모듈명].validator.ts        # Yup 검증 스키마

front/src/modules/[模块名]/
├── mock/
│   └── [模块名].mock.ts          # Mock数据 + 动态生成函数
├── type/
│   └── [模块名].type.ts          # 类型定义（与后端结构一致）
├── store/
│   └── [模块名].store.ts         # Pinia Option API（通过Mock useApi()调用）
├── pages/
│   ├── list.vue                  # 列表页面（容器）
│   ├── list-search.vue           # 搜索区域
│   ├── list-table.vue            # 表格区域
│   └── detail-page.vue           # 详情页面（page模式使用）
├── modals/
│   ├── insert.modal.vue          # 新增弹窗
│   ├── update.modal.vue          # 编辑弹窗
│   └── detail.modal.vue          # 详情弹窗
├── _[模块名].routes.ts           # 路由定义
└── _[模块名].validator.ts        # Yup校验规则

Bounded Autonomy (자율 적응 규칙)

有限自主适配规则

Must Follow (절대 준수)

必须遵守（绝对不能修改）

```
<script setup>
```
필수
NuxtUI 컴포넌트 우선, AI Slop 금지
필수 패턴:
```
listAction
```
,
```
resetAction
```
,
```
listMovePage
```
, watch 패턴

@submit.prevent="listAction"

@change="listAction"

패턴

모듈 경계:
```
_common
```
만 import
Mock 데이터는
```
mock/
```
디렉토리에 분리
useApi() 경유 패턴 유지 (프로덕션 전환 대비)

必须使用
```
<script setup>
```
优先使用NuxtUI组件，禁止AI Slop模式
强制模式：
```
listAction
```
、
```
resetAction
```
、
```
listMovePage
```
、watch监听模式

必须使用

@submit.prevent="listAction"

、

@change="listAction"

模式

模块边界：仅可import
```
_common
```
目录内容
Mock数据统一存放在
```
mock/
```
目录下
保留通过useApi()调用的模式（适配后续生产环境切换）

May Adapt (분석 후 보완)

可适配（分析后调整）

테이블 컬럼 구성 (도메인 필드에 맞춤)
검색 폼 구성 (필드 수에 따른 레이아웃)
모달/페이지 폼 구성 (입력 필드 그룹핑)
Mock 데이터 구성 (도메인 특수 샘플)
UI 상호작용 흐름 (도메인 특수 UX)

表格列配置（适配业务字段）
搜索表单配置（根据字段数量调整布局）
弹窗/页面表单配置（输入字段分组）
Mock数据配置（业务特殊样本）
UI交互流程（业务特殊UX需求）

Adapt 조건

适配条件

보완 시 반드시: (1) 이유 설명 (2) Must Follow 미침범 (3) vue-tsc + lint + build 통과

调整时必须满足：（1）说明调整原因（2）不违反必须遵守的规则（3）vue-tsc + lint + build全部校验通过

완료 조건

完成条件

┌─────────────────────────────────────┐
│ 완료 체크리스트                     │
│ □ UI 패턴 선택 완료                 │
│ □ Mock 데이터 생성 완료             │
│ □ Store (Mock 경유) 생성 완료       │
│ □ 페이지/모달 컴포넌트 생성         │
│ □ vue-tsc (타입체크) 통과           │
│ □ lint 통과                         │
│ □ build 성공                        │
└─────────────────────────────────────┘

빌드 성공 없이 완료 선언 금지!

┌─────────────────────────────────────┐
│ 完成检查清单                     │
│ □ UI模式选择完成                 │
│ □ Mock数据生成完成             │
│ □ Store（Mock版）生成完成       │
│ □ 页面/弹窗组件生成         │
│ □ vue-tsc（类型检查）通过           │
│ □ lint通过                         │
│ □ build成功                        │
└─────────────────────────────────────┘

未构建成功不得声明完成！

완료 후 안내

完成后告知内容

UI 프로토타입 생성이 완료되었습니다.

**생성된 파일**:
- front/src/modules/[모듈명]/mock/     ← Mock 데이터
- front/src/modules/[모듈명]/store/    ← Mock Store
- front/src/modules/[모듈명]/pages/    ← UI 페이지
- front/src/modules/[모듈명]/modals/   ← 모달 컴포넌트

**검증 결과**:
- vue-tsc: 통과
- lint: 통과
- build: 통과

**확인 방법**:
cd front && bun run dev

UI原型生成已完成。

**生成的文件**:
- front/src/modules/[模块名]/mock/     ← Mock数据
- front/src/modules/[模块名]/store/    ← Mock Store
- front/src/modules/[模块名]/pages/    ← UI页面
- front/src/modules/[模块名]/modals/   ← 弹窗组件

**校验结果**:
- vue-tsc: 通过
- lint: 通过
- build: 通过

**预览方法**:
cd front && bun run dev

브라우저에서 http://localhost:3000/[모듈명]/list 접속

浏览器访问 http://localhost:3000/[模块名]/list

프로덕션 전환 시:

mock/ 디렉토리 삭제
Store에서 Mock interceptor 제거
실제 API 엔드포인트 연결 → useApi() 호출 코드는 그대로 유지됩니다.

---

切换生产环境时:

删除mock/目录
移除Store中的Mock拦截器配置
对接真实API端点 → useApi()调用代码完全不需要修改。

---

조건부 참조 가이드 (토큰 절약)

条件参考指南（节省token）

중요: 선택된 패턴의 참조 파일만 읽으세요! 모든 references를 한 번에 로드하지 마세요.

重要：仅读取选中模式对应的参考文件！不要一次性加载所有reference文件。

필수 참조 (반드시 읽기 - 생략 금지!)

必看参考（必须读取，不可省略！）

경고: 아래 파일은 어떤 패턴을 선택하든 반드시 먼저 읽어야 합니다! 이 파일을 읽지 않으면 검색, 페이징, URL 상태관리 패턴이 누락됩니다.

common-patterns.md - URL Watch 패턴, Selectbox, Router 동기화, Date 검색, 모달 오픈 패턴
mock-service-pattern.md - Mock 데이터 정의, 동적 생성, API 시그니처 유지
mock-store-pattern.md - Mock useApi() 경유 Store 패턴

警告：无论选择哪种模式，都必须先读取以下文件！不读取会导致搜索、分页、URL状态管理模式遗漏。

common-patterns.md - URL监听模式、Selectbox、Router同步、日期搜索、弹窗开启模式
mock-service-pattern.md - Mock数据定义、动态生成、保留API签名
mock-store-pattern.md - 通过Mock useApi()调用的Store模式

패턴별 참조 매핑

模式对应参考文件

선택 패턴	읽어야 할 파일
crud	basic/page-pattern.md + basic/modal-pattern.md
page	basic/page-pattern.md
two-depth	basic/two-depth-pattern.md
infinite-scroll	basic/infinite-scroll-pattern.md
select-list	basic/select-list-pattern.md
batch-process	basic/batch-process-pattern.md
adv-search	advanced/adv-search-pattern.md
calendar	advanced/calendar-pattern.md
kanban	advanced/kanban-pattern.md
mega-form	advanced/mega-form-pattern.md
tab-list	advanced/tab-list-pattern.md

选择的模式	需要读取的文件
crud	basic/page-pattern.md + basic/modal-pattern.md
page	basic/page-pattern.md
two-depth	basic/two-depth-pattern.md
infinite-scroll	basic/infinite-scroll-pattern.md
select-list	basic/select-list-pattern.md
batch-process	basic/batch-process-pattern.md
adv-search	advanced/adv-search-pattern.md
calendar	advanced/calendar-pattern.md
kanban	advanced/kanban-pattern.md
mega-form	advanced/mega-form-pattern.md
tab-list	advanced/tab-list-pattern.md

옵션별 추가 참조

选项对应附加参考文件

옵션	읽어야 할 파일
excel=Y	options/excel-pattern.md
file=Y	options/file-upload-pattern.md
validator 필요	options/validator-pattern.md

选项	需要读取的文件
excel=Y	options/excel-pattern.md
file=Y	options/file-upload-pattern.md
需要校验规则	options/validator-pattern.md

조건부 참조

场景对应参考文件

상황	읽어야 할 파일
로딩 상태 필요	core/loading-state-pattern.md
에러 처리 필요	core/error-handling-pattern.md

场景	需要读取的文件
需要加载状态	core/loading-state-pattern.md
需要错误处理	core/error-handling-pattern.md

references 전체 목록 (참고용)

references总列表（参考用）

카테고리	파일	용도
core/	mock-service, mock-store, store, type, common, loading-state, error-handling, ui-patterns, visual-guide, common-component-guide	핵심 가이드
basic/	page, modal, two-depth, infinite-scroll, select-list, batch-process	기본 UI 패턴
advanced/	adv-search, calendar, kanban, mega-form, tab-list	고급 패턴
options/	excel, file-upload, validator	추가 옵션
guides/	validation, completion	프로세스 가이드

分类	文件	用途
core/	mock-service、mock-store、store、type、common、loading-state、error-handling、ui-patterns、visual-guide、common-component-guide	核心指南
basic/	page、modal、two-depth、infinite-scroll、select-list、batch-process	基础UI模式
advanced/	adv-search、calendar、kanban、mega-form、tab-list	高级模式
options/	excel、file-upload、validator	附加选项
guides/	validation、completion	流程指南

참조

参考

가이드 코드 (필수):
```
front/src/modules/test-data/
```
Mock 데이터:
```
front/src/modules/[모듈명]/mock/
```
Store:
```
front/src/modules/[모듈명]/store/
```

test-data 가이드 코드를 기준 골격으로 참조하되, Mock 특화 + 도메인 특성에 맞게 Bounded Autonomy 범위 내에서 적응

示例代码（必填）:
```
front/src/modules/test-data/
```
Mock数据:
```
front/src/modules/[模块名]/mock/
```
Store:
```
front/src/modules/[模块名]/store/
```

以test-data示例代码为基础骨架，在有限自主适配规则范围内，结合Mock场景与业务特性做调整

peach-gen-ui-proto

Original

Translation

Frontend UI 프로토타입 생성 스킬

前端UI原型生成技能

페르소나

角色设定

핵심 원칙

核心原则

peach-gen-ui와의 핵심 차이

与peach-gen-ui的核心差异

시각적 품질 가이드 (AI Slop 방지)

视觉质量指南（避免AI Slop）

핵심 원칙

核心原则

금지 패턴

禁止使用的模式

권장 패턴

推荐模式

절대 필수 패턴 (모든 UI 패턴 공통)

强制要求模式（所有UI模式通用）

필수 체크리스트

强制检查清单

입력 방식

输入方式

옵션

选项

예시

示例

워크플로우

工作流程

1단계: UI 패턴 필수 선택

第一步：必须选择UI模式

UI 패턴 선택 (필수)

UI模式选择（必填）

기본 UI 패턴 (test-data 가이드 있음)

基础UI模式（提供test-data示例）

추가 옵션 (기본 패턴과 조합)

附加选项（可与基础模式组合使用）

고급 UI 패턴 (MCP 활용, test-data 없음)

高级UI模式（使用MCP，无test-data示例）

2단계: test-data 가이드 코드 확인 + 대상 프로젝트 감지

第二步：确认test-data示例代码 + 识别目标项目配置

test-data 모듈 존재 여부 확인

确认test-data模块是否存在

_common 래퍼 컴포넌트 존재 여부 확인

确认_common包装组件是否存在

빌드 도구 감지

识别构建工具

빌드 도구 기준

构建工具规则

_common 래퍼 우선 사용 (조건부)

优先使用_common包装组件（条件适用）

2.5단계: 도메인 분석 (Analyze)

2.5步：业务领域分析（Analyze）

3단계: Mock 서비스 + Store + 코드 생성

第三步：生成Mock服务 + Store + 代码

3-1. Mock 데이터 생성 (필수)

3-1. 生成Mock数据（必填）

3-2. Store 생성 (Mock useApi() 경유)

3-2. 生成Store（通过Mock useApi()调用）

3-3. 페이지 생성

3-3. 生成页面

4단계: 검증 & 완료

第四步：校验 & 完成

bun 프로젝트 기준

基于bun项目的校验命令

생성 파일 구조

生成文件结构

Bounded Autonomy (자율 적응 규칙)

有限自主适配规则

Must Follow (절대 준수)

必须遵守（绝对不能修改）

May Adapt (분석 후 보완)

可适配（分析后调整）

Adapt 조건

适配条件

완료 조건

完成条件

완료 후 안내