browser-app-creator

浏览器应用创建器

用途

创建可离线运行、无需任何设置的生产就绪型单文件 Web 应用。非常适合快速创建工具、仪表板、跟踪器和原型。

适用于 ADHD 用户：按钮大（60px 及以上）、自动保存所有内容、提供视觉反馈、无需配置。 适用于 SDAM 用户：所有数据都带时间戳保存在 localStorage 中。 适用于所有用户：下载后即可立即使用——无需服务器、无需构建步骤、无需依赖项。

激活条件

• 用户说：“创建应用”“构建工具”“制作仪表板”“创建跟踪器”
• 用户请求：习惯跟踪器、待办事项列表、计时器、计算器、表单、可视化
• 任何关于浏览器界面或工具的请求

核心工作流

1. 了解需求

只有在绝对必要时才提出澄清问题：

{
  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. 生成单文件应用

模板结构：

<!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>
  
  <script>
    // App Logic + localStorage
  </script>
</body>
</html>

3. ADHD 优化要求

必需的 UI 元素：

• ✅ 按钮：高度至少为 60px，高对比度
• ✅ 深色模式：默认主题（可切换）
• ✅ 自动保存：每项操作都会保存到 localStorage
• ✅ 视觉反馈：成功／错误消息
• ✅ 适配移动设备：适用于所有屏幕尺寸
• ✅ 大型触控区域：移动设备上至少为 44px

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 模式

始终包含：

// 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. 应用模板

完整示例请参见 templates.md：

• 仪表板：指标、图表、状态指示器
• 跟踪器：习惯、任务、进度
• 表单：数据录入、验证、提交
• 工具：计算器、转换器、实用工具
• 可视化：图表、图形、时间线

6. 交付应用

格式：

✅ **{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

然后提供完整的 HTML 文件。

常见应用类型

仪表板

用途：显示指标、状态和关键信息 元素：卡片、图表、进度条、状态指示器 数据：实时或静态指标 示例：项目状态仪表板、分析查看器

跟踪器

用途：记录并监控重复发生的项目 元素：添加／移除项目、复选框、时间戳 数据：包含状态和日期的项目列表 示例：习惯跟踪器、任务列表、情绪日记

表单／输入

用途：收集并验证用户输入 元素：输入字段、验证、提交按钮 数据：带时间戳的表单提交记录 示例：调查问卷、计算器、数据录入工具

可视化

用途：以可视化方式显示数据 元素：图表、图形、时间线 数据：数据集的可视化呈现 示例：图表构建器、时间线查看器、图形工具

交互式工具

用途：执行特定任务或计算 元素：控件、实时更新、结果 数据：临时或持久的工具状态 示例：计时器、转换器、游戏、模拟器

高级功能

深色／浅色模式切换

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';

导出数据

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);
}

导入数据

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();
}

浏览器通知

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.md，其中包含：

• 完整的 CSS 框架
• 配色方案
• 响应式断点
• 动画模式
• 无障碍指南

与其他技能集成

快速原型设计器

如果应用需要后端：

browser-app-creator → Creates frontend
rapid-prototyper → Creates backend API
Result: Full-stack app

上下文管理器

保存应用决策：

remember: Created habit tracker with localStorage
Type: PROCEDURE
Tags: browser-app, localStorage, tracking

错误调试器

如果应用存在错误：

Automatically invokes error-debugger for:
- JavaScript errors
- localStorage issues
- Browser compatibility

质量检查清单

交付前，请确认：

• ✅ 单个文件（HTML + CSS + JS）
• ✅ 可离线运行（无外部依赖项）
• ✅ 按钮高度 ≥60px
• ✅ 默认启用深色模式
• ✅ localStorage 自动保存
• ✅ 操作时提供视觉反馈
• ✅ 适配移动设备
• ✅ 控制台无错误
• ✅ 重新加载后数据仍然保留

输出示例

<!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">
    
  </div>
  <script>
    // Complete logic here
  </script>
</body>
</html>

成功标准

✅ 打开后即可立即使用 ✅ 数据可在不同浏览器会话之间保留 ✅ 针对 ADHD 用户优化（大按钮、自动保存） ✅ 无需设置或安装 ✅ 适用于移动设备 ✅ 外观专业 ✅ 使用直观 ✅ 能妥善处理错误

其他资源

• 应用模板 - 完整的可运行示例
• 样式指南 - CSS 模式和配色方案

快速参考

触发短语

• “创建应用”
• “构建工具”
• “制作仪表板”
• “创建追踪器”
• “构建计算器”
• “制作计时器”

文件位置

所有创建的应用都应保存到：

• Linux/macOS：~/.claude-artifacts/
• Windows：%USERPROFILE%\.claude-artifacts\

常见模式

应用类型	主要功能	localStorage 结构
追踪器	列表 + 复选框	{ items: [...], dates: {...} }
仪表板	卡片 + 指标	{ metrics: {...}, updated: "" }
表单	输入 + 验证	{ submissions: [...] }
工具	控件 + 结果	{ settings: {...}, history: [...] }