Reubencf/frontend-coding

---
license: mit
task_categories:
- text-generation
language:
- en
tags:
- code
- html
- css
- tailwind
- javascript
- frontend
- web-development
- chain-of-thought
- reasoning
size_categories:
- n<1K
pretty_name: Frontend Coding (HTML/Tailwind/JS) with Reasoning
---

# Frontend Coding Dataset

A small, hand-curated dataset of frontend web development prompts paired with
generated HTML / TailwindCSS / JavaScript code, plus optional chain-of-thought
reasoning. Covers landing pages, portfolios, dashboards, ecommerce, SaaS sites,
and iterative edits on existing code.

## Fields

| Field | Role | Meaning |
|-----------------|---------------|---------------------------------------------------------------|
| `prompt` | model input | User's request / design brief |
| `previous_code` | model input | Existing code the user provides for refinement (may be empty) |
| `reasoning` | model output | Plan / chain-of-thought the model produces (may be empty) |
| `code` | model output | Final HTML + Tailwind + JS response |

**Input to the model** = `prompt` + `previous_code`
**Output from the model** = `reasoning` + `code`

When `previous_code` is empty the row represents a fresh "build from scratch"
request. When it's populated, the row represents an iterative edit: the user
pasted their current HTML and asked for a specific change.

## Statistics

- **Total rows:** 87
- **Rows with reasoning:** 73 (83%)
- **Rows with previous_code (iterative edits):** 66 (75%)
- **Rows without reasoning:** 14 — earliest rows collected before reasoning capture was added

## Usage

```python
from datasets import load_dataset

ds = load_dataset("Reubencf/frontend-coding", split="train")
print(ds[0]["prompt"])
print(ds[0]["code"][:500])
```

### Filter to rows with reasoning

```python
ds_reasoning = ds.filter(lambda r: r["reasoning"])
```

### Format as SFT messages (example)

```python
def to_messages(row):
user_content = row["prompt"]
if row["previous_code"]:
user_content += f"\n\n<existing_code>\n{row['previous_code']}\n</existing_code>"
assistant_content = ""
if row["reasoning"]:
assistant_content += f"<think>\n{row['reasoning']}\n</think>\n\n"
assistant_content += row["code"]
return {
"messages": [
{"role": "user", "content": user_content},
{"role": "assistant", "content": assistant_content},
]
}

sft_ds = ds.map(to_messages)
```

## Notes

- All `code` outputs are single-file HTML with Tailwind (via CDN) and inline JS.
- Rows that had no generated code in the source sheet are dropped.
- In-cell line breaks from the source spreadsheet (`\r`) have been normalised to `\n`.

许可证：MIT
任务类别：
- 文本生成
语言：
- 英语
标签：
- 代码
- HTML
- CSS
- Tailwind
- JavaScript
- 前端
- Web开发
- 思维链（chain-of-thought）
- 推理
规模类别：
- 样本数少于1000
展示名称：带推理的前端编码（HTML/Tailwind/JS）

# 前端编码数据集

本数据集为小型人工精选数据集，包含前端Web开发提示词与生成的HTML、TailwindCSS、JavaScript代码，附带可选的思维链推理内容。覆盖着陆页、作品集、仪表盘、电商网站、SaaS站点，以及现有代码的迭代修改场景。

## 字段说明

| 字段名 | 角色 | 含义 |
|-----------------|---------------|---------------------------------------------------------------|
| `prompt` | 模型输入 | 用户请求/设计需求书 |
| `previous_code` | 模型输入 | 用户提供的用于细化修改的现有代码（可为空） |
| `reasoning` | 模型输出 | 模型生成的规划/思维链推理内容（可为空） |
| `code` | 模型输出 | 最终的HTML+Tailwind+JS代码结果 |

**模型输入** = `prompt` + `previous_code`
**模型输出** = `reasoning` + `code`

当`previous_code`为空时，该行代表全新的“从零构建”请求；当该字段已填充时，该行代表迭代修改场景：用户粘贴当前的HTML代码并提出特定修改需求。

## 统计信息

- **总样本数：87**
- **带推理内容的样本数：73（占比83%）**
- **含`previous_code`（迭代修改）的样本数：66（占比75%）**
- **无推理内容的样本数：14，均为添加推理内容采集机制前收集的早期样本**

## 使用方法

python
from datasets import load_dataset

ds = load_dataset("Reubencf/frontend-coding", split="train")
print(ds[0]["prompt"])
print(ds[0]["code"][:500])

### 筛选带推理内容的样本

python
ds_reasoning = ds.filter(lambda r: r["reasoning"])

### 格式化为监督微调（SFT）对话消息（示例）

