miles

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Miles AI Website Designer

Miles AI 网站设计师

Miles is an AI website designer you interact with through conversation via a CLI. You send messages, Miles responds — progressing through discovery, brief creation, design directions, and full site building.

Miles是一款可通过CLI对话交互的AI网站设计师。您发送消息，Miles会做出响应，逐步完成需求探索、简报创建、设计方向确定以及完整网站搭建的流程。

Available Commands

可用命令

This is the complete set of commands. Do not invent others.

Command	Purpose
`miles whoami`	Check authentication status
`miles login`	Authenticate (production)
`miles create-site "<description>" [--brief file]`	Create site, start conversation, wait for response
`miles reply "<message>"`	Send a message to Miles, wait for response
`miles wait`	Recovery only — if a prior command was interrupted
`miles status`	Quick non-blocking status check
`miles design-directions`	Re-list design direction preview URLs
`miles select-design-direction <N>`	Pick a design, triggers site build, waits for completion
`miles screenshot <url>`	Screenshot a preview URL (saves JPEG, prints path)
`miles preview`	Open dashboard in browser
`miles sites`	List all sites
`miles balance`	Check credits
`miles messages`	Full conversation history
`miles export-site`	Get static HTML download URL
`miles build-theme`	Convert HTML site to WordPress theme
`miles export-theme`	Get WordPress theme download URL

Run all miles commands as:

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs <command>

Set the Bash timeout to 10 minutes (600000ms) for all miles commands — site building and theme conversion can take several minutes.

以下是完整的命令列表，请勿自行添加其他命令。

命令	用途
`miles whoami`	检查认证状态
`miles login`	进行认证（生产环境）
`miles create-site "<description>" [--brief file]`	创建网站，启动对话，等待响应
`miles reply "<message>"`	向Miles发送消息，等待响应
`miles wait`	仅用于恢复操作——若之前的命令被中断
`miles status`	快速非阻塞式状态检查
`miles design-directions`	重新列出设计方向预览URL
`miles select-design-direction <N>`	选择设计方案，触发网站搭建，等待完成
`miles screenshot <url>`	截取预览URL的屏幕截图（保存为JPEG格式，打印文件路径）
`miles preview`	在浏览器中打开控制面板
`miles sites`	列出所有网站
`miles balance`	查看可用点数
`miles messages`	查看完整对话历史
`miles export-site`	获取静态HTML下载URL
`miles build-theme`	将HTML网站转换为WordPress主题
`miles export-theme`	获取WordPress主题下载URL

所有miles命令的运行格式为：

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs <command>

将所有miles命令的Bash超时时间设置为10分钟（600000毫秒）——网站搭建和主题转换可能需要数分钟时间。

Step 1: Authenticate

步骤1：认证

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs whoami

If not logged in:

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs login

This opens a browser URL for approval. Tell the user to approve in their browser.

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs whoami

若未登录：

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs login

此命令会打开一个浏览器URL以供授权。请告知用户在浏览器中完成授权操作。

Step 2: Create a Site

步骤2：创建网站

Pass the user's description directly to create-site — the richer the initial description, the fewer follow-up questions Miles will ask:

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs create-site "<user's description>"

If the user provided a written brief, save it to a temp file and use

--brief

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs create-site --brief /tmp/brief.md "<summary>"

直接将用户的描述传递给create-site命令——初始描述越详细，Miles后续提出的问题就越少：

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs create-site "<用户的描述>"

若用户提供了书面简报，将其保存到临时文件并使用

--brief

参数：

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs create-site --brief /tmp/brief.md "<摘要>"

Step 3: Relay the Conversation

步骤3：传递对话内容

After every

create-site

reply

, or

wait

command, Miles' response is delivered to you as additional context via a hook. This context contains Miles' message, the current phase, and structured data like questions and options.

<relay_guidance>

在每次执行

create-site

、

reply

或

wait

命令后，Miles的响应会通过钩子作为附加上下文传递给您。此上下文包含Miles的消息、当前阶段以及问题、选项等结构化数据。

<relay_guidance>

Your role: relay, not participant

您的角色：传递者，而非参与者

Miles conducts a design interview where each question builds on previous answers to refine the user's intent. Even if you think you know the answer from the user's original prompt, Miles needs to hear it directly from the user — Miles uses the specific phrasing to calibrate tone, formality, and design direction. Skipping the conversation produces worse designs because Miles lacks the nuanced input it needs.

