Back to Details

browser-app-creator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Browser App Creator

浏览器应用创建工具

Purpose

用途

Creates production-ready single-file web applications that work offline with zero setup. Perfect for quick tools, dashboards, trackers, and prototypes.
For ADHD users: Large buttons (60px+), auto-save everything, visual feedback, zero configuration. For SDAM users: All data persists in localStorage with timestamps. For all users: Download and use immediately - no server, no build step, no dependencies.
创建可离线运行、无需任何配置的生产级单文件Web应用，非常适合快速工具、仪表盘、追踪器和原型开发。
针对ADHD用户：大尺寸按钮（60px以上）、自动保存所有内容、视觉反馈、零配置。 针对SDAM用户：所有数据通过localStorage持久化并带有时间戳。 针对所有用户：下载后即可使用 - 无需服务器、无需构建步骤、无依赖项。

Activation Triggers

触发条件

  • User says: "create app", "build tool", "make dashboard", "create tracker"
  • Requests for: habit tracker, todo list, timer, calculator, form, visualization
  • Any request for a browser-based interface or tool
  • 用户说：「create app」「build tool」「make dashboard」「create tracker」
  • 请求创建：习惯追踪器、待办事项列表、计时器、计算器、表单、可视化工具
  • 任何基于浏览器的界面或工具需求

Core Workflow

核心工作流程

1. Understand Requirements

1. 理解需求

Ask clarifying questions only if absolutely necessary:
javascript
{
  app_type: "dashboard|tracker|form|tool|visualization",
  primary_function: "What does the app do?",
  data_to_track: ["What data needs to be stored?"],
  key_actions: ["What can users do?"],
  visual_requirements: "Any specific layout needs?"
}
仅在绝对必要时提出澄清问题：
javascript
{
  app_type: "dashboard|tracker|form|tool|visualization",
  primary_function: "What does the app do?",
  data_to_track: ["What data needs to be stored?"],
  key_actions: ["What can users do?"],
  visual_requirements: "Any specific layout needs?"
}

2. Generate Single-File App

2. 生成单文件应用

Template structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{App Name}</title>
  <style>
    /* ADHD-Optimized Styles */
  </style>
</head>
<body>
  <!-- App UI -->
  <script>
    // App Logic + localStorage
  </script>
</body>
</html>
模板结构:
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{App Name}</title>
  <style>
    /* ADHD-Optimized Styles */
  </style>
</head>
<body>
  <!-- App UI -->
  <script>
    // App Logic + localStorage
  </script>
</body>
</html>

3. ADHD Optimization Requirements

3. ADHD优化要求

Required UI elements:
  • ✅ Buttons: Minimum 60px height, high contrast
  • ✅ Dark mode: Default theme (can toggle)
  • ✅ Auto-save: Every action saves to localStorage
  • ✅ Visual feedback: Success/error messages
  • ✅ Mobile responsive: Works on all screen sizes
  • ✅ Large touch targets: 44px minimum for mobile
