vue-creater

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vue Web Artifacts Builder

Vue Web 项目构建套件

Data Flow & Context Management (CRITICAL)

数据流与上下文管理（至关重要）

You must maintain a Session Context to store file paths. Do not proceed to Step 3 until you have populated the required variables from Step 1 and Step 2.

```
$PROJECT_ROOT
```
: The absolute path to the project created in Step 1.
```
$DSL_PATH
```
: The absolute path to the
```
dsl.json
```
file generated in Step 2.

To build powerful frontend claude.ai artifacts using the Vue ecosystem, follow these steps:

Initialize the project scaffold using tool:
```
shadcn_vue_init
```
Retrieve design data using tool:
```
get_dsl
```
Apply design tokens and styles using tool:
```
get_token
```
Develop the artifact logic
Bundle code (if necessary for single-file delivery)

Stack:

Core: Vue 3 (Script Setup) + TypeScript + Vite v8.0.0
Styling: Tailwind CSS v4 + shadcn-vue (Radix-vue based)
State & Logic: Pinia (Store) + Vue Router + TanStack Query (vue-query)

你必须维护一个会话上下文来存储文件路径。在完成步骤1和步骤2并填充所需变量之前，请勿进入步骤3。

```
$PROJECT_ROOT
```
: 步骤1中创建的项目的绝对路径。
```
$DSL_PATH
```
: 步骤2中生成的
```
dsl.json
```
文件的绝对路径。

要使用Vue生态系统构建功能强大的前端claude.ai构件，请遵循以下步骤：

使用工具
```
shadcn_vue_init
```
初始化项目脚手架
使用工具
```
get_dsl
```
获取设计数据
使用工具
```
get_token
```
应用设计Tokens和样式
开发构件逻辑
打包代码（如果需要单文件交付）

技术栈:

核心: Vue 3 (Script Setup) + TypeScript + Vite v8.0.0
样式: Tailwind CSS v4 + shadcn-vue（基于Radix-vue）
状态与逻辑: Pinia (Store) + Vue Router + TanStack Query (vue-query)

Quick Start

快速开始

Step 1: Initialize Project Scaffolding

步骤1：初始化项目脚手架

Instruction:

Execute
```
shadcn_vue_init
```
tool.
- Condition: If a project name is specified in the context, pass it to the
```
projectName
```
  parameter. Otherwise, omit the parameter.
CAPTURE OUTPUT: Look for the directory path in the tool's output.
ASSIGN: Set this path to variable
```
$PROJECT_ROOT
```
.
Validation: If
```
$PROJECT_ROOT
```
is empty, stop and ask the user to verify the installation.

What this tool does:

✅ Sets up Vue 3 + Vite 8.0.0
✅ Configures Tailwind CSS 4 (CSS-first configuration, no generic config js)
✅ Installs shadcn-vue and configures
```
components.json
```
✅ Sets up Pinia, Vue Router, and Vue Query plugins

操作说明:

执行
```
shadcn_vue_init
```
工具。
- 条件: 如果上下文中指定了项目名称，将其传入
```
projectName
```
  参数。否则，省略该参数。
捕获输出: 在工具输出中查找目录路径。
赋值: 将该路径设置为变量
```
$PROJECT_ROOT
```
。
验证: 如果
```
$PROJECT_ROOT
```
为空，请停止操作并询问用户检查安装情况。

该工具的功能:

✅ 搭建Vue 3 + Vite 8.0.0环境
✅ 配置Tailwind CSS 4（以CSS为核心的配置，无需通用配置js文件）
✅ 安装shadcn-vue并配置
```
components.json
```
✅ 配置Pinia、Vue Router和Vue Query插件

Step 2: Sync Design Data (DSL)

步骤2：同步设计数据（DSL）

you must ask question: Please select the design source configuration:

1. **Custom Design DSL** (Provide a URL or file path for the design tokens)
2. **Use TOKEN_URL_LIGHT** (Read DSL URL from .env TOKEN_URL_LIGHT variable)

Choice [1/2]:

STOP and WAIT for user input - do NOT execute menu items automatically - accept number or cmd trigger or fuzzy command match Fetch the design structure and layout data from the source:

Action based on user input:

If Choice "1" (Custom):
1. Ask for URL (if missing).
2. Execute
```
get_dsl
```
  with the URL.
3. CAPTURE OUTPUT: Look for the file path of the saved JSON (e.g.,
```
.../dsl.json
```
  ).
4. ASSIGN: Set this path to variable
```
$DSL_PATH
```
  .
