CoolFace
Datasetpublic

kogai/full-html-stying-dataset-style-planning-dataset

HTML Styling Plan Dataset kogai/full-html-stying-dataset-style-planning-dataset contains style_planning_dataset.jsonl, a JSONL dataset with 46374 synthetic examples. Structured style-planning records that pair source HTML and style requests with a generated styling plan. Schema created_at: field present in the JSONL records. input_html: source HTML before Tailwind classes are added. input_style: user-facing styling request or directive. model: field present in… See the full description on the dataset page: https://huggingface.co/datasets/kogai/full-html-stying-dataset-style-planning-dataset.

sourceHugging Facemitupdated 2mo agoView on Hugging Face
0likes12downloads
Dataset Card

HTML Styling Plan Dataset

kogai/full-html-stying-dataset-style-planning-dataset contains style_planning_dataset.jsonl, a JSONL dataset with 46374 synthetic examples. Structured style-planning records that pair source HTML and style requests with a generated styling plan.

Schema

  • —created_at: field present in the JSONL records.
  • —input_html: source HTML before Tailwind classes are added.
  • —input_style: user-facing styling request or directive.
  • —model: field present in the JSONL records.
  • —prompt: prompt text used to request the structured style plan or generated CSS.
  • —row_index: original row index carried through the pipeline.
  • —source_name: identifier for the HTML source template used in the sample.
  • —style_plan: structured styling plan describing theme, layout, components, and implementation guidance.

Intended use

Each row pairs compact source HTML and a user style request with a structured style_plan object. The dataset is suitable for training or evaluating models that draft explicit styling plans before CSS generation.

Sample record

  • —created_at: "2026-06-16T21:44:37.965959+00:00"
  • —input_html: "<!doctype html><html lang=en><head><meta charset=utf-8><meta name=viewport content=\"width=device-width,initial-scale=1\"><meta name=description content=\"Orbit CRM Landing compact raw html\"><meta name=author conten...
  • —input_style: "mobile first responsive layout"
  • —model: "gpt-5.4-mini"
  • —prompt: "You are a UI style-planning agent.\n\nAnalyze the provided HTML and the user style phrase, then produce a compact structured style plan as valid JSON. The style plan will be used by another agent to visually transfor...
  • —row_index: 0
  • —source_name: "01marketinglanding"
  • —style_plan: {"theme": "Clean mobile-first CRM landing page with a calm SaaS feel and compact responsive structure.", "summary": "Prioritize stacked content, clear hierarchy, and touch-friendly spacing on small screens, then expan...

Notes

  • —Source file: /home/osayed/landing-pages-html-styling-dataset-gen/styles/styles_plans/style_planning_dataset.jsonl
  • —Split pushed by this script: train
  • —Request field emphasis: input style