원클릭으로 Manus에서 모든 스킬 실행

blog-post

A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".

Manus에서 실행

스타66,163

포크7,420

업데이트2026년 6월 16일 14:39

출처

nexu-io

nexu-io/open-design

GitHub 저장소 열기 Creator 저장소 보기

설치 명령

다운로드

Manus에서 실행

유용한 대상SOC

작가·저자예술, 디자인, 엔터테인먼트, 스포츠, 미디어직27-3043L4

파일 탐색기

3 개 파일

SKILL.md

readonly

name	blog-post
description	A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
triggers	["blog","blog post","article","essay","case study","newsletter","博客","文章"]
od	{"mode":"prototype","platform":"desktop","scenario":"marketing","featured":11,"preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"craft":{"requires":["typography","typography-hierarchy","typography-hierarchy-editorial","rtl-and-bidi"]}}

Blog Post Skill

Produce a single long-form article page — editorial layout, no chrome.

Workflow

Read the active DESIGN.md (injected above). Lean into the typography tokens — long-form is 70% type, 20% image, 10% chrome.
Pick the topic from the brief and write a real article — at least 600 words across 4–6 H2 sections. No lorem ipsum.
Sections, in order:
- Masthead — small wordmark + 4–6 nav links, plain.
- Article header — category eyebrow, headline (display token, large), deck (1–2 sentence subhead), author name + role + date.
- Hero image — a 16:9 placeholder block using a DS-tinted gradient or solid fill (no external images). Add a 1-line caption underneath.
- Body — alternating prose paragraphs with at least:
  - 1 pull quote (large display type, accent rule on the inline-start edge so the layout flips correctly under dir="rtl").
  - 1 figure (image placeholder + caption).
  - 1 list (numbered or bulleted).
  - 1 inline blockquote.
- Author footer — author avatar (initials in a circle), bio paragraph.
- Related — 3 cards linking to other posts. Each card: tiny image block, title, 1-line excerpt, date.
Write a single HTML document:
- <!doctype html> through </html>, CSS inline.
- Article body uses the DS body font, centered, max-width per DS layout rule (typically 680–720px).
- Drop caps (first-letter) only if the DS mood is editorial / serif — skip on tech-y DSes.
- data-od-id on the headline, hero, body, pull quote, related grid.
Self-check:
- Type hierarchy is unambiguous — H1 is clearly the headline; H2s are section dividers; pull quotes do not compete with H1.
- Line length 60–75 chars for body prose.
- Accent appears at most twice (eyebrow + pull-quote rule, or one link).
- The page reads like a magazine, not a marketing landing.

Output contract

Emit between <artifact> tags:

<artifact identifier="post-slug" type="text/html" title="Article Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

이 저장소의 다른 Skills

같은 저장소

social-media-matrix-tracker-template

nexu-io/open-design

社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。 Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light theme switching in a single HTML artifact.

2026-06-1766.2k

audio-jingle

nexu-io/open-design

Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.

2026-06-1666.2k

clinical-case-report

nexu-io/open-design

Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".

2026-06-1666.2k

critique

nexu-io/open-design

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".

2026-06-1666.2k

dashboard

nexu-io/open-design

Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.

2026-06-1666.2k

dating-web

nexu-io/open-design

A consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography, restrained accent. Use when the brief asks for a "dating site", "matchmaking", "community dashboard", "social network dashboard", or any consumer product where the data is the story.

2026-06-1666.2k

Blog Post Skill

Produce a single long-form article page — editorial layout, no chrome.

Workflow

Read the active DESIGN.md (injected above). Lean into the typography tokens — long-form is 70% type, 20% image, 10% chrome.

Pick the topic from the brief and write a real article — at least 600 words across 4–6 H2 sections. No lorem ipsum.

Sections, in order:

Masthead — small wordmark + 4–6 nav links, plain.
Article header — category eyebrow, headline (display token, large), deck (1–2 sentence subhead), author name + role + date.
Hero image — a 16:9 placeholder block using a DS-tinted gradient or solid fill (no external images). Add a 1-line caption underneath.
Body — alternating prose paragraphs with at least:
- 1 pull quote (large display type, accent rule on the inline-start edge so the layout flips correctly under dir="rtl").
- 1 figure (image placeholder + caption).
- 1 list (numbered or bulleted).
- 1 inline blockquote.
Author footer — author avatar (initials in a circle), bio paragraph.
Related — 3 cards linking to other posts. Each card: tiny image block, title, 1-line excerpt, date.

Write a single HTML document:

<!doctype html> through </html>, CSS inline.
Article body uses the DS body font, centered, max-width per DS layout rule (typically 680–720px).
Drop caps (first-letter) only if the DS mood is editorial / serif — skip on tech-y DSes.
data-od-id on the headline, hero, body, pull quote, related grid.

Self-check:

Type hierarchy is unambiguous — H1 is clearly the headline; H2s are section dividers; pull quotes do not compete with H1.
Line length 60–75 chars for body prose.
Accent appears at most twice (eyebrow + pull-quote rule, or one link).
The page reads like a magazine, not a marketing landing.

Output contract

Emit between <artifact> tags:

<artifact identifier="post-slug" type="text/html" title="Article Title"> <!doctype html> <html>...</html> </artifact>

One sentence before the artifact, nothing after.