How to Turn Any Text into a Beautiful Web Article with an AI‑Powered Harness

Overview

The Beautiful Article Skill transforms any plain‑text material into a visually structured HTML article without requiring a designer. It reuses the Harness architecture proven in the video Skill and adds a semantic component protocol (Reacticle) to keep output stable.

Motivation

HTML provides higher information density, precise visual hierarchy, interactivity, and easy sharing compared with Markdown. However, letting an AI generate raw HTML/CSS for long, rich content leads to monolithic files, uncontrolled output, and a loss of the "article" feel.

Skill Architecture

Execution Flow (8 Phases)

Phase 0  Intake                Decide whether to enter the Skill + initial article type
   ▼
Phase 1  Source → Markdown URL/PDF/DOCX/MD/text → source.md + extraction-notes.md
   ▼
Phase 2  Editorial Planning → plan.md (Brief / Outline / Theme / Assets)
   ▼
Phase 3  Plan Checkpoint       ★Checkpoint 1 (must stop)
   ▼
Phase 4  First Spread          Hero + Lead + first visual block
        └ ★Checkpoint 2 (must stop)
   ▼
Phase 5  Full Article Build    Generate complete web article
   ▼
Phase 6  Final Review          Three‑view final audit
   ▼
Phase 7  Repair                Minimal‑slice fixes
   ▼
Phase 8  Delivery              ★Checkpoint 3 → deliver article.html

Reacticle Protocol

Reacticle (React + Article) defines a set of semantic components that replace low‑level HTML tags. The AI only decides how to combine these components; the library enforces layout, spacing, and theming.

Article / Hero / Lead / Section / Subsection / Table / Quote / Formula / CodeBlock / Image / TOC / Conclusion …

A Raw escape hatch allows arbitrary HTML/SVG/CSS/React, but all styles must consume the predefined theme tokens, preserving visual consistency.

Design Pillars

Semantic component vocabulary replaces Markdown syntax with Reacticle components.

Theme token system provides a CSS token pack (colors, fonts, spacing, shadows, etc.) and a Markdown guide that tells the AI which visual style to apply.

Dual output each theme supplies both a token pack and a Markdown guide (e.g., the Tufte theme enforces a high data‑ink ratio, no gradients, minimal charts).

Environment Setup

Claude Code

curl -fsSL https://claude.ai/install.sh | bash

claude -v

Verifies installation of the core execution Agent.

MiniMax M3

The latest MiniMax M3 model offers 1 M context, native multimodal support, and improved long‑context understanding compared with previous models, making it suitable for multi‑step, checkpoint‑driven workflows.

CC Switch

CC Switch is a desktop tool for switching the Agent between Claude Code, Codex, Gemini CLI, etc. Download the release from https://github.com/farion1231/cc-switch/releases/ and configure the MiniMax token plan and model name MiniMax-M3.

Install the Skill

Clone the repository https://github.com/ConardLi/garden-skills, copy the beautiful-article directory into .claude/skills/, start Claude Code and invoke /beautiful-article to confirm registration.

Hands‑On Example: Turning a Claude Blog Post into a Beautiful Article

Start Claude Code

claude --dangerously-skip-permissions

The flag is used only in trusted directories.

Phase 0‑1: Feed Material

Read this article: https://claude.com/blog/lessons-from-building-claude-code-prompt-caching-is-everything
Generate a beautiful Chinese article according to /beautiful-article.

The Agent creates: source.md – raw Markdown version of the source material. source.zh.md – Chinese translation used as the factual base for subsequent steps. extraction-notes.md – records missing assets, ambiguities, and extraction risks.

Phase 2: Editorial Planning

The Agent produces plan/plan.md with four sections:

Brief : target audience, article type, information‑retention ratio, tone, main points, reading goal.

Outline : Hero, Lead, list of Sections, required Raw/Table/CodeBlock per Section.

Theme : recommended theme and rationale.

Assets : image strategy and per‑image plan.

This file becomes the file‑based work memory for later phases.

Phase 3: Plan Checkpoint

The Agent asks five explicit questions (e.g., article type, retention ratio, visual tone) and proceeds only after the user confirms each answer.

Phase 4: First Spread

The Agent scaffolds a Vite + React + TS workspace, installs the latest Reacticle, and builds the Hero, Lead, first Section, and a representative visual block. A dedicated First Spread Reviewer SubAgent audits the output and writes first-spread-review.md. Detected issues are fixed before moving on.

Phase 5: Checkpoint 2

The user confirms the visual tone and selects a development mode:

A – single‑Agent sequential (most stable, uniform style).

B – multi‑Agent parallel (fastest, leverages model capacity).

Phase 5‑7: Full Build and Repair

In parallel mode, multiple SubAgents each write an individual section file and any required raw-block files. The main Agent assembles them, ensuring no two agents edit the same file. After each Section is written, three reviewers produce separate review files:

Editorial Reviewer : article structure, information selection.

Visual Reviewer : theme adherence, Raw usage, image placement, mobile layout.

Technical Reviewer : build success, code/formula rendering, accessibility.

Any failures trigger the minimal‑slice Repair step, which fixes only the problematic part without disturbing already correct sections.

Phase 8: Final Review & Delivery

The final reviewer checks content, visual consistency, and technical correctness (build, single‑file HTML). After all issues are resolved, the Harness exports a fully inlined article.html (offline‑readable) and a matching PDF.

Harness Transferability

The same six core parts appear in both the video and article Skills, demonstrating that a well‑engineered Harness can be migrated across domains.

Context Management

Only the files needed for the current phase are loaded (e.g., source.md for Phase 1, plan.md for Phase 2, component policies for Phase 4+). This progressive loading prevents the model’s attention from being diluted.

Tool System

The Skill leverages the Agent’s built‑in abilities: web fetch, file read/write, script execution, local build, and browser preview. All inputs are normalized to source.md, and extraction risks are recorded in extraction-notes.md.

Execution Orchestration

The pipeline mirrors the video Skill’s skeleton: split a complex task into linear phases, enforce mandatory checkpoints, and optionally run phases in parallel for speed.

State & Memory

Key decisions are persisted in files ( source.md, plan.md, etc.), allowing later phases to read back the exact context without relying on short‑term memory.

Evaluation & Observation

Each deliverable (source, plan, first spread, each Section, final review) has a dedicated quality‑check focus, ensuring information density, theme adherence, visual integrity, and technical correctness.

Constraints & Recovery

Reacticle’s component contract constrains the AI’s output; the Raw escape hatch provides flexibility while still consuming the predefined theme tokens. Errors are fixed via minimal‑slice repairs, preserving already correct parts.

Self‑Evolution

All review and repair logs (e.g., review/first-spread-review.md, review/final-review.md, review/repair-log.md) are stored locally and fed back to the Agent in future runs, enabling the Skill to learn which steps frequently fail and adjust defaults accordingly.

Key Takeaways

Break complex tasks into staged phases.

Convert critical decisions into explicit checkpoints.

Persist context in files for reliable state.

Encapsulate output format in a semantic contract.

Delegate quality concerns to dedicated reviewers.

Limit fixes to minimal slices.

Loop review logs back into the Skill for continuous improvement.

Resources

Reacticle: https://github.com/ConardLi/reacticle

Beautiful Article Skill: https://github.com/ConardLi/garden-skills

Showcase / Gallery: https://rearticle.mmh1.top/#/gallery

CC Switch: https://github.com/farion1231/cc-switch/releases/

MiniMax token plan: https://platform.minimaxi.com/subscribe/token-plan

Claude Code: https://claude.com/product/claude-code