A Craft Agent skill that generates beautiful HTML artifacts with magazine-grade design instead of plain Markdown.
Core philosophy from @trq212: The Unreasonable Effectiveness of HTML Design system shared with guizang-ppt-skill
When you need to communicate complex information — comparisons, reports, architecture diagrams, code reviews — this skill generates polished, interactive HTML pages instead of flat Markdown.
Design DNA:
- 3-tier font system: Serif headings + Sans-serif body + Monospace metadata
- 5 curated color themes (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune)
- WebGL fluid backgrounds with low opacity
- Lucide linear icons (no emoji)
- Motion One entrance animations
| Scenario | Why HTML is Better |
|---|---|
| Option comparison (A vs B vs C) | Card grid — compare at a glance |
| Code review / PR description | Rendered diff + severity colors |
| Architecture / data flow | SVG vector diagrams, 10x clearer |
| Weekly report / analysis | KPI panels + tables + charts |
| Design prototype / parameter tuning | Sliders + live preview + copy buttons |
| Long documents (>100 lines) | Tab navigation, TOC |
| Drag-and-drop / sorting | Interactive HTML capabilities |
| Config editors | Forms + dependency check + export |
| # | Theme | Ink Color | Paper Color | Best For |
|---|---|---|---|---|
| 1 | Ink Classic | #0a0a0b |
#f1efea |
General purpose |
| 2 | Indigo Porcelain | #0a1f3d |
#f1f3f5 |
Tech / AI |
| 3 | Forest Ink | #1a2e1f |
#f5f1e8 |
Nature / Culture |
| 4 | Kraft Paper | #2a1e13 |
#eedfc7 |
Humanities / Literature |
| 5 | Dune | #1f1a14 |
#f0e6d2 |
Art / Design / Creative |
- Install Craft Agent
- Copy this skill to your workspace skills folder
- Ask Craft Agent to generate an HTML report — it will automatically use this skill
MIT