Imported from Hachiiki/AICSPortal (.agents/skills/design/design-templates/ascii-cosmos/SKILL.md). Install upstream with npx skills add Hachiiki/AICSPortal --skill ascii-cosmos. Copyright stays with the author.

name: ascii-cosmos description: Generate a single-file product landing page with a layered ASCII cosmos hero (rotating ASCII planet, drifting irregular asteroids, comet trails, nebula gas clouds — each in its own harmonious color) plus full marketing sections (about / features grid / showcase / spec / pricing / CTA / footer). Takes a natural-language description of one product (any kind — a note app, a coffee subscription, a CLI tool, an indie hardware, a hosting service…) and outputs ONE working .html file with deep-space dark or warm-letterpress theme. Runs in BOTH Claude Code (writes to ~/Desktop) and GLM / online chat (outputs HTML inline). Trigger phrases: "做个宇宙风产品落地页", "生成 ASCII 产品官网", "ascii-cosmos-gen ...", "做个独立软件 / 独立硬件落地页", or when user drags this skill folder into chat asking for an atmospheric product landing page. visibility: public mode: template carrier: web-page scenario: marketing-landing pattern_source: reference.html source_priority: skill-first triggers:

• "做个宇宙风产品落地页"
• "生成 ASCII 产品官网"
• "做个独立软件落地页"
• "做个独立硬件落地页"
• "ascii 落地页"
• "ascii hero" legacy_gen: true

ascii-cosmos — ASCII 宇宙调性产品落地页生成器

作品长什么样

单文件 HTML 产品官网，hero 是动态分层 ASCII 宇宙：

• 星云气体云（紫，柔和散点）
• 闪烁星点（冷白，带 ★ ✦ 装饰）
• 旋转 ASCII 行星（青，带 3 圈卫星轨道）
• 漂浮不规则小行星（琥珀金，6 种带陨石坑的多行 ASCII 形状，自旋 + 缓慢漂移）
• 彗星拖尾（粉，从屏幕掠过）

下面是常规 marketing 区块：关于 / 核心功能 6 卡片网格 / 界面预览 2 块 / 技术规格 / 订阅方案 3 档 / CTA / 页脚。所有强调字段都有"hover 时打乱-解码"的字符滚动动效（.pt 类）。

适合：独立软件、笔记/写作工具、本地优先 AI、CLI、独立硬件、订阅服务、SaaS、电子书、播客、任何"安静 / 克制 / 有手作味"的产品。

何时触发

用户说：

• "做个宇宙风产品落地页"
• "做个 ASCII 风格的产品官网"
• "生成一个像墨思那样的落地页 — 我的产品是 ..."
• "ascii-cosmos-gen ..."
• 把本 skill 文件夹拖进对话框并描述一个产品

提供：

• 产品名字 + 一句话定位（必需）
• 核心卖点 / 功能清单（推荐 — 给 6 张卡片用）
• 定价档位（可选 — 没说就编 3 档：免费 / 专业 / 团队）
• 风格（可选 — 深空青 / 暖色羊皮纸 / 赛博紫 / 终端绿 …，照抄 styles.md 预设名或自由描述。不写就用默认深空青）

如果用户只给产品名一句话：自己围绕这个产品把 6 个功能、3 档价、技术规格全部脑补出来。语气要克制、有手作味，不要 marketing 鸡血。

两种运行模式

模式 A · Claude Code / 本地（有文件系统）

• 输出位置：~/Desktop/{slug}.html（单文件，所有图片走 unsplash URL 或用户给的链接）
• slug 用产品英文名小写连字符
• 一句话报告：路径 + 用了什么风格 + 多少卡片

模式 B · GLM / 在线对话（无文件系统）

