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

blog-post

Generates a single-file HTML long-form article page with editorial layout and design-system typography.

Updated May 20, 2026
Search Tags:#typography#html#design system#article#prototype#blog#editorial layout
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill blog-post-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blog-post
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/blog-post
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill blog-post-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a long-form article or blog post page from scratch requires balancing typography, layout, and editorial structure. This Skill produces a complete, self-contained HTML article page — masthead, hero, body with pull quotes and figures, author byline, and related posts — following an active design system. ## Core Features & Use Cases - Editorial page generation: Produces a full article layout with masthead, headline, deck, byline, hero image placeholder, body sections, pull quotes, figures, author footer, and related-post cards. - Design-system driven: Reads the active DESIGN.md tokens for color, typography, and layout so the output matches the project's visual language. - Real content writing: Writes at least 600 words of actual article copy across 4–6 H2 sections — no lorem ipsum. - Use Case: A marketing team needs a case study page for a product launch; provide the brief and the Skill emits a ready-to-preview HTML artifact with data-od-id annotations. ## Quick Start Ask the assistant to write a blog post or case study page on your chosen topic using the blog-post skill with the active design system.

Frequently Asked Questions about blog-post

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

FAQPage Schema
How do I generate a blog post page from a design brief?▼

Provide a brief mentioning blog, article, essay, or case study, and the Skill reads the active DESIGN.md, writes at least 600 words of real copy, and emits one self-contained HTML document with inline CSS inside artifact tags.

What sections does the generated article page include?▼

The page includes a masthead with nav links, an article header with eyebrow, headline, deck and byline, a 16:9 hero placeholder, body prose with a pull quote, figure, list and blockquote, an author footer, and three related-post cards.

Does the blog post output use external images or assets?▼

No. Hero and figure images are placeholder blocks using design-system-tinted gradients or solid fills. All CSS is inline in a single HTML document, so the artifact renders without external resources.

Can the article layout adapt to different design systems?▼

Yes. The Skill reads the active DESIGN.md tokens for color, typography, and layout before writing. Drop caps are applied only for editorial or serif moods and skipped for tech-oriented design systems.

What are the limitations of the generated article page?▼

The output is a static single-page HTML prototype without CMS integration, routing, or real images. Article copy is generated from the brief, so factual accuracy of the written content should be reviewed before publication.

Related Skills

Explore More Design & Creative Skills→
moonzffmoonzff
1

design-md-authoring

Create and audit DESIGN.md visual design system files for AI-assisted UI generation.

Community
Intermediate
JeriCommerceJeriCommerce

Jeri - Webflow Guide Creator

Generate and format HTML support articles for the JeriCommerce Webflow CMS.

Official
Advanced
nmoralescybernmoralescyber

draft-content

Generate marketing content drafts across blog posts, social posts, newsletters, and more.

Community
Advanced
cdeistopenedcdeistopened
24

michael-lewis-style

Rewrite nonfiction prose to emulate Michael Lewis's narrative style.

Community
Intermediate