LLM-HTML 生成
LLM-HTML 生成研究”如何让 LLM 稳定产出生产级完整 HTML/前端页面”。核心洞察：Tailwind CSS / shadcn 已成为 LLM 的”母语”——训练语料中大量存在，固定技术栈能最大化利用训练分布、显著提升产出稳定性。本页综合本批次来源，覆盖方法论、评测与可执行 skill。
生成方法论
- 固定技术栈：
HTML5 + 内联 <style> + Tailwind CSS v4 (CDN) + 内联 <script>；白名单 CDN（lucide/chart.js/aos/占位图），禁止外部 CSS/localStorage/表单提交。 - 按复杂度分档：
- 简单 → Zero-shot + 技术栈约束
- 中等 → SCoT（Structured Chain-of-Thought：先输出结构/布局规划再生成）
- 复杂 → 大纲优先 + 分块生成
- 约束解码兜底：structured outputs / JSON mode / Outlines 保证格式合法。
- 强制输出规范：DOCTYPE 开头、无 markdown 围栏、meta charset/viewport 必备、alt/aria-label、mobile-first（360–1920px 无横向滚动）、中文
lang="zh-CN"。
评测基准与质检工具链
评测基准三件套（研究报告）：
| 基准 | 类型 |
|---|---|
| ArtifactsBench | 客观可执行（GPT-5 居首，72.55） |
| WebDev Arena | 主观人类偏好（Claude 居首） |
| Design2Code | 设计稿还原 |
质检工具链分层：html-validate（语法）→ axe-core（无障碍，约覆盖 WCAG 57%）→ Lighthouse（性能/SEO）→ Playwright VRT（视觉回归）→ MLLM-as-Judge（主观美学）。
可执行 Skill 封装
llm-html-gen.skill 是上述方法论的可执行 skill 封装（SKILL.md + references/quality-tools.md + model-comparison.md），体现”研究报告 → 最佳实践 → 可执行 skill”的知识沉淀链。详见 Agent-Skills。
本批次的 HTML 生成实例
本批次多份来源本身就是高质量 LLM-HTML 产出样本：
- Agent 评测交互式报告：单文件、内联 CSS/JS、可搜索/排序表格、IntersectionObserver 导航。
- 估值沙盘：交互式滑块、实时回推、Google Fonts + 内联脚本。
两者均符合”单文件、可离线、mobile-first”的最佳实践规范。
矛盾或新想法
⚠️ 矛盾 [2026-07-25] 模型排名的主观/客观分裂：Claude 在 WebDev Arena（人类主观偏好）第一，但 GPT-5 在 ArtifactsBench（客观）以 72.55 居首；且 MLLM-as-Judge 可能系统性偏好 Gemini 风格。“哪个模型最会写前端”取决于评测口径——与 LLM 评估 的”主观/客观系统性分歧”同源。
⚠️ 矛盾 [2026-07-25] axe-core 对 WCAG 的覆盖率约 57%，“自动无障碍检测通过”≠“真正无障碍”；自动质检通过仍需人工/真实辅助技术验证。