The Site Generation Skills: /site and /deck

/site: the full pipeline in one command

/site has no logic of its own — it is a sequencing wrapper that calls extract_design_system() then passes the result directly to generate_page(), storing the intermediate design system markdown to disk only if an explicit output path is given for it. The task parser determines which mode to use based on the presence of a URL and a from clause:

# Full pipeline: extract design from URL + generate page from content
python agent.py "/site https://nickmccarty.me from ~/Desktop/papers/ save to index.html"

# With visual refinement after generation
python agent.py "/site https://stripe.com from ~/Desktop/content/ save to site/index.html --refine 2"

The --refine N flag propagates through to generate_page() and the original site screenshots captured during /design are passed as the reference for the refinement loop — the generated page is compared directly to the source site, not to an abstract description of it.

Use /site when you want the full result in one invocation and don't need to inspect or modify the intermediate design system. Use /design + /build-page separately when you want to review and edit the design system before applying it, or when you're generating multiple pages from the same design source.

/deck: themed slide generation

# From a URL design source + content folder
python agent.py '/deck --design https://notion.so --content ~/Desktop/notes/ --out slides.pptx --title "Q2 Review"'

# From an existing design system markdown + PDF content
python agent.py "/deck --design stripe-design.md --content report.pdf --out deck.pptx"

# Bare syntax also works
python agent.py "/deck design https://vercel.com content ~/research/ save to deck.pptx"

The design source can be a URL (triggers /design extraction) or a path to an existing .md design system file. The content source accepts a folder of markdown files, a URL (fetched and converted), or a PDF (local or remote). This means the same design system you extracted for a web page can be reused for a slide deck without a second Playwright run.

Design token parsing

The deck builder does not pass the design system markdown directly to the LLM for each slide — it parses the document into a DesignTheme dataclass first. The parser extracts hex color codes (background, text, accent, secondary), font family names, base font size, and spacing values from the structured sections of the design system. These become the slide background color, text color, accent bar color, font face, and margin calculations applied by python-pptx directly.

This approach is more reliable than prompting the LLM to apply a design system to slide markup: python-pptx sets exact RGB values and point sizes, so the deck always matches the extracted tokens exactly rather than approximately. The LLM is only involved in structuring the content (title, bullets, speaker notes) for each slide.

Slide structure

The builder generates a 16:9 widescreen deck (13.33 × 7.5 inches). Each slide consists of:

• A solid background fill using the extracted background color
• A narrow accent bar on the left edge using the accent color
• A slide title in the heading font at the heading size
• Up to 6 bullet points in the body font, truncated if the content has more
• A subtle footer with the deck title and slide number

The title slide uses the deck --title argument (or the first heading found in the content) and the site subtitle from the design system's Overview section. Every subsequent slide maps to one content file or one logical section of a longer document.