CSS Requirements:
css
/* ADHD-Optimized Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #1a1a1a;
  color: #e0e0e0;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

button {
  min-height: 60px;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #4a9eff;
  color: white;
}

button:hover {
  background: #357abd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
}

button:active {
  transform: translateY(0);
}

input, textarea, select {
  min-height: 50px;
  padding: 12px 15px;
  font-size: 16px;
  border: 2px solid #333;
  border-radius: 6px;
  background: #2a2a2a;
  color: #e0e0e0;
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
}
必填UI元素:
  • ✅ 按钮：最小高度60px，高对比度
  • ✅ 暗色模式：默认主题（可切换）
  • ✅ 自动保存：所有操作均保存至localStorage
  • ✅ 视觉反馈：成功/错误提示信息
  • ✅ 移动端响应式：适配所有屏幕尺寸
  • ✅ 大尺寸触摸目标：移动端最小44px
CSS要求:
css
/* ADHD-Optimized Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #1a1a1a;
  color: #e0e0e0;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

button {
  min-height: 60px;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #4a9eff;
  color: white;
}

button:hover {
  background: #357abd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
}

button:active {
  transform: translateY(0);
}

input, textarea, select {
  min-height: 50px;
  padding: 12px 15px;
  font-size: 16px;
  border: 2px solid #333;
  border-radius: 6px;
  background: #2a2a2a;
  color: #e0e0e0;
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
}

4. localStorage Pattern

4. localStorage 模式

Always include:
javascript
// localStorage Manager
const Storage = {
  key: 'app-name-data',

  save(data) {
    try {
      localStorage.setItem(this.key, JSON.stringify({
        ...data,
        lastUpdated: new Date().toISOString()
      }));
      this.showFeedback('✅ Saved!');
    } catch (error) {
      this.showFeedback('❌ Save failed', true);
      console.error('Save error:', error);
    }
  },

  load() {
    try {
      const data = localStorage.getItem(this.key);
      return data ? JSON.parse(data) : this.getDefaults();
    } catch (error) {
      console.error('Load error:', error);
      return this.getDefaults();
    }
  },

  getDefaults() {
    return {
      items: [],
      settings: {},
      created: new Date().toISOString()
    };
  },

  showFeedback(message, isError = false) {
    const feedback = document.createElement('div');
    feedback.textContent = message;
    feedback.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 25px;
      background: ${isError ? '#ff4444' : '#44ff88'};
      color: #000;
      border-radius: 8px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      z-index: 1000;
      animation: slideIn 0.3s ease;
    `;
    document.body.appendChild(feedback);
    setTimeout(() => feedback.remove(), 2000);
  }
};

// Auto-save on any change
function autoSave(data) {
  Storage.save(data);
}

// Load on page load
let appData = Storage.load();
必须包含:
javascript
// localStorage Manager
const Storage = {
  key: 'app-name-data',

  save(data) {
    try {
      localStorage.setItem(this.key, JSON.stringify({
        ...data,
        lastUpdated: new Date().toISOString()
      }));
      this.showFeedback('✅ Saved!');
    } catch (error) {
      this.showFeedback('❌ Save failed', true);
      console.error('Save error:', error);
    }
  },

  load() {
    try {
      const data = localStorage.getItem(this.key);
      return data ? JSON.parse(data) : this.getDefaults();
    } catch (error) {
      console.error('Load error:', error);
      return this.getDefaults();
    }
  },

  getDefaults() {
    return {
      items: [],
      settings: {},
      created: new Date().toISOString()
    };
  },

  showFeedback(message, isError = false) {
    const feedback = document.createElement('div');
    feedback.textContent = message;
    feedback.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 25px;
      background: ${isError ? '#ff4444' : '#44ff88'};
      color: #000;
      border-radius: 8px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      z-index: 1000;
      animation: slideIn 0.3s ease;
    `;
    document.body.appendChild(feedback);
    setTimeout(() => feedback.remove(), 2000);
  }
};

// Auto-save on any change
function autoSave(data) {
  Storage.save(data);
}

// Load on page load
let appData = Storage.load();

5. App Templates

5. 应用模板

See templates.md for complete examples of:
  • Dashboard: Metrics, charts, status indicators
  • Tracker: Habits, tasks, progress
  • Form: Data entry, validation, submission
  • Tool: Calculators, converters, utilities
  • Visualization: Charts, graphs, timelines
查看 templates.md 获取完整示例：
  • 仪表盘：指标、图表、状态指示器
  • 追踪器：习惯、任务、进度
  • 表单：数据录入、验证、提交
  • 工具：计算器、转换器、实用程序
  • 可视化：图表、图形、时间线

6. Deliver the App

6. 交付应用

Format:
✅ **{App Name}** complete!

**Features**:
- {Feature 1}
- {Feature 2}
- {Feature 3}

**Usage**:
1. Save the file as `{app-name}.html`
2. Open in any browser
3. Works offline
4. Data auto-saves to your browser

**Customization**:
- Colors: Edit the CSS variables at the top
- Features: Modify the JavaScript section
- Layout: Adjust the HTML structure
Then provide the complete HTML file.
格式:
✅ **{应用名称}** 已完成！

**功能特性**:
- {特性1}
- {特性2}
- {特性3}

**使用方法**:
1. 将文件保存为 `{app-name}.html`
2. 在任意浏览器中打开
3. 支持离线使用
4. 数据自动保存至浏览器

**自定义方式**:
- 颜色：修改顶部的CSS变量
- 功能：修改JavaScript部分
- 布局：调整HTML结构
然后提供完整的HTML文件。

Common App Types

常见应用类型

Dashboard

仪表盘

Purpose: Display metrics, status, and key information Elements: Cards, charts, progress bars, status indicators Data: Real-time or static metrics Example: Project status dashboard, analytics viewer
用途：显示指标、状态和关键信息 元素：卡片、图表、进度条、状态指示器 数据：实时或静态指标 示例：项目状态仪表盘、分析查看器

Tracker

追踪器

Purpose: Record and monitor recurring items Elements: Add/remove items, checkboxes, timestamps Data: List of items with status and dates Example: Habit tracker, task list, mood journal
用途：记录和监控重复项 元素：添加/删除项目、复选框、时间戳 数据：带有状态和日期的项目列表 示例：习惯追踪器、任务列表、心情日志

Form/Input

表单/输入

Purpose: Collect and validate user input Elements: Input fields, validation, submit button Data: Form submissions with timestamps Example: Survey, calculator, data entry tool
用途：收集和验证用户输入 元素：输入字段、验证、提交按钮 数据：带时间戳的表单提交记录 示例：调查问卷、计算器、数据录入工具

Visualization

可视化

Purpose: Display data visually Elements: Charts, graphs, timelines Data: Visual representation of datasets Example: Chart builder, timeline viewer, graph tool
用途：以视觉方式展示数据 元素：图表、图形、时间线 数据：数据集的可视化表示 示例：图表构建器、时间线查看器、图形工具

Interactive Tool

交互式工具

Purpose: Perform specific tasks or calculations Elements: Controls, real-time updates, results Data: Temporary or persistent tool state Example: Timer, converter, game, simulator
用途：执行特定任务或计算 元素：控件、实时更新、结果展示 数据：临时或持久化的工具状态 示例：计时器、转换器、游戏、模拟器

Advanced Features

高级功能

Dark/Light Mode Toggle

暗色/亮色模式切换

javascript
function toggleTheme() {
  const currentTheme = document.body.dataset.theme || 'dark';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.body.dataset.theme = newTheme;
  localStorage.setItem('theme-preference', newTheme);
}

// Load saved theme
document.body.dataset.theme = localStorage.getItem('theme-preference') || 'dark';
javascript
function toggleTheme() {
  const currentTheme = document.body.dataset.theme || 'dark';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.body.dataset.theme = newTheme;
  localStorage.setItem('theme-preference', newTheme);
}

// Load saved theme
document.body.dataset.theme = localStorage.getItem('theme-preference') || 'dark';

Export Data

数据导出

javascript
function exportData() {
  const data = Storage.load();
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `app-data-${Date.now()}.json`;
  a.click();
  URL.revokeObjectURL(url);
}
javascript
function exportData() {
  const data = Storage.load();
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `app-data-${Date.now()}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

Import Data

数据导入

javascript
function importData() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'application/json';
  input.onchange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const data = JSON.parse(event.target.result);
        Storage.save(data);
        location.reload();
      } catch (error) {
        alert('Invalid file format');
      }
    };
    reader.readAsText(file);
  };
  input.click();
}
javascript
function importData() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'application/json';
  input.onchange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const data = JSON.parse(event.target.result);
        Storage.save(data);
        location.reload();
      } catch (error) {
        alert('Invalid file format');
      }
    };
    reader.readAsText(file);
  };
  input.click();
}

Browser Notifications

浏览器通知

javascript
async function notifyUser(title, body) {
  if ('Notification' in window && Notification.permission === 'granted') {
    new Notification(title, { body });
  } else if (Notification.permission !== 'denied') {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      new Notification(title, { body });
    }
  }
}
javascript
async function notifyUser(title, body) {
  if ('Notification' in window && Notification.permission === 'granted') {
    new Notification(title, { body });
  } else if (Notification.permission !== 'denied') {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      new Notification(title, { body });
    }
  }
}

Styling Guidelines

样式指南

See styling.md for:
  • Complete CSS framework
  • Color schemes
  • Responsive breakpoints
  • Animation patterns
  • Accessibility guidelines
查看 styling.md 获取：
  • 完整CSS框架
  • 配色方案
  • 响应式断点
  • 动画模式
  • 无障碍指南

Integration with Other Skills

与其他技能的集成

Rapid Prototyper

快速原型生成器

If app needs backend:
browser-app-creator → Creates frontend
rapid-prototyper → Creates backend API
Result: Full-stack app
如果应用需要后端：
browser-app-creator → 创建前端
rapid-prototyper → 创建后端API
结果：全栈应用

Context Manager

上下文管理器

Save app decisions:
remember: Created habit tracker with localStorage
Type: PROCEDURE
Tags: browser-app, localStorage, tracking
保存应用决策：
remember: Created habit tracker with localStorage
Type: PROCEDURE
Tags: browser-app, localStorage, tracking

Error Debugger

错误调试器

If app has bugs:
Automatically invokes error-debugger for:
- JavaScript errors
- localStorage issues
- Browser compatibility
如果应用存在bug：
自动调用error-debugger处理以下问题：
- JavaScript错误
- localStorage问题
- 浏览器兼容性

Quality Checklist

质量检查清单

Before delivering, verify:
  • ✅ Single file (HTML + CSS + JS)
  • ✅ Works offline (no external dependencies)
  • ✅ Buttons ≥60px height
  • ✅ Dark mode default
  • ✅ localStorage auto-save
  • ✅ Visual feedback on actions
  • ✅ Mobile responsive
  • ✅ No console errors
  • ✅ Data persists on reload
交付前，请验证：
  • ✅ 单文件（HTML + CSS + JS）
  • ✅ 可离线运行（无外部依赖）
  • ✅ 按钮高度≥60px
  • ✅ 默认暗色模式
  • ✅ localStorage自动保存
  • ✅ 操作时的视觉反馈
  • ✅ 移动端响应式
  • ✅ 控制台无错误
  • ✅ 刷新后数据仍持久化

Example Output

示例输出

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Habit Tracker</title>
  <style>
    /* Complete styles here */
  </style>
