artifacts-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Artifacts Builder

产出物构建器

Overview

概述

Generate self-contained, production-quality HTML/CSS/JS artifacts that run in any modern browser without a build step. Each artifact is a single file (or minimal file set) containing everything needed for an interactive demo, prototype, data visualization, or utility tool. Emphasis on progressive enhancement, responsive design, and clean code.

生成自包含、生产级质量的HTML/CSS/JS产出物，无需构建步骤即可在任何现代浏览器中运行。每个产出物都是单个文件（或最小文件集），包含运行交互演示、原型、数据可视化或实用工具所需的全部内容。重点关注渐进增强、响应式设计和简洁代码。

Phase 1: Scope Definition

阶段1：范围定义

Clarify the artifact's purpose (demo, prototype, tool, visualization)
Determine interactivity level (static, interactive, data-driven)
Identify required dependencies (none, CDN-loaded, embedded)
Define responsive requirements (mobile, desktop, both)
Set constraints (file size, browser support, offline capability)

STOP — Confirm scope and constraints with user before architecture decisions.

明确产出物的用途（演示、原型、工具、可视化）
确定交互级别（静态、可交互、数据驱动）
识别所需依赖（无、CDN加载、内嵌）
定义响应式要求（移动端、桌面端、两者兼顾）
设置约束条件（文件大小、浏览器支持、离线可用能力）

停止 —— 在做出架构决策前，先与用户确认范围和约束条件。

Artifact Type Decision Table

产出物类型决策表

Purpose	Complexity	Dependencies	Example
Static demo	Low	None	Product mockup, landing page
Interactive widget	Medium	None or Alpine.js	Calculator, form builder
Data visualization	Medium-High	D3.js or Chart.js	Dashboard, chart explorer
Prototype	Medium	Alpine.js or Petite-Vue	Clickable UI prototype
Utility tool	Medium-High	Varies	JSON formatter, color picker
Generative art	Medium	None	Canvas animation, pattern generator
Presentation	Medium	None or Mermaid	Slide deck, diagram viewer

用途	复杂度	依赖	示例
静态演示	低	无	产品模型、落地页
交互组件	中等	无或Alpine.js	计算器、表单生成器
数据可视化	中高	D3.js或Chart.js	仪表盘、图表浏览器
原型	中等	Alpine.js或Petite-Vue	可点击UI原型
实用工具	中高	依场景而定	JSON格式化工具、拾色器
生成艺术	中等	无	Canvas动画、图案生成器
演示文稿	中等	无或Mermaid	幻灯片、图表查看器

Phase 2: Architecture

阶段2：架构设计

Choose single-file or multi-file approach
Select CDN dependencies (if any)
Plan component structure within the file
Define state management approach
Plan progressive enhancement layers

STOP — Present architecture and dependency choices for approval.

选择单文件或多文件方案
选择CDN依赖（如有）
规划文件内的组件结构
定义状态管理方案
规划渐进增强层级

停止 —— 提交架构和依赖选择方案供用户确认。

Architecture Decision Table

架构决策表

Constraint	Single-File	Multi-File
Easy sharing (email, paste)	Yes	No
File size < 100KB	Yes	Either
Multiple pages/views	Possible (SPA)	Better
Team collaboration	Difficult	Better
Offline use	Yes (self-contained)	Needs bundling
SEO requirements	N/A	N/A (artifacts are tools)

约束条件	单文件	多文件
易于分享（邮件、粘贴）	是	否
文件大小 < 100KB	是	均可
多页面/多视图	可实现（SPA）	更适合
团队协作	难度高	更适合
离线使用	是（自包含）	需要打包
SEO要求	不适用	不适用（产出物为工具类）

Dependency Decision Table

依赖决策表

Need	Recommended	CDN URL	Size
Lightweight reactivity	Alpine.js	`cdn.jsdelivr.net/npm/alpinejs@3`	~15KB
Minimal Vue-like	Petite-Vue	`unpkg.com/petite-vue`	~6KB
Charts	Chart.js	`cdn.jsdelivr.net/npm/chart.js@4`	~65KB
Data visualization	D3.js	`cdn.jsdelivr.net/npm/d3@7`	~90KB
Diagrams	Mermaid	`cdn.jsdelivr.net/npm/mermaid@10`	~120KB
CSS framework (proto)	Tailwind Play CDN	`cdn.tailwindcss.com`	Runtime
Icons	Lucide	`unpkg.com/lucide@latest`	On-demand
No dependency needed	Vanilla JS	N/A	0KB

