Editorial Page Skill — Design skill for Claude Code

Editorial Page Skill · Design System Collection

[](https://mistyhuqwq-art.github.io/editorial-page-skill/) [](./LICENSE) [](https://mistyhuqwq-art.github.io/editorial-page-skill/)

AI 可读的设计系统合集 —— 一层通用排版原则 + 多种视觉风味。 给任何 AI 工具(Claude Code / Cursor / v0 / Copilot / Lovable)生成视觉一致的单页 HTML。

**🎨 [在浏览器里看 6 种风味对比 →](https://mistyhuqwq-art.github.io/editorial-page-skill/)**

---

两层架构

PRINCIPLES.md           ← 通用排版原则(6 条,所有风格都要遵守)
│
├── warm-editorial/     ← 风味 1: 暖色编辑杂志风 (米色 + 砖红 + 衬线)
│   ├── DESIGN.md
│   ├── template.html
│   └── example.html
│
└── [更多风格陆续加入]

为什么分两层

AI 生成的页面之所以"有 AI 味儿",**真正原因不在视觉层,在排版语法层** —— 结构可预测、信息密度均一、没有作者痕迹。

`PRINCIPLES.md` 抽出了这 6 条**跨风格通用的底层原则**。 每种风格的 `DESIGN.md` 只讲该风格自己的**视觉选择**(颜色、字体、装饰偏好)。

**风味可以变化,原则不能。** 一个用青紫渐变的页面可以气质高级(如果排版节制),一个用米色衬线的页面也可以 AI 味儿满满(如果结构模板化)。

---

怎么用

Claude Code 用户

# 解压 skill 包到 ~/.claude/skills/
tar -xzf editorial-page-skill.tar.gz -C ~/.claude/skills/

# 然后在 Claude Code 里自然语言触发:
"帮我做个项目介绍页"
"生成一份本周周报"
"做一页个人简历"

Skill 会自动加载 PRINCIPLES.md + 对应风格的 DESIGN.md。

任何 AI 工具

把下面两份 Markdown 一起贴给 Cursor / v0 / Copilot / ChatGPT:

1. PRINCIPLES.md —— 通用排版原则
2. 你选的风格文件,如 warm-editorial/DESIGN.md

然后说:

Build a single-page HTML following the two Markdown specs above.

Topic: [主题]
Audience: [受众]
Key messages: [3-7 点]
CTA: [结尾希望读者做什么]

Apply PRINCIPLES.md's 6 rules (structural variety, density jump, spacing
rhythm, accent restraint, author signature, break uniformity) first.
Then apply the style's visual choices.

Fork template

cp warm-editorial/template.html my-page.html
# 替换 {{PLACEHOLDER}} 占位符,所有 CSS inline,双击即可预览

---

当前风格

风格	气质	场景
[warm-editorial]