• 直接把完整 HTML 包在 ```html 代码块里输出
• 图片全部用 https://images.unsplash.com/photo-XXX?... 或 https://picsum.photos/seed/{slug}-NN/W/H 占位
• 不要尝试访问本地文件、不要建议命令行操作
• 末尾一行说明：保存为 .html 双击打开即可

判断：如果你无法 Read 看到本地图片或工作目录不是用户家目录 → 默认走 B。

工作步骤

1. 读模板

读取本 skill 同目录下的 template.html。这是完整骨架，包含：

• 全部 CSS（深空主题色 + 5 个 ASCII 层 + 卡片 / 价格 / 规格 / hero 网点字 …）
• 全部 JS（5 层 ASCII 渲染、信息区轨道、字符滚动、标签筛选、平滑滚动、实时时钟）
• 12 处 <!-- SWAP-N --> 注释标记需要替换的位置

JS / CSS 不要改（除了主题色变量与字体可以按 styles 改）。

2. 读风格预设

看 styles.md：5 种预设。如果用户的风格描述匹配某个名字，照那份的 CSS 变量替换 :root。否则按用户描述自己设计 6 个变量（--bg / --fg / --dim / --accent / --accent2 / --accent3 / --line / --paper）+ 5 个 ASCII 层颜色（#ascii-nebula / -stars / -planet / -asteroids / -comets）。

配色铁律：5 个 ASCII 层颜色必须互相和谐 + 都能在背景上读出来。深色背景 → 高饱和发光色；浅色背景 → 中低明度有重量的色。

3. 解析用户输入抽信息

抽：

• PRODUCT_EN — 英文 logo 名，全大写 ASCII 字（用于 hero 大字 ASCII title）
• PRODUCT_CN — 1-2 个中文字（hero 副标题大字，会渲染为网点字）
• TAGLINE — 一句话副标语（30-50 字）
• VERSION / TYPE / PLATFORM — 3 个 meta 标签
• ABOUT_PARAGRAPH — 80-150 字关于段落，3-5 个 <span class="pt"> 强调短语
• 3 HIGHLIGHT — 3 个 cell（标题 + 一句话描述）
• 6 FEATURES — 6 张卡片：图片 URL + ASCII overlay（5-6 行小图） + 标题 + 副标题 + 1-2 个标签 + 分类（ai/write/graph/sync 任选或自定义）
• 2 SHOWCASE — 2 段界面介绍（截图 URL + mini-ascii 装饰 + 标题带 <em> 强调 + 2 段 60-100 字描述）
• 10 SPEC ROWS — 10 行键值对（版本 / 平台 / 引擎 / 数据格式 / 同步协议 …）
• 3 PRICING — 3 档（名字 / 价格数字 / 价格单位 / 描述 / 5-6 条特性 / CTA 按钮文案）。中间一档加 featured 类
• CTA_BIG — 大字号 CTA 文案（带 <em> 强调）+ 副文案 + 3 个按钮 + 6-7 个平台标签

4. 替换 12 处 SWAP

强制保留（不能动）：

• 全部 <script> 块（5 层 ASCII 渲染 / 信息区轨道 / scramble / 标签筛选 / 平滑滚动 / 时钟）
• .pt 类的字符滚动机制（要在用户文案里手动撒 <span class="pt" data-text="...">...</span>）
• 5 个 ascii-layer 的 <pre id="ascii-..."> 节点
• <pre id="info-ascii"> 节点
• 6 张卡片的 data-cat 和筛选逻辑
• featured 价格档的样式

5. 写 ASCII 大字标题（SWAP-3）

用 ANSI Shadow / ANSI Regular 字体的 5 行 ASCII 文字。每个字母用 ╗╔═║║║╝╚═╝ 这种线条字符。例如 INKWEAVE 是：

██╗███╗   ██╗██╗  ██╗██╗    ██╗███████╗ █████╗ ██╗   ██╗███████╗
██║████╗  ██║██║ ██╔╝██║    ██║██╔════╝██╔══██╗██║   ██║██╔════╝
██║██╔██╗ ██║█████╔╝ ██║ █╗ ██║█████╗  ███████║██║   ██║█████╗
██║██║╚██╗██║██╔═██╗ ██║███╗██║██╔══╝  ██╔══██║╚██╗ ██╔╝██╔══╝
██║██║ ╚██╗██║██║  ██╗╚███╔███╔╝███████╗██║  ██║ ╚████╔╝ ███████╗
╚═╝╚═╝  ╚═╝╚═╝╚═╝  ╚═╝ ╚══╝╚══╝ ╚══════╝╚═╝  ╚═╝  ╚═══╝  ╚══════╝

如果产品英文名超过 8 字母 → 缩到 8 字母内的简称（如 INTERSTELLAR → STELLAR），或者用更窄的 ANSI 字体（更细的 ▌▐█）。

如果你不确定字模长什么样 → 至少给个看得过去的 5 行 ASCII，不要留空。

6. 写卡片 ASCII overlay（SWAP-6 内嵌）

每张卡片右下盖一段 4-5 行的小 ASCII 装饰，对应这张卡片的功能。例如：

• "智能续写" → ╭─────╮ │ ... │ ╰──→──╯
• "知识图谱" → ●─●─● │\\ │/│ ●─●
• "搜索" → ┌─────┐ │ ⌕ 找到 │ │ 3 处 │ └─────┘
• "同步" → ▣ ⇄ ▢ ╲ ╱ ⇅ ╱ ╲ ▤ ⇄ ▥
• "时间线" → ←─◆─◆─◆─→ ░░▒▒▓▓██

不要超过 5 行，不要超过 14 字符宽。

7. 撒 <span class="pt" data-text="..."> 强调

模板里所有需要"hover 时字符乱码再解码"的强调短语都用：

<span class="pt" data-text="原文">原文</span>

• intro 段落里撒 3-5 处
• showcase p 里每段撒 1-2 处
• spec 每行的值都包一层 <span class="pt">
• pricing btn 文字也加 pt
• 标题里的色字用 <span class="em">...</span>（不是 pt）

8. 风格变体（可选）

如果用户指定了风格，照 styles.md 改：

• :root 8 个变量
• .hero background 渐变
• 5 个 #ascii-{layer} 颜色
• 图片滤镜（深色用 hue-rotate(200deg) brightness(.7)，暖色用 sepia(.3) saturate(.85)）

没有指定风格时：根据产品的"调性词"自动选色 — 见下面「调性 → 配色映射」。

8.5 替换 ASCII 场景 motif（推荐！）

模板的 hero 默认是宇宙（行星 + 小行星 + 彗星 + 星云）。这个 motif 应该跟着产品调性换 — 一个咖啡订阅不该飘小行星，一个森林漫步 app 不该有彗星。

改法只改一个对象：找到 <script> 里的 // SWAP-13 · ASCII 场景资产 标记，整体替换里面的 SCENE = { ... }。其它 JS 不要动。

SCENE 11 个键各自的角色：

Motif 库（按产品类型选）

怎么写 floaters 形状

每个形状是 3-4 行的多行 ASCII，宽 8-12 字符。一定要：

• 形状轮廓闭合（比如树叶 ,/^\, ( ) '\_/' ）
• 多个变体不要长得一模一样，至少 3-6 个不同的
• 单字符宽度，不要用全角
• 留 1 格 padding 让旋转抖动好看

树叶示例：

floaters: [
  [" ,-^-, ",
   "|     |",
   " '---' "],
  ["  /\\\\  ",
   " /  \\\\ ",
   " \\__/ "],
  ["  *_*  ",
   " /...\\\\ ",
   " '___' "]
]

音符示例：

floaters: [
  ["  ♪    ",
   " /|    ",
   "♪ |____♪"],
  ["    ♫  ",
   "    /\\\\ ",
   "♪__/  \\\\"],
  ["  ♩    ",
   "  |    ",
   "  o    "]
]

写完检查：把 SCENE 直接贴进控制台，跑一下 JSON.stringify(SCENE) 不报错就 OK。

自由发挥的判定

如果用户的产品不在上表 10 类里 → 自己设计 motif，遵守原则：

1. floaters 选 3-6 个跟产品有具象关联的小图形（"它会让人想到这个产品"）
2. centerShade 14 字符明暗梯度，暗的字符（ .,）开头，亮的（@#█）结尾，中间渐变
3. diffuseChars 5-8 个"半透明"字符（点 / 顿点 / 小方块 / 波浪），表现氛围底层
4. streak 整套要"前重后轻"渐隐
5. sat / orbitDots 各 3 个，表现轻重三级

一句话原则：让人不戴眼镜、3 米外瞄一眼，能猜出这是个什么产品的网站。

9. 调性 → 配色映射（用户没指定风格时按这个选）

判定流程：

1. 用户明确说了风格名 → 照 styles.md 改
2. 用户没说，但产品有明显调性 → 按上表选最贴的预设
3. 完全开放 → 默认深空青

10. 报告

模式 A：一句话。

已生成 ~/Desktop/{slug}.html — {产品名}产品落地页，6 个功能卡片 + 3 档价格，深空青风格。双击打开。

模式 B：完整 HTML 代码块 + 一行说明。

保存为 {slug}.html 双击打开。要换图就把图片 URL 换成你自己的。要改 ASCII 主标题去顶部的 <pre class="ascii-title lg"> 替换字模。

易错速查

• 5 个 ASCII 层颜色互相打架：测试一下深色背景下 5 色都要清晰可读。粉太亮、紫太暗都会塌
• ASCII 大字模板对不上：5 行 ANSI Shadow 字符高度必须严格 5-6 行，不要 3 行
• <pre> 里换行用真换行，不要 \n 字符串字面量
• 卡片 data-cat 和 filter 不匹配 → 筛选失效。一致性检查
• pricing 中间档忘加 featured → 视觉重心丢
• JSON / 对象里中文引号：ASCII overlay 里如果用引号一律用全角 ""
• 删了 <pre id="ascii-comets"> 之类的层 → JS 报错。5 层节点必须全部保留
• 没给图片 URL → 用 unsplash 的横图（?auto=format&fit=crop&w=900&q=70）或 picsum