skills.rest
desduvauchelle
desduvauchelleCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/desduvauchelle/penny-page --skill penny-build
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
patrick-falveypatrick-falvey

design-system

Generate design systems, wireframes, and landing pages from product requirements.

Community
Advanced
EmasoftEmasoft

amvcp-share-pages

Deploy a self-contained HTML page to Vercel and return a public live URL.

Community
Intermediate
alslimanyalslimany

tailwindcss-development

Write Tailwind v4 utility classes in Blade, JSX, and Vue templates.

Community
Intermediate
wukangcheng2944wukangcheng2944

frontend-design

Design frontend interfaces with consistent aesthetics for React, Vue, or HTML/CSS.

Community
Advanced