메뉴
Loki 品牌设计系统 — 共享基础层。所有视觉 Skill（loki-deck/loki-social/loki-wechat-pipeline）的品牌规范单一来源（SSOT）。当用户明确要求查看品牌规范或做品牌审计时直接调用。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
英语课件生成器：输入任意主题（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 等。 需要参考设计细节直接读取这些文件。