miles

Original：🇺🇸 English
Translated
1 scripts

Design websites with Miles AI. Use when building websites, generating site layouts, creating web content, or when the user mentions Miles. Manages the full design conversation from brief through design direction selection to final build.

2installs
Sourcebymilesai/skills
Added on

NPX Install

npx skill4agent add bymilesai/skills miles

Tags

Translated version includes tags in frontmatter
miles-aiwebsite-designcli-toolai-designsite-building

SKILL.md Content

View Translation Comparison →

Miles AI Website Designer

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.

Available Commands

This is the complete set of commands. Do not invent others.
CommandPurpose
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.

Step 1: Authenticate

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.

Step 2: Create a Site

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>"

Step 3: Relay the Conversation

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>

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.

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"
  1. Run: 
    ${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs create-site "Build a website for my yoga studio"
  2. Hook context arrives with: 
    [question: What's the name of your studio?]
  3. Use AskUserQuestion: "What's the name of your studio?"
  4. User answers: "Breathe Portland Yoga"
  5. Run: 
    ${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "Breathe Portland Yoga"
  6. Hook context arrives with next question → repeat relay
  7. Miles presents brief (phase: brief_review) → show brief to user, ask approval
  8. User approves → 
    ${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs reply "Looks good, approved"
  9. Miles generates design directions → present to user for selection
  10. User picks design 2 → 
    ${CLAUDE_SKILL_DIR}/scripts/miles-cli.mjs select-design-direction 2
  11. Miles builds the site → 
    [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.

Step 4: Choose a Design Direction

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.

Step 5: The Built HTML Site

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

Step 6: WordPress Theme (Separate Step)

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

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)

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.