关于 blog-post
blog-post 是用于制作长篇编辑风格文章页的设计技能，输出单个 HTML 文档。它规定文章结构、版式和排版检查，适合需要完整文章页面的设计任务。
主要功能
- 01单页长篇文章版式
- 02结构化编辑内容与元数据
- 03内联 CSS 与设计令牌样式
- 04占位主图和插图
- 05排版层级与页面自检
适用场景
- 01制作杂志风格文章页
- 02将简报转为完整文章版式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/blog-post确认已加载。
附带文件example.htmlREADME.md
详细介绍
博客文章技能
制作一个单页长篇文章页面——采用编辑式布局，不含浏览器界面元素。
工作流
- 阅读当前生效的 DESIGN.md（已在上方注入）。突出运用排版令牌——长篇内容由 70% 排版、20% 图片、10% 界面元素构成。
- 从任务简述中选择主题，撰写真实文章——至少 600 个词，分为 4–6 个 H2 章节。不要使用占位文本。
- 章节按以下顺序排列：
- 刊头——简洁的文字标识 + 4–6 个导航链接。
- 文章头部——分类眉题、标题（使用较大的展示字体令牌）、导语（1–2 句副标题）、作者姓名 + 职务 + 日期。
- 主图——使用 DS 着色渐变或纯色填充的 16:9 占位块（不要使用外部图片）。下方添加一行说明文字。
- 正文——交替编排段落，并至少包含：
- 1 段引文（使用较大的展示字体，左侧加重点缀线）。
- 1 个图示（图片占位图 + 说明文字）。
- 1 个列表（编号或项目符号）。
- 1 段行内引用。
- 作者页脚——作者头像（圆形中的姓名首字母）、简介段落。
- 相关文章——3 张链接至其他文章的卡片。每张卡片包含：小型图片块、标题、一行摘要、日期。
- 编写单个 HTML 文档：
- 从
<!doctype html>到</html>，CSS 内联。 - 文章正文使用 DS 正文字体，居中显示，最大宽度遵循 DS 布局规则（通常为 680–720px）。
- 仅当 DS 风格偏编辑式或衬线风格时，才使用首字下沉（
first-letter）；科技感较强的 DS 则跳过。 - 在标题、主图、正文、引文、相关文章网格上设置
data-od-id。
- 从
- 自检：
- 排版层级清晰明确——H1 是醒目的文章标题；H2 用作章节分隔；引文不会与 H1 争夺视觉焦点。
- 正文每行长度为 60–75 个字符。
- 强调色最多出现两次（眉题 + 引文装饰线，或一个链接）。
- 页面应有杂志风格，而不是营销落地页。
输出规范
在 <artifact> 标签之间输出：
<artifact identifier="post-slug" type="text/html" title="Article Title">
<!doctype html>
<html>...</html>
</artifact>
在 artifact 前写一句话，后面不要写任何内容。
评论
支持 Markdown