需求	推荐方案	CDN URL	大小
轻量级响应式	Alpine.js	`cdn.jsdelivr.net/npm/alpinejs@3`	~15KB
类Vue的轻量方案	Petite-Vue	`unpkg.com/petite-vue`	~6KB
图表	Chart.js	`cdn.jsdelivr.net/npm/chart.js@4`	~65KB
数据可视化	D3.js	`cdn.jsdelivr.net/npm/d3@7`	~90KB
流程图/图表	Mermaid	`cdn.jsdelivr.net/npm/mermaid@10`	~120KB
CSS框架（原型用）	Tailwind Play CDN	`cdn.tailwindcss.com`	运行时加载
图标	Lucide	`unpkg.com/lucide@latest`	按需加载
无需依赖	Vanilla JS	N/A	0KB

CDN Usage Rules

CDN使用规则

Rule	Rationale
Pin to major version ( `@3` , `@7` )	Prevent breaking changes
Maximum 3 CDN dependencies	Keep artifacts lightweight
Add `integrity` and `crossorigin`	Security against CDN compromise
Provide graceful degradation	Work if CDN fails
Prefer smaller alternatives	Alpine over React, Petite-Vue over Vue

规则	原因
固定主版本号（ `@3` 、 `@7` ）	避免出现破坏性变更
最多使用3个CDN依赖	保持产出物轻量
添加 `integrity` 和 `crossorigin` 属性	防范CDN被篡改的安全风险
提供优雅降级方案	CDN加载失败时仍可正常运行
优先选择更小的替代方案	优先用Alpine而非React，用Petite-Vue而非Vue

Phase 3: Implementation

阶段3：实现

Build semantic HTML structure
Add CSS (inline
```
<style>
```
or embedded)
Implement JavaScript functionality
Add error handling and fallbacks
Test across viewports and browsers

STOP — Verify the artifact works correctly before delivering to user.

构建语义化HTML结构
添加CSS（内联
```
<style>
```
或内嵌）
实现JavaScript功能
添加错误处理和降级方案
在不同视口和浏览器中测试

停止 —— 在交付给用户前验证产出物可正常运行。

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>[Artifact Title]</title>
  <style>
    /* Reset */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Design Tokens */
    :root {
      --color-bg: #ffffff;
      --color-text: #1a1a2e;
      --color-primary: #3b82f6;
      --color-border: #e2e8f0;
      --radius: 0.5rem;
      --space: 1rem;
      --font: system-ui, -apple-system, sans-serif;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --color-bg: #0f172a;
        --color-text: #e2e8f0;
        --color-primary: #60a5fa;
        --color-border: #334155;
      }
    }

    /* Base Styles */
    body {
      font-family: var(--font);
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.6;
    }

    /* Component Styles */
    /* ... */
  </style>
</head>
<body>
  <!-- Semantic HTML content -->

  <script>
    // Application logic
    (function() {
      'use strict';
      // ...
    })();
  </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>[Artifact Title]</title>
  <style>
    /* Reset */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Design Tokens */
    :root {
      --color-bg: #ffffff;
      --color-text: #1a1a2e;
      --color-primary: #3b82f6;
      --color-border: #e2e8f0;
      --radius: 0.5rem;
      --space: 1rem;
      --font: system-ui, -apple-system, sans-serif;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --color-bg: #0f172a;
        --color-text: #e2e8f0;
        --color-primary: #60a5fa;
        --color-border: #334155;
      }
    }

    /* Base Styles */
    body {
      font-family: var(--font);
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.6;
    }

    /* Component Styles */
    /* ... */
  </style>
</head>
<body>
  <!-- Semantic HTML content -->

  <script>
    // Application logic
    (function() {
      'use strict';
      // ...
    })();
  </script>
