Communitygithub.com

黑白杂志风落地页

把 README 做成黑白杂志风主页:大号衬线标题、首字下沉、编号栏线、带框插图和收束句,输出一份自适应 HTML,并用无头浏览器检查版式、对比度和无障碍。

黑白杂志风落地页 是什么?

这个技能把项目 README 收成一本杂志似的个人站或产品主页。代理会排大号衬线标题、首字下沉的引言、带栏线的编号栏目、能放截图或真实数字的插图框、一句拉引语和结尾。交付物是单个自适应 HTML,并在无头 Chrome 里检查版式、对比度和无障碍。适合想要“编辑过的页面”,而不是又一张通用 SaaS 模板。

兼容平台✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/SHARPLEE00/lookbk-skills/tree/main/skills/mono-editorial-landing

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Mono 编辑风格着陆页

一个像杂志一样设计的着陆页:纸上的油墨、细线标注的“期号”、大得能在房间对面阅读的 Instrument Serif 标题、带首字母下沉的引言、由细线分隔的编号列、交替排列的带框图和说明文字(“图1”)的特色展示、居中的斜体引言、问题列表、结尾行以及打字机风格的版权页。默认配色为黑底暖白;通过更改三种颜色,可切换为浅色近黑底色,或为斜体字添加一种强调色。

您可以在 page.json 中描述页面,或者让脚本根据项目的 README 草拟内容。构建脚本会检查页面并写入 out/index.html,这是一个包含其 CSS 的单独文件(以及用于图片的 out/assets/ 目录)。对于尚未发布的产品,英雄区会包含一个真实的候补名单表单,该表单可将数据提交到 Formspree、Netlify Forms、Buttondown 或任何端点;对于已发布的产品,则会显示两个按钮。

你需要什么

  • Node.js 18 或更新版本。无需安装其他依赖。
  • Chrome、Chromium 或 Edge 用于检查(脚本会自动查找;如果找不到,请设置 CHROME_PATH)。
  • 对于候补名单:一个表单服务的账户,或一个可接收表单提交的端点。
  • 打开页面时需要互联网访问,以便加载 Google Fonts(Instrument Serif、Newsreader、Inter 和 IBM Plex Mono)。如果没有网络连接,页面会使用系统字体。

此技能的文件夹是 <skill> 下方的目录:也就是本 SKILL.md 文件所在的文件夹。

步骤

1. 从 README 草拟内容

node <skill>/scripts/from-readme.mjs README.md page.json

它会读取 README(以及旁边的 package.json,如果有的话),并写入一个已经可以构建的 page.json:项目名称、副标题作为第一个大标题、简介内容作为导语、一个“特性”列表(其项目以粗体名称开头,并作为列)、安装和快速开始命令作为终端图例、其他章节作为特色展示(包含它们的截图或代码)、一个 FAQ 章节作为问题列表,以及仓库链接作为按钮。它会跳过徽章、Logo、链接行、目录、许可和贡献者章节。

它绝不会自行生成任何文案,除了“开始”之类的标签,并且会以三个列表结尾。与用户一起处理它们:

  • 与用户共同编写:始终需要编写大标题,以及每个仍然是 README 章节标题(如“安装”、“工作原理”)的特性标题。
  • 裁剪到合适长度:它在句子或单词边界处缩短了文本。请重新阅读每个被缩短的部分。
  • README 中有但页面上没有的内容:它没有空间放置的章节和特性。如果它们更重要,可以替换到页面中。

如果没有 README,或者 README 内容很单薄,则根据用户的笔记、当前网站或文档,从某个示例开始编写 page.json。

2. 决定英雄区需要什么

  • 尚未启动:一个候补名单。询问哪个服务收集电子邮件,并设置 hero.form:

    provider设置准备在 form 中放入什么
    formspree在 formspree.io 创建一个表单;其 URL 以表单 ID 结尾。在任何主机上都是最简单的。`

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能