four-step-design

Generate slide HTML from outlines and content via a four-step design workflow.

2|3|Updated Nov 9, 2025
One-click install
npx skills add https://github.com/genesis-agents/GenesisPod --skill four-step-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: four-step-design
Source: https://github.com/genesis-agents/GenesisPod/tree/main/backend/src/modules/ai-app/office/slides/skills/four-step-design
Command: npx skills add https://github.com/genesis-agents/GenesisPod --skill four-step-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation of production-ready slide HTML by applying a structured four-step design workflow, enabling designers to convert outlines and content into polished presentations with minimal manual coding.

Core Features & Use Cases

  • Four-step design workflow: Drafting, Refining Layout, Planning Visuals, and Formulating HTML to ensure consistent, high-density slides.
  • Input-driven generation: Uses inputs such as pageOutline, pageContent, globalStyles, sessionId, and images to tailor output.
  • Deterministic outputs for automation: Produces reproducible slide HTML suitable for pipelines and batch processing.
  • Use Cases: Convert meeting notes or outlines into ready-to-share HTML slides, or generate visual-ready decks from design briefs.

Quick Start

Generate production-ready slide HTML from the provided pageOutline and pageContent using the four-step design workflow.

Frequently Asked Questions about four-step-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a content outline into slide HTML automatically?

To convert a content outline into production-ready slide HTML, use a four-step design workflow that processes page outlines and content into presentation layouts. This deterministic method applies drafting, layout refining, visual planning, and HTML formulation to generate polished slides.

What is a four-step design workflow for generating presentation slides?

A four-step design workflow for presentation slides is a structured process involving Drafting, Refining Layout, Planning Visuals, and Formulating HTML. It ensures consistent, high-density slide generation by systematically turning design concepts into final HTML output.

Can I generate HTML slides from design briefs and meeting notes?

Yes, you can generate HTML slides from design briefs and meeting notes by feeding the text content and style preferences into an input-driven workflow. The system uses the provided page outline and content to produce ready-to-share presentation slides.

Does the slide HTML generation process support custom global styles and images?

Yes, the slide HTML generation process directly supports custom global styles and images. It accepts globalStyles and images as defined inputs alongside page content and session IDs to tailor the final presentation output to specific design requirements.

What is the best way to ensure reproducible HTML slides for automation pipelines?

The best way to ensure reproducible HTML slides for automation pipelines is to use a deterministic, input-driven generation process. By supplying consistent page outlines, content, and styles, the workflow produces identical slide HTML suitable for batch processing.

Are there limitations when generating high-density slide layouts from outlines?

When generating high-density slide layouts from outlines, limitations arise if the input content lacks structured formatting or if layout constraints are not defined. The deterministic workflow requires clear page outlines and content to properly formulate the HTML without manual coding adjustments.