python
def to_messages(row):
user_content = row["prompt"]
if row["previous_code"]:
user_content += f"

<existing_code>
{row['previous_code']}
</existing_code>"
assistant_content = ""
if row["reasoning"]:
assistant_content += f"<think>
{row['reasoning']}
</think>

"
assistant_content += row["code"]
return {
"messages": [
{"role": "user", "content": user_content},
{"role": "assistant", "content": assistant_content},
]
}

sft_ds = ds.map(to_messages)

## 注意事项

- 所有`code`字段的输出均为单文件HTML，通过CDN引入Tailwind并内嵌JavaScript代码。
- 源表格中未生成代码的行已被剔除。
- 源电子表格中单元格内的换行符（`
`）已统一转换为`
`。

搜集汇总

数据集介绍

构建方式

在网页前端开发领域，高质量代码生成数据集的构建往往依赖于精心设计的手工整理流程。Frontend Coding数据集通过人工筛选与标注，汇集了涵盖多种实际应用场景的前端开发任务，包括着陆页、作品集、仪表盘、电子商务及SaaS网站等。每个数据条目均包含用户需求描述（prompt）与对应的生成代码，部分条目还提供了现有代码（previous_code）以支持迭代编辑任务，同时数据集中融入了链式思考（chain-of-thought）推理过程，增强了模型生成代码的可解释性。

特点

该数据集的核心特点体现在其专注于现代前端技术栈，即HTML、TailwindCSS与JavaScript的集成应用，所有代码输出均为单文件形式，便于直接部署与测试。数据集中约75%的条目包含迭代编辑场景，模拟了真实开发中的代码优化与重构需求；同时，超过80%的条目附有链式思考推理文本，为研究代码生成的逻辑过程提供了宝贵资源。数据集规模虽小，但经过精心筛选，确保了每个样本的质量与代表性，适用于模型训练与评估。

使用方法

使用该数据集时，可通过Hugging Face的datasets库直接加载，并利用提供的过滤函数筛选包含推理文本的样本。数据集支持转换为监督微调（SFT）所需的消息格式，其中用户输入整合了需求描述与现有代码，助手输出则包含推理过程与最终代码。这种结构化设计便于研究人员构建端到端的前端代码生成模型，或用于评估模型在迭代编辑与多步推理任务上的表现，为网页开发自动化研究提供了实用基准。

背景与挑战

背景概述

随着人工智能在代码生成领域的深入应用，前端开发作为软件工程的重要组成部分，其自动化与智能化需求日益凸显。Frontend Coding数据集由研究人员Reubencf于近期创建，旨在探索大型语言模型在前端代码生成与迭代编辑任务中的能力。该数据集聚焦于HTML、TailwindCSS与JavaScript的协同编写，覆盖从零构建与现有代码迭代两大场景，并引入思维链推理以增强模型的可解释性。其核心研究问题在于如何使模型理解复杂的设计需求，并生成符合现代Web开发规范的功能性代码，为前端开发的智能化辅助工具提供了关键的评估基准。

当前挑战

该数据集致力于解决前端代码生成领域的核心挑战，即模型需准确理解自然语言描述的设计意图，并转化为结构正确、样式美观且交互功能完整的代码。具体挑战包括处理多技术栈（HTML、CSS、JavaScript）的融合、适应Tailwind等实用优先CSS框架的语法特性，以及支持基于现有代码的增量式编辑需求。在构建过程中，数据收集面临人工标注成本高、规模受限的困难，同时需确保代码示例的多样性与实用性，涵盖登录页、仪表盘等多种界面类型，并平衡思维链注释的完整性与数据一致性。

常用场景

经典使用场景

在网页前端开发领域，该数据集主要用于训练和评估代码生成模型，特别是针对从自然语言描述到HTML、TailwindCSS和JavaScript代码的转换任务。模型接收用户的设计需求或现有代码片段，通过链式思维推理生成相应的前端实现，涵盖从零构建和迭代修改两种典型场景，为自动化代码生成提供了标准化的测试基准。

实际应用

在实际的软件开发流程中，该数据集可用于构建智能代码助手工具，帮助开发者快速生成或修改登录页面、仪表盘、电子商务界面等常见前端组件。它支持原型设计加速和代码重构自动化，降低了前端开发的技术门槛，提升了开发效率，并为教育领域提供了学习前端编程的交互式示例资源。

衍生相关工作

围绕该数据集，研究者们开展了多项经典工作，包括基于链式思维的前端代码生成模型优化、多轮迭代代码编辑的上下文建模方法，以及将推理过程用于模型微调和提示工程的技术探索。这些工作进一步扩展了数据集的用途，促进了代码生成与程序合成领域在可解释性和实用性方面的进展。