Menu
Loki 品牌设计系统 — 共享基础层。所有视觉 Skill（loki-deck/loki-social/loki-wechat-pipeline）的品牌规范单一来源（SSOT）。当用户明确要求查看品牌规范或做品牌审计时直接调用。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
英语课件生成器：输入任意主题（IP主题如疯狂动物城/小猪佩奇，或原创主题如水果王国）， 自动生成适合儿童/青少年的英语学习课件图。模块化题型组合，27种教学组件自由搭配， 覆盖词汇、对话、语法、练习、阅读、游戏、评估等场景。生成可直接喂给图像生成模型的 提示词，一步出图。Use when the user mentions 英语课件, English courseware, English worksheet, 儿童英语, 英语练习题, vocabulary cards, 课件生成, 或想用某个IP主题做英语教学内容。 Also triggers when the user wants to create English learning materials with a specific theme, generate educational worksheets, or build English practice exercises for kids.
增长情报 Skill。从数据到决策——分析公众号历史表现、追踪 AI 订阅投产比、 监测多平台增长、自动复盘内容效果，给出"下一步该做什么"的数据驱动建议。 当用户说"选题建议""数据复盘""投产比""哪篇火了""小红书数据""增长分析" "增长情报""growth intelligence""这周写什么"时使用。
公众号全链路工作台。从写作到发布一条龙：写作→封面→排版→编辑器→发布。 当用户说"写文章""写公众号""排版""公众号排版""做封面""标题方案""飞书转公众号" "公众号编辑器""可视化编辑""全流程"时使用。覆盖 Loki 公众号风格写作、 封面设计与标题方案、微信公众号排版、可视化块编辑器、飞书文档转公众号直发。
生成 Loki 个人风格的小红书/社交图文。支持4种模式：simple（快速模板）、brand（品牌风格+IP形象）、compress（公众号转小红书）、advanced（108组件高级定制）。当用户需要制作小红书图文、社交卡片、carousel时使用。
面向学生、应届生和普通求职者评估岗位或招聘 JD 在 AI 时代的任务暴露度，拆解日常职责， 按可替代性和人类必要性双维度评分，输出可投方向、作品集项目、简历改写、7 天行动计划、 招聘方视角、投递判断、高危区/混合区/安全区判断和 AI 新增机会。Use when 用户说 "帮我分析岗位""这个工作会被AI替代吗""看看我的岗安不安全""career analysis""AI暴露度" "岗位诊断""简历怎么改""找实习""校招""应届生""专业能干嘛""简历空白""作品集怎么做" "招聘方怎么看我的简历""找工作AI""就业分析""想转行""换个方向""没有相关经验能做什么"， 或提出任何岗位生存力、JD 匹配度、学生求职行动、转行规划、简历证明力、AI 求职策略相关需求。
每日拼贴诗。当用户说"每日拼贴诗""今日诗笺""生成拼贴诗""今天的词条诗"时使用。回顾当天对话内容，提取词条，选择艺术形式，生成拼贴诗。
| name | loki-design-system |
| description | Loki 品牌设计系统 — 共享基础层。所有视觉 Skill（loki-deck/loki-social/loki-wechat-pipeline）的品牌规范单一来源（SSOT）。当用户明确要求查看品牌规范或做品牌审计时直接调用。 |
定位： 这是所有视觉 Skill 的共享基础层（Shared Base Layer），不是常规调用型 Skill。loki-deck、loki-social、loki-wechat-pipeline 等视觉 Skill 在生成内容时引用本系统的 brand-dna.md、scene-*.md 等规范文件。
直接调用场景：
loki-design-system/
├── SKILL.md ← 工作流入口（你在看这个）
├── assets/
│ ├── base.html ← 通用骨架（字体+CSS变量+Reset+工具类）★必读
│ └── loki-face.svg ← 品牌 Logo SVG
├── templates/
│ ├── landing-page.html ← Landing Page 完整骨架
│ ├── slides.html ← 横向翻页 Slides 骨架
│ └── card.html ← 单页卡片/封面骨架
└── references/
├── brand-dna.md ← ★核心：品牌基因（颜色/字体/IP/气质/禁用）
├── design-dna.md ← ★核心：视觉指纹（质感/光线/构图/情绪/排版直觉）
├── scene-mapping.md ← ★必读：内容类型→布局/底色/组件映射表（全场景索引）
├── scene-all.md ← 10个场景总览表（组件数/状态/快速索引）
├── scene-landing.md ← ★场景一：个人主页（5个组件+完整HTML）
├── scene-product.md ← ★场景二：产品介绍页（6个组件+完整HTML）
├── scene-slides.md ← ★场景三：演讲Slides（8种页型+完整HTML+节奏约束）
├── scene-rednote.md ← ★场景六/七：小红书卡片（8种+完整HTML+手机字号基准）
├── scene-report.md ← ★场景八：数据报告/横评（7种组件+苹绣等级色+MyTake苹综）
├── loki-spec.md ← 完整规范（写作/封面IP互动/工作逻辑/设计DNA）
├── cover-templates.md ← 公众号封面 3 种模板
├── article-components.md ← 文章排版 12 个组件（含完整 HTML）
├── product-ui.md ← 产品 UI 规范
└── checklist.md ← 质量检查清单 P0/P1/P2
先读 references/scene-mapping.md——它定义了不同内容类型对应什么底色方案、布局节奏、组件选择。不同场景用不同的架构，不允许把个人主页的架构套在产品介绍上。
| 用户要做什么 | 用哪个模板 | 必读哪个场景文件 |
|---|---|---|
| Landing Page / 个人主页 | templates/landing-page.html | scene-landing.md |
| 产品介绍页 / 工具介绍 | assets/base.html | scene-product.md |
| 演讲 Slides / PPT | templates/slides.html | scene-slides.md |
| 公众号封面图 | templates/card.html | cover-templates.md |
| 公众号文章排版 | assets/base.html | article-components.md |
| 小红书卡片系列 | assets/base.html | scene-rednote.md |
| 数据报告 / 工具横评 | assets/base.html | scene-report.md |
assets/base.html — CSS 变量、字体加载、工具类全在里面references/brand-dna.md — 颜色系统、字体规则、禁用色不能省略这步。直接凭记忆写 = 颜色写错、字体漏加载。
templates/*.html 为起点# 检查禁用色
grep -nE "#000000|#ffffff|#FFFFFF|#6C63FF|#a855f7|#00FF88|#0066FF" index.html
# 检查字体是否加载
grep -c "fontsapi.zeoseven\|Smiley Sans" index.html # 应 ≥ 1
grep -c "Space+Grotesk\|Space Grotesk" index.html # 应 ≥ 1
# 检查有没有直接写裸 hex（不通过 var()）
grep -nE "color:\s*#[0-9A-Fa-f]" index.html | grep -v "var(" | head -10
读 references/checklist.md，P0 全过才能交付。
var(--amber) 不是 #C87A45。直接写 hex = 违规font-family: var(--font-display)var(--warm) / 深底 var(--dark)，绝不用 #fff 或 #000/* 最常用的那几个，背下来 */
--amber: #C87A45 /* 橙，品牌主色 */
--dark: #1A1816 /* 深底 */
--paper: #FDFAF5 /* 纸白 */
--warm: #F5F0E8 /* 暖米背景 */
--smoke: #6B8590 /* 烟青，冷色辅助 */
--text-muted: #9A9085 /* 元信息灰 */
--text-sub: #6B6157 /* 副标题灰 */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@200;300;400;500;600&family=Noto+Sans+SC:wght@100;300;400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>@import url("https://fontsapi.zeoseven.com/92/main/result.css");</style>
Claude Design 原始 HTML 文件位于品牌资料目录中。 包含：品牌配色系统.html、字体方案v3.html、产品UI规范.html、封面模板.html 等。 需要参考设计细节直接读取这些文件。