</body>
</html>

Responsive Design Patterns

响应式设计模式

Container-Based Layout

基于容器的布局

css

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space);
}

css

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space);
}

Mobile-First Media Queries

移动端优先媒体查询

css

/* Base: mobile */
.layout { display: flex; flex-direction: column; }

/* Tablet and up */
@media (min-width: 768px) {
  .layout { flex-direction: row; }
  .sidebar { width: 280px; flex-shrink: 0; }
}

css

/* Base: mobile */
.layout { display: flex; flex-direction: column; }

/* Tablet and up */
@media (min-width: 768px) {
  .layout { flex-direction: row; }
  .sidebar { width: 280px; flex-shrink: 0; }
}

Progressive Enhancement

渐进增强

Layer	Purpose	Requirement
HTML	Content accessible and meaningful	Works without CSS or JS
CSS	Visual presentation and layout	Works without JS
JavaScript	Enhanced interactivity	Adds dynamic behavior

层级	用途	要求
HTML	内容可访问、有意义	无CSS或JS时仍可正常使用
CSS	视觉呈现和布局	无JS时仍可正常使用
JavaScript	增强交互能力	添加动态行为

Feature Detection

特性检测

javascript

// Check before using modern APIs
if ('IntersectionObserver' in window) {
  // Use lazy loading
} else {
  // Load all images immediately
}

if (CSS.supports('backdrop-filter', 'blur(10px)')) {
  element.classList.add('glass-effect');
}

javascript

// Check before using modern APIs
if ('IntersectionObserver' in window) {
  // Use lazy loading
} else {
  // Load all images immediately
}

if (CSS.supports('backdrop-filter', 'blur(10px)')) {
  element.classList.add('glass-effect');
}

State Management (No Framework)

状态管理（无框架）

Simple State Pattern

简单状态模式

javascript

function createStore(initialState) {
  let state = { ...initialState };
  const listeners = new Set();

  return {
    getState: () => ({ ...state }),
    setState(updates) {
      state = { ...state, ...updates };
      listeners.forEach(fn => fn(state));
    },
    subscribe(fn) {
      listeners.add(fn);
      return () => listeners.delete(fn);
    },
  };
}

javascript

function createStore(initialState) {
  let state = { ...initialState };
  const listeners = new Set();

  return {
    getState: () => ({ ...state }),
    setState(updates) {
      state = { ...state, ...updates };
      listeners.forEach(fn => fn(state));
    },
    subscribe(fn) {
      listeners.add(fn);
      return () => listeners.delete(fn);
    },
  };
}

URL-Based State (for shareable artifacts)

基于URL的状态（适用于可分享的产出物）

javascript

function syncStateWithURL(store) {
  const params = new URLSearchParams(location.search);
  for (const [key, value] of params) {
    store.setState({ [key]: JSON.parse(value) });
  }
  store.subscribe(state => {
    const params = new URLSearchParams();
    Object.entries(state).forEach(([k, v]) => params.set(k, JSON.stringify(v)));
    history.replaceState(null, '', `?${params}`);
  });
}

javascript

function syncStateWithURL(store) {
  const params = new URLSearchParams(location.search);
  for (const [key, value] of params) {
    store.setState({ [key]: JSON.parse(value) });
  }
  store.subscribe(state => {
    const params = new URLSearchParams();
    Object.entries(state).forEach(([k, v]) => params.set(k, JSON.stringify(v)));
    history.replaceState(null, '', `?${params}`);
  });
}

Export Formats

导出格式

Format	Use Case	Method
Single HTML file	Sharing, embedding	Self-contained `<style>` and `<script>`
HTML + assets	Complex artifacts	Separate CSS/JS files
Data URL	Inline embedding	`data:text/html;base64,...`
Screenshot/PNG	Documentation	`html2canvas` or browser screenshot
PDF	Print/report	`window.print()` with print styles

格式	使用场景	实现方式
单HTML文件	分享、嵌入	自包含 `<style>` 和 `<script>`
HTML + 资源文件	复杂产出物	分离CSS/JS文件
Data URL	内联嵌入	`data:text/html;base64,...`
截图/PNG	文档	`html2canvas` 或浏览器截图
PDF	打印/报告	搭配打印样式使用 `window.print()`