</head>
<body>
  <h1>Habit Tracker</h1>
  <div id="app">
    <!-- App UI here -->
  </div>
  <script>
    // Complete logic here
  </script>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Habit Tracker</title>
  <style>
    /* Complete styles here */
  </style>
</head>
<body>
  <h1>Habit Tracker</h1>
  <div id="app">
    <!-- App UI here -->
  </div>
  <script>
    // Complete logic here
  </script>
</body>
</html>

Success Criteria

成功标准

✅ App works immediately after opening ✅ Data persists across browser sessions ✅ ADHD-optimized (large buttons, auto-save) ✅ No setup or installation required ✅ Mobile-friendly ✅ Professional appearance ✅ Intuitive to use ✅ Handles errors gracefully
✅ 应用打开后即可立即使用 ✅ 数据在浏览器会话间持久化 ✅ 符合ADHD优化标准（大按钮、自动保存） ✅ 无需任何配置或安装 ✅ 适配移动端 ✅ 外观专业 ✅ 操作直观 ✅ 可优雅处理错误

Additional Resources

额外资源

  • App Templates - Complete working examples
  • Styling Guide - CSS patterns and color schemes
  • 应用模板 - 完整可运行示例
  • 样式指南 - CSS模式和配色方案

Quick Reference

快速参考

Trigger Phrases

触发短语

  • "create app"
  • "build tool"
  • "make dashboard"
  • "create tracker"
  • "build calculator"
  • "make timer"
  • "create app"
  • "build tool"
  • "make dashboard"
  • "create tracker"
  • "build calculator"
  • "make timer"

File Location

文件存储位置

All created apps should be saved to:
  • Linux/macOS: 
    ~/.claude-artifacts/
  • Windows: 
    %USERPROFILE%\.claude-artifacts\
所有创建的应用应保存至：
  • Linux/macOS: 
    ~/.claude-artifacts/
  • Windows: 
    %USERPROFILE%\.claude-artifacts\

Common Patterns

常见模式

App TypeKey FeaturelocalStorage Structure
TrackerList + checkboxes
{ items: [...], dates: {...} }
DashboardCards + metrics
{ metrics: {...}, updated: "" }
FormInput + validation
{ submissions: [...] }
ToolControls + results
{ settings: {...}, history: [...] }
应用类型核心特性localStorage结构
追踪器列表 + 复选框
{ items: [...], dates: {...} }
仪表盘卡片 + 指标
{ metrics: {...}, updated: "" }
表单输入 + 验证
{ submissions: [...] }
工具控件 + 结果
{ settings: {...}, history: [...] }