If Choice "2" (TOKEN_URL_LIGHT):
1. Read the
```
TOKEN_URL_LIGHT
```
  variable from
```
.env
```
  file.
2. If TOKEN_URL_LIGHT is not defined: Prompt user to define it in
```
.env
```
  file, e.g.,
```
TOKEN_URL_LIGHT=https://your-token-url.com/dsl.json
```
3. If TOKEN_URL_LIGHT is defined: Execute
```
get_dsl
```
  with the URL from
```
TOKEN_URL_LIGHT
```
  .
4. CAPTURE OUTPUT: Look for the file path of the saved JSON (e.g.,
```
.../dsl.json
```
  ).
5. ASSIGN: Set this path to variable
```
$DSL_PATH
```
  .

你必须询问用户：请选择设计源配置：

1. **自定义设计DSL**（提供设计Tokens的URL或文件路径）
2. **使用TOKEN_URL_LIGHT**（从.env文件的TOKEN_URL_LIGHT变量中读取DSL URL）

选择 [1/2]:

停止并等待用户输入 - 请勿自动执行菜单选项 - 接受数字、命令触发或模糊命令匹配从源获取设计结构和布局数据：

根据用户输入执行操作:

如果选择“1”（自定义）:
1. 如果未提供URL，询问用户获取。
2. 使用该URL执行
```
get_dsl
```
  工具。
3. 捕获输出: 查找保存的JSON文件路径（例如：
```
.../dsl.json
```
  ）。
4. 赋值: 将该路径设置为变量
```
$DSL_PATH
```
  。
如果选择“2”（TOKEN_URL_LIGHT）:
1. 从.env文件中读取
```
TOKEN_URL_LIGHT
```
  变量。
2. 如果TOKEN_URL_LIGHT未定义: 提示用户在.env文件中定义该变量，例如：
```
TOKEN_URL_LIGHT=https://your-token-url.com/dsl.json
```
3. 如果TOKEN_URL_LIGHT已定义: 使用该URL执行
```
get_dsl
```
  工具。
4. 捕获输出: 查找保存的JSON文件路径（例如：
```
.../dsl.json
```
  ）。
5. 赋值: 将该路径设置为变量
```
$DSL_PATH
```
  。

Step 3: Apply Design Tokens

步骤3：应用设计Tokens

Prerequisites:

Ensure
```
$PROJECT_ROOT
```
is defined (from Step 1).
Ensure
```
$DSL_PATH
```
is defined (from Step 2).

Instruction: You must now call the

get_token

tool using the exact paths captured previously.

Strict Execution Logic:

IF
$DSL_PATH
is valid (User chose Custom): Execute:
get_token(project_path=$PROJECT_ROOT, dsl_path=$DSL_PATH)
ELSE (User chose Default): Log "Skipping token application for default theme."

Goal: Extract design tokens from the DSL file at

$DSL_PATH

and inject them into the Tailwind 4 configuration located inside

$PROJECT_ROOT

前提条件:

确保
```
$PROJECT_ROOT
```
已定义（来自步骤1）。
确保
```
$DSL_PATH
```
已定义（来自步骤2）。

操作说明: 你必须使用之前捕获的准确路径调用

get_token

工具。

严格执行逻辑:

如果
$DSL_PATH
有效（用户选择了自定义）：执行：
get_token(project_path=$PROJECT_ROOT, dsl_path=$DSL_PATH)
否则（用户选择了默认）：记录“跳过默认主题的Token应用。”

目标: 从

$DSL_PATH

的DSL文件中提取设计Tokens，并将其注入到

$PROJECT_ROOT

目录下的Tailwind 4配置中。

Step 4: Start Development Server

步骤4：启动开发服务器

Instruction:

Execute the command below immediately.
CRITICAL: You MUST use the chained command format (
```
&&
```
) to ensure the directory context is preserved.

bash

cd "$PROJECT_ROOT" && npm run dev

操作说明:

立即执行以下命令。
至关重要: 你必须使用链式命令格式（
```
&&
```
）以确保目录上下文被保留。

bash

cd "$PROJECT_ROOT" && npm run dev

Reference

参考链接

shadcn-vue: https://www.shadcn-vue.com/
Tailwind CSS v4: https://tailwindcss.com/docs/v4-beta (CSS-centric config)
Vite: https://vitejs.dev/

shadcn-vue: https://www.shadcn-vue.com/
Tailwind CSS v4: https://tailwindcss.com/docs/v4-beta（以CSS为核心的配置）
Vite: https://vitejs.dev/