Quality Checklist

质量检查清单

Valid HTML5 (
```
<!DOCTYPE html>
```
,
```
lang
```
attribute)
Responsive viewport meta tag
Works without JavaScript (content visible)
Dark mode support (
```
prefers-color-scheme
```
)
Keyboard navigable
No console errors
File size under 100KB (excluding images)
Cross-browser tested (Chrome, Firefox, Safari)
Print styles if applicable
Semantic HTML elements used appropriately

合法的HTML5（包含
```
<!DOCTYPE html>
```
、
```
lang
```
属性）
包含响应式viewport元标签
无JavaScript时仍可正常运行（内容可见）
支持深色模式（
```
prefers-color-scheme
```
）
支持键盘导航
无控制台报错
文件大小低于100KB（不含图片）
跨浏览器测试通过（Chrome、Firefox、Safari）
如有需要提供打印样式
合理使用语义化HTML元素

Anti-Patterns / Common Mistakes

反模式/常见错误

Anti-Pattern	Why It Is Wrong	What to Do Instead
React/Vue/Angular in single-file artifact	Massive overhead for simple interactions	Use Alpine.js or vanilla JS
Heavy framework from CDN for simple UI	Slow load, wasted bandwidth	Match dependency weight to need
Inline styles instead of CSS custom properties	Cannot theme, cannot dark-mode	Use CSS custom properties (tokens)
No error handling on user input	Crashes on bad input	Validate and provide feedback
Fixed pixel dimensions	Breaks on mobile, tablets	Use responsive units (%, rem, vw)
Missing `<meta viewport>`	Mobile renders desktop-zoomed	Always include viewport meta tag
Blocking `<script>` in `<head>`	Delays page rendering	Use `defer` attribute or put at end of body
No IIFE wrapper for script	Global scope pollution	Wrap in `(function() { ... })()`
Hardcoded colors without tokens	Cannot switch themes	Use CSS custom properties

反模式	错误原因	替代方案
在单文件产出物中使用React/Vue/Angular	简单交互的开销过大	使用Alpine.js或Vanilla JS
为简单UI从CDN引入重型框架	加载慢、浪费带宽	依赖权重匹配需求
用内联样式代替CSS自定义属性	无法实现主题切换、无法适配深色模式	使用CSS自定义属性（设计令牌）
未对用户输入做错误处理	输入异常时会崩溃	做校验并给出反馈
固定像素尺寸	在手机、平板上显示异常	使用响应式单位（%、rem、vw）
缺少 `<meta viewport>` 标签	移动端会以桌面端缩放比例渲染	始终添加viewport元标签
在 `<head>` 中添加阻塞式 `<script>`	延迟页面渲染	使用 `defer` 属性或将脚本放在body末尾
脚本未做IIFE包裹	污染全局作用域	用 `(function() { ... })()` 包裹
硬编码颜色未使用设计令牌	无法切换主题	使用CSS自定义属性

Integration Points

集成点

Skill	Integration
`ui-ux-pro-max`	Style selection and UX guidelines
`ui-design-system`	Design tokens for consistent theming
`canvas-design`	Canvas/SVG visualizations within artifacts
`senior-frontend`	Complex component patterns
`mobile-design`	Mobile-responsive artifact design
`planning`	Artifact scope is defined during planning

技能	集成方式
`ui-ux-pro-max`	样式选择和UX规范
`ui-design-system`	提供设计令牌实现统一主题
`canvas-design`	产出物中的Canvas/SVG可视化
`senior-frontend`	复杂组件模式
`mobile-design`	产出物的移动端响应式设计
`planning`	产出物范围在规划阶段定义

Skill Type

技能类型

FLEXIBLE — Adapt the architecture, dependencies, and complexity to the artifact's requirements. Simple demos should remain as minimal as possible; complex tools may use lightweight frameworks and multiple CDN dependencies.

灵活适配 —— 根据产出物的需求调整架构、依赖和复杂度。简单演示要尽可能保持极简；复杂工具可以使用轻量框架和多个CDN依赖。