技能 ai-html-generate
🎨

ai-html-generate

安全 🌐 網路存取📁 檔案系統存取⚙️ 外部命令

Convert PDF Pages to Semantic HTML

Manually converting PDF pages to semantic HTML is time-consuming and error-prone. This skill uses AI to automatically generate semantic HTML5 from PDF pages with three sources of context for high accuracy.

支援: Claude Codex Code(CC)
📊 70 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「ai-html-generate」。 Convert Chapter 2, Page 16 to semantic HTML

預期結果:

  • Generates 04_page_16.html with semantic HTML5 structure
  • Includes page-container wrapper and page-content main element
  • Applies chapter-header with chapter-number and chapter-title
  • Creates section-navigation with nav-item elements
  • Uses proper heading hierarchy (h1 → h2 → h3 → h4)
  • Wraps bullet lists in ul.bullet-list with li.bullet-item
  • Logs generation metadata to 05_generation_metadata.json

安全審計

安全
v5 • 1/16/2026

This skill consists solely of documentation describing how to use AI for PDF-to-HTML conversion. SKILL.md is a markdown file containing prompts and instructions - not executable code. All 59 static findings are false positives: backticks are markdown code formatting, file paths are documentation examples, and there is no actual cryptographic code, shell execution, or file operations in this skill. The skill contains no network operations, no credential access, and no command execution capabilities.

2
已掃描檔案
713
分析行數
3
發現項
5
審計總數

風險因素

🌐 網路存取 (1)
skill-report.json:6
📁 檔案系統存取 (5)
skill-report.json:6 SKILL.md:175 SKILL.md:175 SKILL.md:352 SKILL.md:352
⚙️ 外部命令 (30)
SKILL.md:23 SKILL.md:24 SKILL.md:25 SKILL.md:52 SKILL.md:59 SKILL.md:66 SKILL.md:77-189 SKILL.md:189-199 SKILL.md:199-209 SKILL.md:209-213 SKILL.md:213-271 SKILL.md:271-280 SKILL.md:280-282 SKILL.md:282-306 SKILL.md:306-313 SKILL.md:313-316 SKILL.md:316-322 SKILL.md:322-332 SKILL.md:332-345 SKILL.md:345-391 SKILL.md:391-394 SKILL.md:394-396 SKILL.md:396-419 SKILL.md:419-464 SKILL.md:464-465 SKILL.md:465-466 SKILL.md:466 SKILL.md:466-467 SKILL.md:467-525 SKILL.md:525-529
審計者: claude 查看審計歷史 →

品質評分

38
架構
100
可維護性
83
內容
30
社群
100
安全
87
規範符合性

你能建構什麼

Document Accessibility

Convert textbook chapters to accessible HTML for screen readers and web display with proper semantic markup.

PDF Content Migration

Migrate PDF documentation to web-ready HTML with consistent class names and structured formatting.

Digital Publishing

Transform printed materials into digital formats with proper heading hierarchies and semantic elements.

試試這些提示

Basic Generation 
Convert the attached PDF page to semantic HTML5. Use the PNG image for layout, the JSON data for text accuracy, and the ASCII preview for structure.
With Coverage Check 
Generate HTML that includes every word from the source JSON. Do not add any bridging text or transitional phrases between pages.
Semantic Structure 
Create semantic HTML with proper heading hierarchy (h1 to h4), list structures, and CSS classes. Use classes like page-container, section-heading, paragraph, and bullet-list.
Multi-Modal Context 
Analyze the PNG image for visual layout, use the JSON for exact text content, and follow the ASCII preview for element relationships. Generate HTML5 that accurately recreates the page.

最佳實務

  • Run the verification script after each page generation to catch AI hallucination early
  • Use all three input sources (PNG, JSON, ASCII) for complete context
  • Check coverage percentage is between 99-100% before proceeding to the next page
  • Do not consolidate chapters until all individual pages pass the verification gate

避免

  • Skipping the text verification step and proceeding to consolidation
  • Accepting coverage above 100% which indicates the AI added invented content
  • Consolidating pages with any coverage below 95%
  • Allowing the AI to add bridging text between page boundaries

常見問題

Which AI models support this skill?
This skill works with Claude, Codex, and Claude Code. It requires vision capabilities for the PNG image input and text generation for the HTML output.
What happens if text coverage is below 95%?
Coverage below 95% indicates missing content. Regenerate the page and re-run verification. Never proceed with pages that fail the quality gate.
Can this skill process scanned PDFs without text layers?
No. This skill requires rich_extraction.json from a previous text extraction skill. Scanned images need OCR processing first.
Is my document data sent to external servers?
Document data is only sent to the configured AI API endpoint. No data is collected or stored by this skill itself. See your AI provider's privacy policy.
Why does the verification sometimes show over 100% coverage?
Coverage above 100% means the AI added words not present in the source. This is hallucination. Regenerate with stricter boundary instructions.
How is this skill different from other PDF converters?
This skill uses three sources of context (visual, textual, structural) instead of a single input. It applies semantic CSS classes and includes validation gates to prevent errors.

開發者詳情

作者

AbeJitsu

授權

MIT

儲存庫

https://github.com/AbeJitsu/Game-Settings-Panel/tree/main/.claude/skills/calypso/ai-html-generate

引用

main

檔案結構

📄 SKILL.md