Your job is straightforward: take what Miles says and show it to the user, then take what the user says and send it to Miles.

A detailed initial prompt (e.g. "Build me a website for my yoga studio in Portland, we do hot yoga and vinyasa, modern style") is a description to pass to

create-site

, not permission to answer all of Miles' follow-up questions yourself. Only if the user explicitly says "just go ahead" or "you decide" can you answer Miles' questions using your judgment — and even then, still show the brief and design directions for user approval.

Miles会进行设计访谈，每个问题都基于之前的回答来细化用户的需求。即使您认为从用户最初的提示中可以知道答案，Miles也需要直接从用户那里获取——Miles会使用用户的具体措辞来校准语气、正式程度和设计方向。跳过对话流程会导致设计效果变差，因为Miles缺少所需的细微输入。

您的工作很简单：将Miles的内容展示给用户，然后将用户的回复发送给Miles。

详细的初始提示（例如：“为我在波特兰的瑜伽工作室搭建一个网站，我们提供热瑜伽和流瑜伽课程，风格要现代”）是需要传递给

create-site

的描述，而非您自行回答Miles所有后续问题的许可。只有当用户明确表示“直接进行”或“由你决定”时，您才能根据判断回答Miles的问题——即便如此，仍需向用户展示简报和设计方向以获得批准。

How to relay

传递方式

The hook context includes structured tags like

[question: ...]

with question text and numbered options. Use

AskUserQuestion

to present these to the user, copying the question text and options directly from the context. Then send the user's answer:

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "<user's exact answer>"

Pass the user's words through unchanged. If the user says "Modern and clean", send "Modern and clean" — Miles knows how to work with brief answers. Go straight to the next action after each reply; skip commentary like "Great choice!".

</relay_guidance>

<example> User prompt: "Build a website for my yoga studio"

Run:

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs create-site "Build a website for my yoga studio"

Hook context arrives with:

[question: What's the name of your studio?]

Use AskUserQuestion: "What's the name of your studio?"
User answers: "Breathe Portland Yoga"

Run:

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "Breathe Portland Yoga"

Hook context arrives with next question → repeat relay
Miles presents brief (phase: brief_review) → show brief to user, ask approval

User approves →

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "Looks good, approved"

Miles generates design directions → present to user for selection

User picks design 2 →

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs select-design-direction 2

Miles builds the site →
```
[site_ready: true]
```

</example>

钩子上下文包含

[question: ...]

等结构化标签，其中包含问题文本和编号选项。使用

AskUserQuestion

将这些内容呈现给用户，直接复制上下文里的问题文本和选项。然后将用户的答案发送出去：

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "<用户的准确回答>"

直接传递用户的原话。如果用户说“现代简洁风格”，就发送“现代简洁风格”——Miles知道如何处理简短的回答。每次回复后直接进行下一步操作，跳过“好选择！”之类的评论。

</relay_guidance>

<example> 用户提示：“为我的瑜伽工作室搭建一个网站”

运行：

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs create-site "为我的瑜伽工作室搭建一个网站"

钩子上下文到达，内容为：

[question: 您的工作室名称是什么？]

使用AskUserQuestion：“您的工作室名称是什么？”
用户回答：“波特兰呼吸瑜伽工作室”

运行：

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "波特兰呼吸瑜伽工作室"

钩子上下文到达，包含下一个问题 → 重复传递流程
Miles展示简报（阶段：brief_review）→ 向用户展示简报并请求批准

用户批准 →

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "看起来不错，批准"

Miles生成设计方向 → 呈现给用户供选择

用户选择设计方案2 →

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs select-design-direction 2

Miles搭建网站 →
```
[site_ready: true]
```

</example>

Brief review

简报审核

When Miles presents a design brief for approval (phase:

brief_review

), show the brief content to the user and ask them to approve or request changes. The brief is the blueprint for the entire site — the user needs to see it.

当Miles展示设计简报以请求批准时（阶段：

brief_review

），请向用户展示简报内容并询问他们是否批准或需要修改。简报是整个网站的蓝图——用户需要查看它。

Step 4: Choose a Design Direction

步骤4：选择设计方向

When Miles finishes generating design directions (phase:

design_directions_ready

), the context includes preview URLs for each design.

Visually inspect each design before presenting to the user. If a browser is available, open the preview URLs. Otherwise, use

miles screenshot

to capture them — it saves a JPEG and prints the path, then use

Read

to view the image:

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs screenshot /preview/abc123/previews/hero-xyz/index.html

When evaluating designs, consider: visual hierarchy, tone match with the business, layout quality, image quality, overall polish.

If none fit, ask Miles for new directions with feedback:

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "None of these feel right. I want something more modern and minimal."
${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs wait

Use

AskUserQuestion

to ask the user which design they prefer. Then select it — this command triggers the full site build and waits for completion:

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs select-design-direction <number>

The select command already waits for the build, so there's no need to run

miles wait

after it.

当Miles完成设计方向生成后（阶段：

design_directions_ready

），上下文会包含每个设计方案的预览URL。

在向用户展示前，请先直观检查每个设计方案。若有可用浏览器，打开预览URL。否则，使用

miles screenshot

命令截取屏幕截图——它会保存为JPEG格式并打印文件路径，然后使用

Read

查看图片：

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs screenshot /preview/abc123/previews/hero-xyz/index.html

评估设计方案时，请考虑：视觉层次结构、与业务的调性匹配度、布局质量、图片质量、整体精致度。

若没有合适的方案，请向Miles反馈并请求新的设计方向：

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "这些都不合适。我想要更现代、更简约的风格。"
${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs wait

使用

AskUserQuestion

询问用户偏好的设计方案。然后选择该方案——此命令会触发完整的网站搭建并等待完成：

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs select-design-direction <编号>

select命令已包含等待搭建完成的逻辑，因此无需在之后运行

miles wait

。

Step 5: The Built HTML Site

步骤5：已搭建完成的HTML网站

When

select-design-direction

finishes (indicated by

[site_ready: true]

), Miles has built a complete static HTML website. This is the first deliverable.

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs preview              # Open live preview in browser
${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs screenshot <url>     # Screenshot a preview URL
${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs export-site          # Get static HTML download URL and file info

当

select-design-direction

命令完成后（由

[site_ready: true]

标识），Miles已搭建好完整的静态HTML网站。这是第一个交付成果。

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs preview              # 在浏览器中打开实时预览
${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs screenshot <url>     # 截取预览URL的屏幕截图
${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs export-site          # 获取静态HTML下载URL和文件信息

Step 6: WordPress Theme (Separate Step)

步骤6：WordPress主题（单独步骤）

Converting the HTML site into a WordPress block theme is a separate operation from the site build.

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs build-theme          # Triggers theme conversion
${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs export-theme         # Get WordPress theme download URL

将HTML网站转换为WordPress区块主题是独立于网站搭建的操作。

bash

${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs build-theme          # 触发主题转换
${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs export-theme         # 获取WordPress主题下载URL

How the Hook Works

钩子的工作原理

When you run

create-site

reply

, or

wait

, the CLI writes Miles' response to a file. After the Bash command completes, a PostToolUse hook reads that file and delivers it to you as additional context. This means:

Miles' response appears as context after the tool result — look for it there, not in stdout
```
create-site
```
,
```
reply
```
, and
```
wait
```
already deliver Miles' full response, so calling
```
miles messages
```
or
```
miles status
```
afterward is redundant
Go straight to the next action after receiving Miles' response (relay the question via AskUserQuestion, or tell the user what happened)

当您运行

create-site

、

reply

或

wait

命令时，CLI会将Miles的响应写入文件。Bash命令完成后，PostToolUse钩子会读取该文件并将其作为附加上下文传递给您。这意味着：

Miles的响应会出现在工具结果之后的上下文中——请在那里查找，而非标准输出
```
create-site
```
、
```
reply
```
和
```
wait
```
命令已会传递Miles的完整响应，因此之后调用
```
miles messages
```
或
```
miles status
```
是多余的
收到Miles的响应后直接进行下一步操作（通过AskUserQuestion传递问题，或告知用户当前进展）

Credits

点数说明

Miles uses credits for operations. If the context includes a

[warning: ...]

about credits running low, inform the user. If there's an

[error: ...]

about no credits, stop and tell the user to top up at their dashboard billing page.

See commands.md for detailed command reference and examples.md for workflow examples.

Miles的操作需要消耗点数。若上下文包含

[warning: ...]

提示点数不足，请告知用户。若出现

[error: ...]

提示点数用尽，请停止操作并告知用户前往控制面板的账单页面充值。

详细命令参考请见commands.md，工作流示例请见examples.md。