penny-build

Generate a self-contained index.html from design specs, branding config, and copy.

Updated Jun 6, 2026

Search Tags:#landing page #responsive design #Tailwind CSS #design automation #HTML building

Ready to run

npx skills add https://github.com/desduvauchelle/penny-page --skill penny-build

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: penny-build
Source: https://github.com/desduvauchelle/penny-page/tree/main/skills/penny-build
Command: npx skills add https://github.com/desduvauchelle/penny-page --skill penny-build

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the final stage of building a responsive landing page, combining design specifications and approved copy into a fully functional, self-contained index.html.

Core Features & Use Cases

Design Implementation: Transforms landing-page-design.md into an index.html file that follows the provided design.
Dynamic Content Inclusion: Includes content from branding-config.json and landing-page-copy.md within the page structure.
No Build Step: Delivers the final HTML without any server-side processing.
Quality Assurance: Checks the page against a comprehensive set of rules outlined in reference/landing-page-rules.md.

Quick Start

Use the penny build skill to create the landing page for a new product.

Frequently Asked Questions about penny-build

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

FAQPage Schema

How do I generate a responsive landing page from markdown design specs?▼

Generating a responsive landing page from markdown design specs involves combining landing-page-design.md, branding-config.json, and copy files into a self-contained, openable index.html using Tailwind CSS.

Can I build an HTML page with Tailwind CSS without a build step?▼

Yes, you can build an HTML page with Tailwind CSS without a build step by applying the framework via CDN. This produces a self-contained index.html file that requires no server-side processing.

What files do I need to prepare for automated landing page generation?▼

For automated landing page generation, you need to prepare a design specification file, a branding configuration JSON file, and a markdown copy file. These inputs structure the final HTML page.

Does responsive mobile-first design work with Tailwind CSS CDN?▼

Responsive mobile-first design works with Tailwind CSS CDN by applying progressive enhancement styles directly within the generated HTML file. This ensures proper rendering across viewport sizes.

How are quality rules applied during HTML page generation?▼

Quality rules are applied during HTML page generation by checking the final structure against a bundled reference document. This ensures the output meets predefined design and code standards.

What is the best way to combine branding JSON and copy markdown into a single HTML file?▼

The best way to combine branding JSON and copy markdown into a single HTML file is using design automation. This parses the inputs and injects the content directly into the structured page template.