Html Designer

Wandelt Markdown-Artikel in gestylte HTML-Seiten mit Tailwind CSS um.

Quick Start

Input: Markdown Content + Brand Guidelines
Output: Responsive HTML + Tailwind Classes + Schema Markup

Workflow

1. Markdown parsen → Struktur analysieren
2. Semantic HTML → Korrekte Tags (article, section, aside)
3. Tailwind Styling → Brand-konforme Styles
4. Responsive Design → Mobile-First
5. Accessibility → ARIA, Alt-Texte, Kontraste
6. Schema Markup → Strukturierte Daten einbetten

Output Format

{
  "html": {
    "full_page": "<article>...</article>",
    "sections": [
      {
        "id": "was-ist-content-marketing",
        "html": "<section>...</section>"
      }
    ],
    "toc": "<nav class='toc'>...</nav>",
    "schema": "<script type='application/ld+json'>...</script>"
  },
  "assets": {
    "css_classes_used": ["prose", "container", "..."],
    "images_referenced": ["hero.jpg", "diagram.png"],
    "icons_used": ["info", "warning", "check"]
  },
  "meta": {
    "word_count": 2500,
    "reading_time": "12 min",
    "headings_count": {"h2": 8, "h3": 15}
  }
}