prototype_design

Prototype Design

File System

dist    服务制品目录
node_modules    依赖库目录
public  服务启动后暴露的资源目录
src
├── App.vue 根视图目录
├── assets  静态资源目录
├── components  视图组件目录
├── main.js 程序入口文件
├── router
│   └── index.js    路由导航配置文件
└── views   页面视图目录
vite.config.js  构建时配置文件
postcss.config.js postcss 配置文件
tailwind.config tailwind 配置文件

Using Guide

通过与Cline对话, Cline会据您的需求尝试读取文件系统下的文件并思考如何修改来实现您的需求. 当Cline思考完毕, 会向您提出修改意见, 并等待您的审核, 当您审核通过之后Cline会修改文件系统下的文件来实现您的需求

Prompt Guide

1. 如果您想创建一个原型页面, 建议prompt样例如下

   请创建[page_name]页面, 页面内容为:
   1. ...
   2. ...
   3. ...
   ...
   并点击按钮能够导航到该页面, 为该页面分配路由.
   

2. 如果您倾向于您喜欢的UI组件库, 可以通过如下安装element-plus prompt案例, 安装UI组件库:

   请安装 element-plus UI 库, 并配置到当前项目
   

3. 如果您想添加全局的主体样式, 请按照如下prompt修改src/assets/common.css文件

   请在src/assets/common.css添加如下全局样式:
   1. button的背景颜色为蓝色, 字号为16px, 文字原色为白色;
   2. 默认字号为14px;
   

Matters Needing Attention

1. 如果您的需求中需要添加图片, 来实现原型页面, 请将图片放置 src/assets/img 目录, 并通过Cline对话告知图片的目录位置和名称, 比如下面这样的prompt:

   请将 src/assets/img/logo.png 这张图片显示在首页的左上角
   

2. 如果AI无法找到准确的页面文件, 导致修改文件频繁出错, 您可以告诉它您要指定的文件目录位置, 例如如下的prompt:

   请修改首页的Title文案, 为"欢迎您设计您的页面原型", 首页文件位置在src/views/HomeView.vue
   

   [!IMPORTANT]
   请不要通过任何方式修改vite.config.js文件, 修改vite.config.js文件很可能会造成原型无法预览的问题

[!IMPORTANT]
请不要删除node_modules目录下的所有资源, 这样做会造成原型无法预览的问题

FAQ

1. 页面图片若不能正常显示, 可向AI提出如下prompt:

   1. 请以ES6的方式引入图片
   2. 请检查是否存在图片被元素遮挡或图片的容器尺寸不足