skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

open-design-landing

Generate a self-contained editorial landing page HTML from a typed inputs.json brand brief.

Updated May 20, 2026
Search Tags:#html generation#landing page#design system#astro#editorial design#marketing site#gpt-image-2
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill open-design-landing-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: open-design-landing
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/open-design-landing
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill open-design-landing-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tsx, and includes scripts (resource) and assets (resource) components.

What problem does it solve? Building a polished editorial marketing page from scratch requires coordinating copy, typography, layout, imagery, and motion; this Skill turns a single typed JSON brief into a complete, deployable landing page in the Atelier Zero design language. ## Core Features & Use Cases - Parameterized page composition: Fill one typed inputs.json (brand, hero, capabilities, labs, method, work, testimonial, CTA, footer) and run scripts/compose.ts to emit a self-contained HTML file with inlined CSS, scroll-reveal motion, and a Headroom-style sticky nav. - Three image strategies: Generate 16 surreal collage plates via gpt-image-2 (fal.ai or Azure), emit paper-textured SVG placeholders for zero-budget drafts, or drop in your own PNGs. - Optional Astro mirror: Fork the apps/landing-page/ static site for production deployment with visual parity to the standalone HTML. - Use Case: A founder needs a marketing page for a new indie app; they answer eight question groups, run the placeholder and compose scripts, and get a responsive editorial page with Roman-numeral sections in minutes. ## Quick Start Ask the agent to build an editorial landing page for your brand using the placeholder image strategy, providing your brand name, tagline, and key stats.

Frequently Asked Questions about open-design-landing

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

FAQPage Schema
How do I generate an editorial landing page from a JSON brief?▼

Fill a typed inputs.json matching schema.ts with your brand, hero, capabilities, and footer content, then run npx tsx scripts/compose.ts inputs.json out/index.html. The composer inlines the Atelier Zero stylesheet and writes one self-contained HTML file.

What image options exist for landing page collage assets?▼

Three strategies are supported: generate calls gpt-image-2 via fal.ai or Azure for 16 collage plates, placeholder writes paper-textured SVG frames at zero cost, and bring-your-own uses PNGs you drop at the configured assets_path.

Can I deploy the generated landing page to production?▼

Yes. The standalone HTML output can be hosted directly, or you can fork the apps/landing-page Astro package, align its content with your inputs.json, and build a static export for any CDN.

Does the landing page work without an image generation API key?▼

Yes. The placeholder strategy renders the full layout with paper-textured SVG frames without any API key. Without FAL_KEY, the imagegen script also prints prompts so you can route them through another image tool manually.

Why does scroll-reveal animation not play on the generated page?▼

The composer relies on data-reveal attributes plus an inline IntersectionObserver script; removing those attributes disables the motion. Also check that prefers-reduced-motion is not enabled, since the page intentionally suppresses transitions under that setting.

Related Skills

Explore More Design & Creative Skills→
MorganDevInSAMorganDevInSA

ironmind-visual-persona

Codify IRONMIND brand guidelines for colors, typography, and logo usage.

Community
Advanced
JP-CanoJP-Cano

astro

Create Astro components, configure static site generation, and manage content collections.

Official
Intermediate
Maccio-huangMaccio-huang

open-design-landing-deck

Generate horizontal swipe deck presentations using the Atelier Zero design language.

Community
Intermediate
shiftreposhiftrepo

popular-web-designs

Generate HTML/CSS from 54 design-system templates with color tokens and typography rules.

Official
Intermediate