Compare commits
16
Commits
3b1ee9f997
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 leroy
|
b47dcf2ff2 | ||
|
leroy
|
4ec81e253f | ||
|
leroy
|
f2723b8c5d | ||
|
leroy
|
f1ea057eb4 | ||
|
leroy
|
44a2215940 | ||
|
leroy
|
a473075f4d | ||
|
leroy
|
fdc54547f5 | ||
|
leroy
|
94fa94baef | ||
|
leroy
|
bc66afda33 | ||
|
leroy
|
9ec5bf1c52 | ||
|
leroy
|
0ad31c7a52 | ||
|
leroy
|
243bbf1db1 | ||
|
leroy
|
f7b7740829 | ||
|
leroy
|
08c615d9fd | ||
|
leroy
|
ddea4df127 | ||
|
leroy
|
ceb9f119f3 |
@@ -3,6 +3,7 @@
|
||||
|
||||
# 本地 runtime 发现入口（软链到 skills/le-meta-skill，属于个人环境配置）
|
||||
.agents/
|
||||
.zcode/
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
@@ -20,3 +21,10 @@ __pycache__/
|
||||
# 环境与密钥（skill 零密钥底线）
|
||||
.env
|
||||
.env.*
|
||||
|
||||
|
||||
# le-app-design：trigger_eval.py 每次运行会重建 reports/trigger-eval.json（生成物，按需重跑即得，不入库）
|
||||
skills/le-app-design/reports/
|
||||
|
||||
# le-spec：同上，trigger-eval.json 为生成物不入库；test-report.md 为交付证据入库
|
||||
skills/le-spec/reports/trigger-eval.json
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
> *「把重复出现的方法，变成可触发、可验证、可维护的 Skill。」*
|
||||
|
||||
MetaSkill 是 Leroy 的个人 Skill 仓库：**le-meta-skill**（Skill 工坊）与其实战技能 **le-wechat-article**（公众号写作工坊）、**le-gpt-image**（无 Key GPT Image 生图工坊）。ZCode / Claude Code / Codex 通用。
|
||||
MetaSkill 是 Leroy 的个人 Skill 仓库：**le-meta-skill**（Skill 工坊）与其实战技能 **le-wechat-article**（公众号写作工坊）、**le-gpt-image**（无 Key GPT Image 生图工坊）、**le-app-design**（统一 App 设计工坊）。ZCode / Claude Code / Codex 通用。
|
||||
|
||||
## 仓库结构
|
||||
|
||||
@@ -19,10 +19,15 @@ skills/
|
||||
│ ├── references/ # 6 篇：五类型路由·排版规则·审读手册（含合规）·视觉生产·作者画像·常用事实卡
|
||||
│ ├── scripts/ # check_article（硬规则自检）/ md2wechat（3 骨架×4 色板转微信 HTML）/ publish_draft（草稿箱同步，零依赖）
|
||||
│ └── evals/ reports/
|
||||
└── le-gpt-image/ # 无 Key GPT Image 生图工坊
|
||||
├── SKILL.md # 工作流：接单→停点确认→生成交付；能力边界 / 尺寸质量速查 / 故障排查
|
||||
├── references/ # prompt-craft：结构公式·文字渲染·摄影/插画/信息图·中文东方风格·改图指令·反模式
|
||||
└── scripts/ # gpt_image.py（零依赖：Codex 凭证直连内部图像通道，token 自动刷新）
|
||||
├── le-gpt-image/ # 无 Key GPT Image 生图工坊
|
||||
│ ├── SKILL.md # 工作流：接单→停点确认→生成交付；能力边界 / 尺寸质量速查 / 故障排查
|
||||
│ ├── references/ # prompt-craft：结构公式·文字渲染·摄影/插画/信息图·中文东方风格·改图指令·反模式
|
||||
│ └── scripts/ # gpt_image.py（零依赖：Codex 凭证直连内部图像通道，token 自动刷新）
|
||||
└── le-app-design/ # 统一 App 设计工坊（编排器）
|
||||
├── SKILL.md # S0–S7 流水线：依赖门→产品理解→视觉探索→设计规范→构建→审查→迭代→验收；六铁律 + 岗位裁决表
|
||||
├── references/ # pipeline（七阶段细则）· runtimes（四 runtime 适配矩阵）
|
||||
├── scripts/ # check_deps（硬依赖门）/ log_call（调用证据账本）/ evidence_report（验收门），纯标准库
|
||||
└── evals/ # 触发用例（可回归的词面冒烟）
|
||||
```
|
||||
|
||||
## le-meta-skill —— Skill 工坊
|
||||
@@ -85,6 +90,21 @@ skills/
|
||||
|
||||
安全边界：凭证只读不打印不外发；内部接口无稳定性契约（native 失效可切 responses 备用通道）；内容政策拒绝即停，不换措辞绕过。
|
||||
|
||||
## le-app-design —— 统一 App 设计工坊
|
||||
|
||||
一个入口（「帮我设计这个 App」）跑完产品理解 → 视觉探索 → 设计规范 → Web 高保真原型 → 设计审查 → 优化迭代 → 交付。它不是借鉴了三个开源 Skill 的新 Skill，而是**真正集成并调用**三个上游的编排器（v1.1 起 frontend-design 先定方向、ui-ux-pro-max 后编系统——方向由题材决定，不由品类目录决定）：
|
||||
|
||||
- **ui-ux-pro-max**（MIT）：`search.py` CLI 真跑 `--design-system --persist` 生成 MASTER.md，UX/可访问性/触控规范走数据检索——设计规范的硬约束来源
|
||||
- **frontend-design**（Apache-2.0, Anthropic）：经宿主 Skill 工具装载（或 Read 原文全文，一等路径）——视觉方向与品牌差异化的 design lead
|
||||
- **impeccable**（Apache-2.0, pbakaus）：`impeccable` CLI（context / detect 62 规则 / critique-storage）+ playbook 装载照做——审查、精修与质量底线
|
||||
- **三个机制保证「真集成」可验证**：`check_deps.py` 硬依赖门（缺任何一个即终止并报安装指引）、`log_call.py` 证据账本（每次调用落 calls.jsonl，含装载文件的 sha256）、`evidence_report.py` 验收门（按 `--require` 口径判参与的上游各有 ≥1 条履职成功调用才许宣称完成）。验证不靠静态示例——**每次真实运行现场再生证据**；创建当日已三跑全过验收门（E2E + 同题双轮顺序对比 21/36→24/36、品类默认特征 2→0），过程记录见 git 提交 243bbf1 / 0ad31c7 / bc66afd。
|
||||
|
||||
触发方式：「帮我设计一个 App」「做一个高保真原型」「把首页和详情页这些界面设计出来」。点名单个上游（「用 impeccable 审查」）不触发，直连对应 Skill。
|
||||
|
||||
依赖安装：三个上游需装到 `~/.agents/skills/`（Codex 侧另链 `~/.codex/skills/`），详见 [skills/le-app-design/README.md](skills/le-app-design/README.md)。不 vendoring、不修改上游（归属见其 NOTICE）。
|
||||
|
||||
安全边界：上游目录只读；停点 1（设计方向）与停点 2（修复范围）为回合终止点，「一口气跑完」仅豁免停点、不豁免铁律与验收门。
|
||||
|
||||
## 安装
|
||||
|
||||
三个 runtime 读的都是同一套 SKILL.md 开放格式，脚本只用 python3 标准库。把要装的 skill 软链到对应位置即可：
|
||||
@@ -99,7 +119,7 @@ mkdir -p ~/.claude/skills && ln -s <克隆路径>/skills/le-wechat-article ~/.cl
|
||||
mkdir -p ~/.codex/skills && ln -s <克隆路径>/skills/le-wechat-article ~/.codex/skills/le-wechat-article
|
||||
```
|
||||
|
||||
装 le-meta-skill、le-gpt-image 同理，把路径换成对应 skill 目录。
|
||||
装 le-meta-skill、le-gpt-image 同理，把路径换成对应 skill 目录。装 le-app-design 还需先装三个上游依赖（ui-ux-pro-max / frontend-design / impeccable），并用其 `scripts/check_deps.py` 验证三方全绿。
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
# NOTICE — 第三方依赖归属
|
||||
|
||||
le-app-design 是一个编排器 Skill：运行时按各自原生机制调用以下三个上游
|
||||
Skill（CLI 执行 / 原文装载），不分发、不内嵌、不修改它们的任何内容。
|
||||
本仓库遵循各上游许可证条款，特此归属：
|
||||
|
||||
## ui-ux-pro-max
|
||||
- 上游: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
|
||||
- 许可证: MIT © nextlevelbuilder
|
||||
- 调用方式: 执行其 scripts/search.py（设计系统生成与域检索），读取其 data/*.csv 经由该 CLI
|
||||
- 本仓库不包含其源码副本
|
||||
|
||||
## frontend-design
|
||||
- 上游: https://github.com/anthropics/skills （skills/frontend-design）
|
||||
- 许可证: Apache-2.0 © Anthropic PBC（其 SKILL.md 附 LICENSE.txt 全文）
|
||||
- 调用方式: 宿主 Skill 工具装载，或 Read 其 SKILL.md 原文全文进执行上下文
|
||||
- 本仓库不包含其源码副本
|
||||
|
||||
## impeccable
|
||||
- 上游: https://github.com/pbakaus/impeccable
|
||||
- 许可证: Apache-2.0 © Patrick Bakaus
|
||||
- 调用方式: 执行其 scripts/impeccable CLI（context / detect / critique-storage…），
|
||||
并按其 SKILL.md 路由装载 reference/*.md playbook 照做
|
||||
- 本仓库不包含其源码副本
|
||||
|
||||
---
|
||||
le-app-design 自身以仓库根 LICENSE（MIT, © 2026 Leroy）发布。
|
||||
@@ -0,0 +1,60 @@
|
||||
# le-app-design
|
||||
|
||||
> 统一 App 设计工坊：一个入口完成产品理解 → 视觉探索 → 设计规范 → Web 高保真原型 → 设计审查 → 优化迭代 → 交付。底层**真实集成并调用**三个上游 Skill，本 Skill 只做编排、协调与质量控制。
|
||||
|
||||
**状态**：rigorous 档（一处有意偏离：不设 reports/ 静态证据目录——本 skill 的验证形态是**每次运行现场再生**（依赖门 + 调用账本 + 验收门），静态示例会腐烂且冗余，历史记录由 git 提交承担。2026-11-07 与 Leroy 确认）。ZCode / Claude Code / Codex / OpenCode 通用。
|
||||
|
||||
## 它解决什么问题
|
||||
|
||||
你想要一个 App 从想法变成可交互的高保真原型，只需要说「帮我设计这个 App」。le-app-design 负责检测依赖、给三个上游分派岗位、串起全流程、留下可检查的调用证据：frontend-design 先定有品牌差异性的视觉方向，ui-ux-pro-max 把方向编撰成设计系统并对可访问性/触控等硬约束校验，impeccable 做设计审查与反模式检测并盯着修复。你不需要知道三个上游各自怎么调。
|
||||
|
||||
## 三个上游依赖（必需，非可选）
|
||||
|
||||
| 上游 | 岗位 | 许可证 | 仓库 |
|
||||
|---|---|---|---|
|
||||
| ui-ux-pro-max | 设计规范生成 / UX 与可访问性数据检索 | MIT | github.com/nextlevelbuilder/ui-ux-pro-max-skill |
|
||||
| frontend-design | 视觉创意 / 品牌差异化（Anthropic） | Apache-2.0 | github.com/anthropics/skills |
|
||||
| impeccable | 设计审查 / 62 规则反模式检测 / 精修 | Apache-2.0 | github.com/pbakaus/impeccable |
|
||||
|
||||
本 Skill 不 vendoring、不修改、不复制三个上游的任何内容，只按其原生机制调用（CLI 执行 / 原文装载）。归属详见 [NOTICE](NOTICE)。
|
||||
|
||||
## 依赖安装
|
||||
|
||||
三份都装到 `~/.agents/skills/`（首选，impeccable 自引用该路径）：
|
||||
|
||||
```bash
|
||||
# 示例：ui-ux-pro-max
|
||||
git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill /tmp/uiux
|
||||
ln -s /tmp/uiux/.claude/skills/ui-ux-pro-max ~/.agents/skills/ui-ux-pro-max
|
||||
# frontend-design: git clone anthropics/skills → skills/frontend-design
|
||||
# impeccable: git clone pbakaus/impeccable → 整目录链接
|
||||
```
|
||||
|
||||
Codex 侧还需链接到 `~/.codex/skills/`。装完验证：
|
||||
|
||||
```bash
|
||||
python3 <本目录>/scripts/check_deps.py
|
||||
```
|
||||
|
||||
三方全绿才可使用；缺任何一个，触发本 Skill 时会明确报缺并终止，不会假装集成成功。
|
||||
|
||||
## 触发方式
|
||||
|
||||
- 帮我设计一个习惯打卡 App，要高保真原型
|
||||
- 把这个产品想法做成可交互的 UI 原型
|
||||
- 给我的工具类产品做一轮完整的设计 + 审查 + 改进
|
||||
- design an app prototype for …
|
||||
|
||||
不触发：点名单个上游（「用 impeccable 审查」）、公众号文章/海报排版、只要一张配图、纯功能开发。
|
||||
|
||||
## 核心机制（为什么这是真集成）
|
||||
|
||||
- **硬依赖门** `scripts/check_deps.py`：按依赖各自形态做活性检查——pro-max 真跑一次检索、impeccable 跑二进制 `--version`、frontend-design 校验原文完整可读（含 sha256）。缺则终止。
|
||||
- **证据账本** `scripts/log_call.py`：每次对上游的调用（CLI 执行与原文装载）都落 `calls.jsonl`——时间、命令、退出码、stdout 摘要、装载文件的 sha256。没进账本的调用视为没发生。
|
||||
- **验收门** `scripts/evidence_report.py`：三方各有 ≥1 条成功调用才判 PASS；否则 FAIL 并列出缺口，禁止把未完成的流程标记为成功。
|
||||
|
||||
## 安全边界
|
||||
|
||||
- 三个上游目录只读；本 Skill 的任何流程都不修改它们。
|
||||
- 停点 1（设计方向确认）与停点 2（修复范围确认）会停下来等你；说「一口气跑完」可豁免停点，但豁免不了铁律与验收门。
|
||||
- 交付产物全部落盘（运行目录 `le-app-design-runs/<id>/`），包括审查报告与集成证据，可复查。
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
name: le-app-design
|
||||
description: |
|
||||
Le App Design —— 统一 App 设计工坊：只叫这一个名字，自动完成「产品理解 → 视觉探索 → 设计规范 → Web 高保真原型 → 设计审查 → 优化迭代 → 交付」。底层真实集成并调用三个上游 Skill——frontend-design（视觉创意与品牌差异化，先定方向）、ui-ux-pro-max（设计规范系统化与 UX 硬约束校验，后编系统）、impeccable（设计审查/精修/反模式检测）；本 Skill 只做依赖检测、任务分配、执行协调与质量控制，绝不替代三者任何能力。
|
||||
何时触发：想要完整的 App / 产品 UI 设计流程——"帮我设计一个 App""做一个高保真原型""从想法到可交互原型""给这个产品做 UI 设计和原型""design an app"；或指定若干界面做设计——"把首页和详情页这些界面设计出来""做移动端的页面/界面设计""App 界面改版"。
|
||||
不要触发：点名单个上游 Skill 的直接请求（直连该上游即可）；写作与排版类任务；单张配图生成；纯功能开发与排障（无设计诉求）。
|
||||
metadata:
|
||||
author: Leroy
|
||||
version: 1.2.1
|
||||
runtimes: zcode, claude-code, codex, opencode
|
||||
requires:
|
||||
- "ui-ux-pro-max (MIT, nextlevelbuilder/ui-ux-pro-max-skill)"
|
||||
- "frontend-design (Apache-2.0, anthropics/skills)"
|
||||
- "impeccable (Apache-2.0, pbakaus/impeccable)"
|
||||
---
|
||||
|
||||
# Le App Design —— 统一 App 设计工坊
|
||||
|
||||
一个入口，三个真依赖。用户只说「帮我设计这个 App」，本 Skill 编排三个上游 Skill 完成从理解到交付的全流程。
|
||||
|
||||
## 铁律（违反任何一条即本次运行失败）
|
||||
|
||||
1. **真调用，不冒充。** 三个上游必须以其原生形态被实际调用：ui-ux-pro-max 跑它的 `search.py` CLI；impeccable 跑它的 `impeccable` CLI 并按其 SKILL.md 路由装载 reference/*.md playbook 照做；frontend-design 经宿主 Skill 工具装载（或 Read 原文全文）。禁止只引用名字、模仿理念、用自写流程替代。
|
||||
2. **依赖门不过，不许动工。** S0 检测到任何一个上游缺失/失活，立即向用户报告缺什么、怎么装，终止本次运行。不许跳过、不许假装集成完成。
|
||||
3. **调用必记账。** 每次对上游的调用（含 playbook/文档装载）都经 `log_call.py` 落入本次运行目录的 `calls.jsonl`。没进账本的调用视为没发生。
|
||||
4. **交付必过验收门。** S7 跑 `evidence_report.py`，门按任务类型的 `--require` 集合判：完整流程要求三方各 ≥1 条**履职阶段**成功调用（pro-max 计 S3- 前缀，防 S2 调研混门）；轻量路由只要求参与该路由的上游。不过门不许宣称完成。
|
||||
5. **不改上游。** 三个上游目录只读（调用、装载），任何修改都不属于本 Skill 的职责。
|
||||
6. **用户 brief 原话 > 一切。** 三个上游都自认 brief 优先，本 Skill 同样：brief 钉死的方向照办，冲突记入决策日志。
|
||||
|
||||
## 岗位分工（冲突时按此裁决）
|
||||
|
||||
| 维度 | 主责 | 裁决 |
|
||||
|---|---|---|
|
||||
| 视觉方向、品牌差异化、排版个性 | frontend-design（design lead） | 美学轴自由时听它的 POV，拒绝模板脸 |
|
||||
| 设计规范、可访问性、触控/平台规则、数据支撑选型 | ui-ux-pro-max | **硬约束**：WCAG/HIG/MD 类规则赢过美学偏好 |
|
||||
| 质量底线、验收标准、反模式 | impeccable | craft-floor 的 ban 是红线（如 eyebrow 禁令、嵌套卡片必错） |
|
||||
| 产品事实、范围、语气 | 用户 brief | 最高优先级 |
|
||||
|
||||
## 工作流 S0–S7
|
||||
|
||||
细则（每阶段的动作、命令、产物、验收）见 [pipeline.md](references/pipeline.md)；跨 runtime 适配见 [runtimes.md](references/runtimes.md)。设 `<SKILL>` = 本 Skill 目录，`<RUN>` = 运行目录（默认 `<项目根>/le-app-design-runs/<时间戳>-<slug>/`，下同）。
|
||||
|
||||
### S0 依赖门（每次触发必跑，轻量任务也不例外）
|
||||
|
||||
```bash
|
||||
python3 <SKILL>/scripts/check_deps.py --out <RUN>/deps.json
|
||||
```
|
||||
|
||||
三方解析 + 活性检查（pro-max 真跑一次检索、impeccable 跑 `--version`、frontend-design 校验原文完整可读）。非零退出 → 停止并报告缺失项与安装指引，本次运行终止。
|
||||
|
||||
### S1 产品理解
|
||||
|
||||
产出 `<RUN>/BRIEF.md`：**项目代号**（供 S3 的 `-p` 与目录命名）、产品是什么、给谁、核心任务、平台与形态、impeccable 四模式归属（Persuade / Operate / Read / Experience）。brief 信息不足且影响方向 → 问用户；足够 → 写明假设直接做。
|
||||
|
||||
### S2 视觉探索 — frontend-design（方向先行）
|
||||
|
||||
1. 宿主有 Skill 工具（ZCode / Claude Code）→ 用它装载 `frontend-design`；没有 → Read `<DEP_FD>/SKILL.md` 全文进上下文（一等路径，不是降级）。
|
||||
2. 装载后立即记账：`python3 <SKILL>/scripts/log_call.py frontend-design --run-dir <RUN> --load <DEP_FD>/SKILL.md`
|
||||
3. 按其「两遍法」产出 `<RUN>/design-plan.md`：从题材世界出发定艺术方向——色板（4–6 个具名 hex）、字体与角色、布局概念（一句话 + ASCII）、设计原则；对照它的 AI 味特征清单逐条自检，修订写明改了什么、为什么。**此时不看任何品类匹配结果——方向由题材与 POV 决定，不由目录里有什么决定。**
|
||||
4. （可选调研模式）方向成形前可用 pro-max 的 `--domain style|color|typography` 检索选项当情绪板（经 log_call 记账、note 标 S2-research）——只供参考，不做决定，不生成 MASTER。
|
||||
|
||||
### S3 设计规范 — ui-ux-pro-max（系统后行）
|
||||
|
||||
方向已定，本阶段把它**编撰**成可执行的规范并对硬约束校验：
|
||||
|
||||
```bash
|
||||
# 用已定方向的关键词驱动系统生成（不是品类词），dials 按方向调
|
||||
python3 <SKILL>/scripts/log_call.py ui-ux-pro-max --run-dir <RUN> --note S3-design-system -- \
|
||||
python3 <DEP_UIUX>/scripts/search.py "<方向关键词，如 exercise-book hand-drawn sticker>" \
|
||||
--design-system --persist -p "<项目名>" --output-dir <项目根>
|
||||
```
|
||||
|
||||
两条规则：
|
||||
- **硬约束否决权**：frontend-design 定的 hex/字号若对比度、触控、平台规范不达标，以 pro-max 数据（WCAG/HIG/MD）为准**改值不改方向**；逐项校验（`--domain ux`、`--domain typography` 等）全部经 log_call。
|
||||
- **目录回弹降级**：若 pro-max 风格目录（51 个活跃风格）对已定方向匹配失败——生成结果明显回弹到品类默认——则**不采用该 MASTER**，降级为「design-plan 的 token 表即规范 + pro-max 逐项校验补硬约束」，在 design-plan 决策记录里写明降级与理由。方向的独特性优先于系统的便利性。
|
||||
|
||||
### 停点 1（回合终止点）
|
||||
|
||||
向用户展示 BRIEF + design-plan（设计方向）+ MASTER 要点或降级说明，等确认或调整后再进构建。用户已明确说「一口气跑完」→ 豁免本停点，继续。**本停点必须终止回合等待用户，不得自答自继续。**
|
||||
|
||||
### S4 高保真构建（a 首屏 → 停点 1.5 → b 全量）
|
||||
|
||||
1. Read `<DEP_IMPECCABLE>/reference/craft-floor.md`（装载即调用）并记账。
|
||||
2. **S4a 首屏**：先只构建主界面一屏（真实内容 + 规范 token + design-plan 个性），390×844 截图。
|
||||
3. **停点 1.5（首屏确认，回合终止点）**：把首屏截图发到对话，请用户确认「方向落地长这样」再继续——这一站消除盲盒：成品第一次见面不再是 S5 之后。豁免时跳过停顿，**但截图仍必须发出**。
|
||||
4. **S4b 全量**：其余屏 + 完整交互（390 主档 + 375 兼容档截图；移动 Web 任务免桌面档）。显隐/布局断言用渲染事实（computed display / boundingRect），不信 hidden 属性。
|
||||
|
||||
### S5 设计审查 — impeccable
|
||||
|
||||
1. `log_call.py impeccable -- sh <DEP_IMPECCABLE>/scripts/impeccable context --target <主文件>`，按其指令行事。
|
||||
2. 按其 SKILL.md 路由装载 `reference/critique.md`（+ 需要的 audit/craft-floor 等）并照做——critique 要求**双独立 sub-agent**（Assessment A 设计评审 / Assessment B detect+浏览器证据）：ZCode/Claude Code 用 Agent 工具并行派两个；Codex 按 critique.md 的 Codex 门问询；无 sub-agent 的 runtime 按其降级规则出横幅。playbook 装载逐一记账。
|
||||
3. Assessment B 真跑：`log_call.py impeccable -- sh <DEP_IMPECCABLE>/scripts/impeccable detect --json <文件>`；可浏览器时按 playbook 走 overlay/截图证据。
|
||||
4. 按 critique.md 完整出报告（启发式评分表、persona 红旗、P0–P3、快照持久化 + trend）。
|
||||
|
||||
### 停点 2（回合终止点）
|
||||
|
||||
展示审查报告**并附修复前后关键截图**（不是纯文字报告——用户确认修复范围时应已见过成品），四选一：全部 / Top 3 / 仅 P0-P1 / 保持现状（现状=跳过 S6 直接 S7，报告照出）。「一口气跑完」豁免同上；豁免时默认修 P0+P1，且审查报告末尾必须补字面行 `Questions skipped: 停点2经用户豁免（默认修复 P0+P1）`——这是 impeccable critique 契约的收尾要求，漏了即该次 critique 不完整。
|
||||
|
||||
### S6 优化迭代
|
||||
|
||||
按确认的范围修复：P0/P1 必修；修完复跑 `detect --json` 至 0 findings（或记明剩余项与理由）；复截图核对视觉。涉及大改方向的回到 S3 重走（罕见）。
|
||||
|
||||
### S7 交付 + 验收门
|
||||
|
||||
```bash
|
||||
# 完整流程（默认三方门，pro-max 计履职前缀）
|
||||
python3 <SKILL>/scripts/evidence_report.py --run-dir <RUN> --out <RUN>/INTEGRATION-REPORT.md \
|
||||
--require "ui-ux-pro-max:S3-,frontend-design:S2-,impeccable" \
|
||||
--artifact <原型主文件> --artifact <RUN>/shot-*.png --artifact <RUN>/design-plan.md
|
||||
# 系统路径（非降级）另加 --artifact design-system/<slug>/MASTER.md（slug 跑完 S3 后 ls design-system/ 确认）
|
||||
```
|
||||
|
||||
交付物 = 原型（可打开可交互）+ BRIEF/design-plan/MASTER（或降级说明）+ 审查报告与快照 + INTEGRATION-REPORT。报告 FAIL（门或产物缺失）→ 不许宣称完成，如实说明缺什么。
|
||||
|
||||
## 轻量任务路由（含各自的验收门口径）
|
||||
|
||||
- **仅审查/体检**（「帮我审一下这个原型的设计」）：S0 → S5（完整 critique：装载 critique.md + 双 sub-agent + detect + 快照）→ 停点 2 →（S6 按所选范围）→ S7。验收门 `--require "impeccable"`。
|
||||
- **局部修改**（「把这个页面间距调好」）：S0 → S2 快速版（涉及视觉决策时：装载 frontend-design + 记账，方向口头确认即可，无 design-plan 全文档）→ S4′（craft-floor 装载 + 就地修改 + 渲染事实断言 + 复截图）→ S5′（detect --json + 复截对比，不走完整 critique）→ S7。验收门 `--require "impeccable"`（走了 S2 快速版则加 `,frontend-design`）。
|
||||
- 三上游经 check_deps 解析后始终可调用；轻量路由是省阶段，不是换实现——省掉的阶段不要求调用，但**不许伪造调用记录凑门**。
|
||||
|
||||
## 失败模式与停手点
|
||||
|
||||
- 依赖缺失/失活：S0 即停，报缺失项与安装指引（见 README「依赖安装」）。
|
||||
- 上游 CLI 中途失败：重试一次；仍失败 → 记账（账本保留失败记录）、报告用户、终止或按用户指示降级到其余上游可覆盖的范围，并在交付物中明确标注缺口。
|
||||
- Chrome/浏览器不可用：截图核对改为声明 fallback（craft-floor 逐条人工核对），在报告中注明。
|
||||
- 用户点名单一上游：不触发本 Skill（负触发已在 description 声明）。
|
||||
|
||||
## 反例黑名单
|
||||
|
||||
- 不要在账本外「顺手」直接调上游——没记账的调用等于没发生。
|
||||
- 不要把三个上游的文档内容抄进本 Skill 或其 references 来「省一次装载」。
|
||||
- 不要因为某上游慢/临时失败就用自己的设计判断顶替其岗位并照常宣称完成。
|
||||
- 不要在停点自问自答继续跑；豁免只能来自用户明确授权。
|
||||
- 不要检测到依赖缺失还继续产出「设计」——那是没有集成的假成功。
|
||||
|
||||
## Reference Map
|
||||
|
||||
- 七阶段细则与验收：[pipeline.md](references/pipeline.md)
|
||||
- 跨 runtime 适配与已知限制：[runtimes.md](references/runtimes.md)
|
||||
- 依赖安装与许可证：[README.md](README.md)、[NOTICE](NOTICE)
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"_说明": "le-app-design 触发用例。family 标注场景族，便于回归分析。",
|
||||
"recommended_threshold": 0.3,
|
||||
"negative_patterns": ["用 impeccable", "impeccable 审查", "ui-ux-pro-max", "查个配色", "公众号", "写一篇"],
|
||||
"should_trigger": [
|
||||
{"text": "帮我设计一个习惯打卡 App，要能看的高保真原型", "family": "full_design_cn"},
|
||||
{"text": "把这个产品想法做成可交互的 UI 原型，从设计到成品", "family": "full_design_cn"},
|
||||
{"text": "design an app for my recipe startup, high-fidelity prototype", "family": "full_design_en"},
|
||||
{"text": "给我的工具类产品做一轮完整的设计：规范、视觉、原型加审查", "family": "full_pipeline"},
|
||||
{"text": "我要做个妈妈育儿 App，帮我把首页和详情页设计出来", "family": "app_screens"},
|
||||
{"text": "用 le-app-design 把这个 idea 变成原型", "family": "explicit_name"}
|
||||
],
|
||||
"should_not_trigger": [
|
||||
{"text": "用 impeccable 审查一下这个页面", "family": "single_upstream_direct"},
|
||||
{"text": "ui-ux-pro-max 帮我查个配色", "family": "single_upstream_direct"},
|
||||
{"text": "帮我写一篇公众号文章", "family": "other_le_skill"},
|
||||
{"text": "给我生成一张 App 封面图", "family": "image_only"},
|
||||
{"text": "这个按钮的点击事件没反应，帮我修一下", "family": "pure_dev"}
|
||||
],
|
||||
"near_neighbor": [
|
||||
{"text": "把这个页面布局调好看一点", "family": "local_tweak", "note": "局部修改走轻量路由（S0+S4′+S5′），仍触发但流程裁剪"}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
# 七阶段流水线细则
|
||||
|
||||
SKILL.md 是路由，本文是执行手册。每阶段给出：输入 → 动作（含确切命令）→ 产物 → 验收。命令中 `<SKILL>` = le-app-design 目录，`<RUN>` = 本次运行目录，`<DEP_UIUX>` / `<DEP_FD>` / `<DEP_IMP>` = S0 解析出的三个上游路径（读 `<RUN>/deps.json` 的 `deps.*.path`）。
|
||||
|
||||
## S0 依赖门
|
||||
|
||||
**动作**
|
||||
```bash
|
||||
mkdir -p <RUN>
|
||||
python3 <SKILL>/scripts/check_deps.py --out <RUN>/deps.json
|
||||
```
|
||||
|
||||
**验收**：exit 0 且 deps.json 的 `ok=true`。任一依赖 `alive=false` → 向用户输出缺失项、原因（`check` 字段）与安装指引（`install` 字段），**终止运行**。deps.json 是后续所有阶段的路径来源，不要手写上游路径。
|
||||
|
||||
## S1 产品理解
|
||||
|
||||
**动作**：从用户输入提炼并写 `<RUN>/BRIEF.md`，包含：
|
||||
|
||||
- 产品：一句话说清这是什么、解决什么
|
||||
- 受众与场景：谁、在什么场景用（决定 impeccable 模式与 frontend-design 的取材世界）
|
||||
- 核心任务：用户打开它要完成的最重要 1–3 件事
|
||||
- 平台形态：移动 Web（默认 390×844）/ 桌面 / 响应式；明确「Web 高保真原型」是交付形态
|
||||
- 模式归属：Persuade / Operate / Read / Experience 四选一（impeccable 按表面而非产品选模式：App 内页=Operate，落地页=Persuade，阅读页=Read，作品展示=Experience）
|
||||
- 范围：本次做哪些屏/页面，明确排除什么
|
||||
|
||||
信息不足且**影响方向**才问用户（用结构化选项，别开放式问卷）；否则写明「假设：…」直接做。多次触达同一项目时先读已有 BRIEF.md，增量更新而非重写。
|
||||
|
||||
**验收**：BRIEF.md 落盘，模式归属有理由。
|
||||
|
||||
## S2 视觉探索 — frontend-design（方向先行）
|
||||
|
||||
**动作**
|
||||
1. 宿主有 Skill 工具 → 调它装载 `frontend-design`；没有 → Read `<DEP_FD>/SKILL.md` 全文（两路等价，装载即调用）。
|
||||
2. 立即记账：`python3 <SKILL>/scripts/log_call.py frontend-design --run-dir <RUN> --note S2-load --load <DEP_FD>/SKILL.md`
|
||||
3. 以其「设计总监」立场产出 `<RUN>/design-plan.md`：
|
||||
- **题材世界**：从产品自己的世界取材（subject matter 是差异化来源），写明方向一句话
|
||||
- **色板**：4–6 个具名 hex（`--纸面 #FDFDF8` 式命名）
|
||||
- **字体**：选型 + 角色，说明为何不是默认脸
|
||||
- **布局**：一句话概念 + 每屏 ASCII 线框 + 对齐策略
|
||||
- **原则**：这个产品独有的 3–5 条
|
||||
- **两遍法第二遍**：对照其「AI 味特征清单」逐条自检；发现默认味 → 写明改了什么、为什么
|
||||
4. （可选调研模式）方向成形前可用 pro-max `--domain style|color|typography` 检索选项当情绪板（记账 note=S2-research）——**只供参考不做决定**，此阶段禁止 `--design-system`。
|
||||
|
||||
**验收**：design-plan.md 四要素齐全 + 自检一节存在 + 记账在案；方向不来自品类匹配。
|
||||
|
||||
## S3 设计规范 — ui-ux-pro-max（系统后行）
|
||||
|
||||
**动作**：把已定方向编撰成规范 + 硬约束校验：
|
||||
|
||||
```bash
|
||||
# 主调用：用方向关键词（不是品类词）驱动系统生成；dials 按方向调
|
||||
python3 <SKILL>/scripts/log_call.py ui-ux-pro-max --run-dir <RUN> --note S3-design-system -- \
|
||||
python3 <DEP_UIUX>/scripts/search.py "<方向关键词>" --design-system --persist \
|
||||
-p "<项目名>" --output-dir <项目根> [--variance N --motion N --density N]
|
||||
|
||||
# 硬约束校验（按需，全部记账）：对比度/触控/排版/相关 UX 规则
|
||||
python3 <SKILL>/scripts/log_call.py ui-ux-pro-max --run-dir <RUN> --note S3-ux-check -- \
|
||||
python3 <DEP_UIUX>/scripts/search.py "<如 contrast touch target>" --domain ux
|
||||
```
|
||||
|
||||
**两条规则**：
|
||||
- **硬约束否决权**：frontend-design 定的 hex/字号若不达标（WCAG/HIG/MD 数据为准），**改值不改方向**；每处修改记入 design-plan 决策记录。
|
||||
- **目录回弹降级（操作化判据）**：生成结果命中以下任意两条即判回弹、不采用该 MASTER——①Style 名与方向关键词无词面或语义关联（如「练习本手写」→ Swiss/Helvetica）；②色板命中 AI-tell 家族（暖奶油底、默认靛蓝/紫系、近黑+酸绿）且与 design-plan 色板无共享主色；③关键 Effects/Anti-patterns 与方向的手感相反（如手绘方向得到 corporate/rational）。降级后：design-plan 的 token 表即规范 + pro-max 逐项校验补硬约束，决策记录写明命中哪两条。方向的独特性优先于系统的便利性。
|
||||
|
||||
**验收**：MASTER.md 存在且与方向一致，或降级路径已记录；校验检索在账本；design-plan 决策记录含 S3 的改值/降级条目。
|
||||
|
||||
## 停点 1
|
||||
|
||||
把 BRIEF（要点）、design-plan（方向 + ASCII + 色板 + 原则）、MASTER 要点或 S3 降级说明展示给用户，明确请求确认或调整意见，**终止回合**。用户豁免（已说「一口气跑完」）→ 跳过继续。
|
||||
|
||||
## S4 高保真构建（a 首屏 → 停点 1.5 → b 全量）
|
||||
|
||||
**S4a 首屏**
|
||||
1. Read `<DEP_IMP>/reference/craft-floor.md` 并记账：
|
||||
`python3 <SKILL>/scripts/log_call.py impeccable --run-dir <RUN> --note S4-craft-floor --load <DEP_IMP>/reference/craft-floor.md`
|
||||
2. 只构建**主界面一屏**（真实内容 + 规范 tokens + design-plan 个性），390×844 截一张。
|
||||
|
||||
**停点 1.5（首屏确认）**：截图发到对话请用户确认方向落地；豁免时跳过停顿但截图必须发出。**终止回合**；这一站是「盲盒阀门」——成品首见从 S5 之后提前到构建开头。
|
||||
|
||||
**S4b 全量**
|
||||
1. 构建：默认无构建链的 HTML/CSS/JS（单文件优先，可拆 CSS/JS 文件）。硬性要求：
|
||||
- token 来自 MASTER.md（或降级时的 design-plan token 表），不发明规范之外的美学量
|
||||
- 布局与个性按 design-plan；SVG 图标（真图标库或手绘一致笔画），禁 emoji 图标；插画/吉祥物/场景图可按 runtime 用图像生成（Codex=内建 image_gen，边界与产物规则见 [runtimes.md](runtimes.md)），图标系统与精确几何仍走 SVG
|
||||
- craft-floor 全条目施工时遵守（尤其：eyebrow 是 ban；嵌套卡片必错；elevation 声明一次；浏览器表面——selection/caret/scrollbar/focus ring/表格数字——从色板定制）
|
||||
- 交互真实可用（点击/切换/滚动行为写 JS），不是静态画片
|
||||
- pro-max Pre-Delivery 逐条过：44px 触控、4.5:1 对比、focus ring、reduced-motion、375px 无横滚
|
||||
2. 截图口径（统一）：**390×844 主档 + 375 兼容档各至少一张**；移动 Web 任务免桌面档（body 居中列已保证桌面不破）。按 craft-floor「一次看一批」：Read 截图找问题 → 修完一批 → 再截。编排器无法亲验截图图像时，交 S5 Assessment A 首个看图。
|
||||
3. **显隐与布局断言用渲染事实（computed display / getBoundingClientRect），不信 hidden 属性**——id/类选择器的 display 会压过 [hidden]（实测翻车：两页堆叠渲染而属性检查全绿）。
|
||||
|
||||
**验收**：原型可打开（`file://` 直开无 console error 级问题）、双档截图在 `<RUN>/`、craft-floor 关键项肉眼过。
|
||||
|
||||
## S5 设计审查 — impeccable
|
||||
|
||||
**动作**
|
||||
1. 上下文装载：
|
||||
```bash
|
||||
python3 <SKILL>/scripts/log_call.py impeccable --run-dir <RUN> --note S5-context -- \
|
||||
sh <DEP_IMP>/scripts/impeccable context --target <原型主文件>
|
||||
```
|
||||
按 context 输出的指令行事（它可能要求 init/PRODUCT.md——轻量原型按其 SCOPED_EXISTING_ALLOWED 通道走，不阻塞）。
|
||||
2. Read `<DEP_IMP>/reference/critique.md` 并记账（`--load`）。**按 critique.md 原文执行**，特别注意其 Hard Invariants：
|
||||
- 双独立 sub-agent：Assessment A（设计评审）/ Assessment B（detect + 浏览器证据）。ZCode/Claude Code 用 Agent 工具并行派发，两者互不可见对方输出；Codex 有 spawn_agent 先问一次；都没有才单上下文顺序跑并打 `⚠️ DEGRADED` 横幅
|
||||
- **派发模板要点**（子代理看不到主上下文，prompt 必须自带全部材料）：
|
||||
- A 传：目标文件路径、BRIEF/design-plan 路径、全部截图路径（要求「真正看图」）、四模式与受众摘要、输出契约（specificity/十启发式表/认知负荷/情绪/P0-P3/persona）
|
||||
- B 传：经 log_call 包裹的 detect 命令全文（注明 exit 0=clean / 2=findings 属成功）、截图清点、误报核对要求（对源码实算）、fallback signal 原文案
|
||||
- B 的 CLI 扫描：
|
||||
```bash
|
||||
python3 <SKILL>/scripts/log_call.py impeccable --run-dir <RUN> --note S5-detect -- \
|
||||
sh <DEP_IMP>/scripts/impeccable detect --json <原型目录或主文件>
|
||||
```
|
||||
（exit 0=clean，2=有 findings；只传 markup 文件）
|
||||
- 浏览器证据：无浏览器自动化时用 headless Chrome 截图代替并在 Run Notes 声明 fallback
|
||||
- 快照持久化 + trend：按 critique.md 的 `critique-storage write/trend` 执行并记账
|
||||
3. 出完整报告：方法横幅、启发式评分表（0–4 ×10，适用 max 规范化）、Design Specificity、P0–P3 优先问题、persona 红旗、Run Notes。
|
||||
|
||||
**验收**：报告完整落 `<RUN>/critique-report.md`（同时按 critique.md 在聊天中交付全文）、detect 结果在账本、快照已写（或记明原因）。
|
||||
|
||||
## 停点 2
|
||||
|
||||
展示审查报告**并附修复前后关键截图**，四选一：全部 / Top 3 / 仅 P0–P1 / 保持现状（跳过 S6 直接 S7，报告照出）。**终止回合**；豁免规则同停点 1（豁免时默认修 P0+P1，并在审查报告末尾补字面行 `Questions skipped: 停点2经用户豁免（默认修复 P0+P1）`，满足 impeccable critique 的收尾契约）。
|
||||
|
||||
## S6 优化迭代
|
||||
|
||||
**动作**：按用户选定范围修（P0/P1 无用户明示保留也必修）→ 复跑 detect（记账，note=S6-redetect）至 exit 0（=0 findings；残留项逐一记明理由）→ 复截图核对修复效果。修复遵守 S4 的同一套约束（token/设计/craft-floor），不许「修着修着」脱离体系。
|
||||
|
||||
**验收**：detect 清零或残留有据；前后截图对比留档 `<RUN>/`。
|
||||
|
||||
## S7 交付 + 验收门
|
||||
|
||||
**动作**
|
||||
```bash
|
||||
# 完整流程：默认三方门，pro-max 计履职前缀（S2-research 不混门）
|
||||
python3 <SKILL>/scripts/evidence_report.py --run-dir <RUN> \
|
||||
--out <RUN>/INTEGRATION-REPORT.md --title "<项目代号> 集成证据" \
|
||||
--require "ui-ux-pro-max:S3-,frontend-design:S2-,impeccable" \
|
||||
--artifact <原型主文件> --artifact <RUN>/shot-<主档>.png --artifact <RUN>/design-plan.md
|
||||
# 仅审查路由：--require "impeccable"；局部修改：--require "impeccable[,frontend-design]"
|
||||
# 系统路径（非降级）另加 --artifact design-system/<slug>/MASTER.md；
|
||||
# slug 由上游按 -p 项目代号生成（小写连字符），跑完 S3 用 ls design-system/ 确认实际目录名
|
||||
```
|
||||
|
||||
向用户交付：原型入口（`file://` 路径，可交互）、关键截图、INTEGRATION-REPORT 判定与调用统计、审查分数与修复摘要、运行目录索引。**FAIL 时不宣称完成**，把缺口（哪个门没过/哪个产物缺失）说清楚。
|
||||
|
||||
## 全程通用约束
|
||||
|
||||
- **note 命名规范**（验收门的履职前缀依赖它）：`S2-load`（frontend-design 装载）、`S2-research`（可选调研，不计入门）、`S3-design-system` / `S3-ux-check` / `S3-typography-check`（pro-max 履职）、`S4-craft-floor`、`S5-context` / `S5-critique-playbook` / `S5-detect`、`S6-redetect`。
|
||||
- 每次对上游的调用都过 `log_call.py`，`--run-dir` 显式传（缺省会另建 `<时间戳>-run` 目录，账本裂成两份、验收门读空账本 FAIL）；失败调用也要留痕。
|
||||
- 不修改三个上游目录的任何文件；PYTHONDONTWRITEBYTECODE 已由脚本注入。
|
||||
- 运行目录是本次任务的唯一工作痕迹区：BRIEF / design-plan / 截图 / 报告全进 `<RUN>`；MASTER.md 在项目根（上游约定位置，slug 跑完 S3 后 `ls design-system/` 确认实际目录名）。
|
||||
- 用户豁免只作用于停点，不作用于铁律与验收门；豁免停点 1.5 时首屏截图仍须发出。
|
||||
@@ -0,0 +1,38 @@
|
||||
# 跨 Runtime 适配
|
||||
|
||||
CLI 调用（check_deps / log_call / 上游两个 CLI）在所有 runtime 完全一致——它们只依赖 python3 与 sh。差异只在两处：frontend-design 怎么装载、critique 的双 sub-agent 怎么派。
|
||||
|
||||
## 适配矩阵
|
||||
|
||||
| Runtime | frontend-design 装载 | critique 双评审 | 备注 |
|
||||
|---|---|---|---|
|
||||
| ZCode | Skill 工具（首选）或 Read 原文 | Agent 工具并行派 A/B 两个子代理 | 全功能路径，E2E 验证即在此环境跑 |
|
||||
| Claude Code | Skill 工具（首选）或 Read 原文 | Task/Agent 工具并行派 A/B | 同上 |
|
||||
| Codex | Read 原文全文（一等路径） | 有 `spawn_agent`：按 critique.md 的 Codex 门**先问用户一次**再派；无则顺序跑 + `⚠️ DEGRADED` 横幅 | 上游需先装进 `~/.codex/skills/`（见 README）；**插画资产可用内建 image_gen**（见下节） |
|
||||
| OpenCode | Read 原文全文（一等路径） | 有 sub-agent 工具就派，无则降级横幅 | 同 Codex 逻辑 |
|
||||
| MausBot / 其它 | Read 原文全文（一等路径） | 无 sub-agent 则降级横幅 | 限制：见下 |
|
||||
|
||||
## Codex 的图像生成（image_gen）
|
||||
|
||||
Codex 内建 `image_gen` 工具可直接生成图片，le-app-design 在 Codex 运行时允许用它产出小型插画资产：
|
||||
|
||||
- **适用**：S4 构建需要的插画类资产——吉祥物/角色形象（手绘 SVG 常见「认不出是什么」的翻车）、场景插图、封面图。prompt 必须携带 design-plan 的色板 hex 与题材世界描述，保证与方向一致；生成后按 craft-floor「Real illustration or none」的插图标准对待。
|
||||
- **不适用**：UI 图标系统仍走 SVG（真图标库或手绘一致描边——icons are drawn，要可缩放可主题化）；需要精确几何的图形（图表、印章、格线）走 SVG。
|
||||
- 产物落 `<项目>/imgs/`（或 `<RUN>/assets/`）并进 S7 产物清单；生成图随首屏截图一起在停点 1.5 接受视觉复核（错字/形近字/认不出主体即重生成或退回 SVG）。
|
||||
- image_gen 是宿主能力不是上游 Skill，不进调用账本；**非 Codex runtime 不为此引入依赖**——维持 SVG 自绘，宿主另有图像能力（如本机 le-gpt-image）则由用户指示后使用。
|
||||
|
||||
「一等路径」的含义：frontend-design 是纯指导型 Skill，官方机制就是把它的 SKILL.md 全文装进执行上下文并照做。Read 原文 + `log_call.py --load` 记 sha256，与 Skill 工具装载等效且可审计——**不是降级**。降级只发生在 critique 的双评审（impeccable 自己的定义，见其 critique.md Hard Invariants）。
|
||||
|
||||
## 已知限制（如实告知用户，不静默吞掉）
|
||||
|
||||
1. **impeccable detect 只读 web markup**（HTML/JSX 等）。原生 Swift/Kotlin 源码扫不出东西——纯原生方案 critique 走 Assessment A 单评审（这是上游定义的完整方法，非降级）。本 Skill 交付形态固定为 Web 高保真原型，不受影响。
|
||||
2. **impeccable 二进制按平台分发**（本机 darwin-arm64 已带）。换机器跑 check_deps 会立刻发现缺 `scripts/impeccable` 或其 bin/ 子目录——按报告里的安装指引处理；上游 README 说明二进制会在首跑时按平台下载。
|
||||
3. **截图依赖本机 Chrome**。找不到时 S4/S5 的截图核对降级为 craft-floor 逐条人工核对 + 在 INTEGRATION-REPORT 的 Run Notes 声明，不静默跳过。
|
||||
4. **Windows**：impeccable 用 `scripts/impeccable.cmd`，python3 可能叫 `python`——check_deps/liveness 若失败按报告指引调整；其余逻辑不变。
|
||||
5. **上游版本漂移**：check_deps 记录的是路径 + 活性，不锁版本。上游大版本更新导致 playbook 接口变化时（如 critique.md 的命令名变了），S5 会暴露失败——按失败模式处理并报告，不猜测新接口。
|
||||
|
||||
## 路径解析优先级（check_deps 的顺序）
|
||||
|
||||
`$LE_APP_DESIGN_DEP_ROOTS`（冒号分隔，自定义安装位）→ `~/.agents/skills`（首选默认，与 impeccable SKILL.md 自引用路径一致）→ `~/.zcode/skills` → `~/.codex/skills` → `~/.claude/skills`。
|
||||
|
||||
同一机器多份副本时取优先级最高的一份并在 deps.json 记录实际路径；S2/S5 的命令一律用该路径，不硬编码。
|
||||
@@ -0,0 +1,223 @@
|
||||
#!/usr/bin/env python3
|
||||
"""le-app-design 硬依赖门：解析并活性检查三个上游 Skill。
|
||||
|
||||
用法:
|
||||
python3 check_deps.py [--out <RUN>/deps.json] [--quiet]
|
||||
|
||||
解析顺序: $LE_APP_DESIGN_DEP_ROOTS(冒号分隔) > ~/.agents/skills > ~/.zcode/skills
|
||||
> ~/.codex/skills > ~/.claude/skills
|
||||
（优先 ~/.agents/skills：impeccable 的 SKILL.md 自引用该路径。）
|
||||
|
||||
活性检查按依赖形态各自不同——这就是「真实调用形态」的机器定义:
|
||||
ui-ux-pro-max 真跑一次 search.py 检索（stdout 含结果段即活）
|
||||
frontend-design 校验 SKILL.md 原文完整可读（纯文档型 Skill，装载即调用）
|
||||
impeccable 跑其自包含二进制 --version
|
||||
|
||||
全部通过 exit 0；任何缺失/失活 exit 1 并输出明确报告。仅 python3 标准库。
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import argparse
|
||||
import hashlib
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
import subprocess
|
||||
import sys
|
||||
import tempfile
|
||||
from datetime import datetime, timezone
|
||||
from pathlib import Path
|
||||
|
||||
SKILL_KEY = "le-app-design-dep-check"
|
||||
|
||||
UPSTREAMS = [
|
||||
{
|
||||
"key": "ui-ux-pro-max",
|
||||
"repo": "nextlevelbuilder/ui-ux-pro-max-skill",
|
||||
"license": "MIT",
|
||||
"install": "git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill && 拷贝/链接其 .claude/skills/ui-ux-pro-max 到 ~/.agents/skills/ui-ux-pro-max",
|
||||
"kind": "cli-search",
|
||||
},
|
||||
{
|
||||
"key": "frontend-design",
|
||||
"repo": "anthropics/skills",
|
||||
"license": "Apache-2.0",
|
||||
"install": "git clone https://github.com/anthropics/skills && 拷贝/链接 skills/frontend-design 到 ~/.agents/skills/frontend-design",
|
||||
"kind": "doc-guidance",
|
||||
},
|
||||
{
|
||||
"key": "impeccable",
|
||||
"repo": "pbakaus/impeccable",
|
||||
"license": "Apache-2.0",
|
||||
"install": "git clone https://github.com/pbakaus/impeccable && 拷贝/链接到 ~/.agents/skills/impeccable（含 scripts/ 自包含二进制）",
|
||||
"kind": "cli-engine",
|
||||
},
|
||||
]
|
||||
|
||||
FRONTMATTER_MIN_BYTES = 2000 # frontend-design 原文约 10KB；残缺副本在此拦下
|
||||
|
||||
|
||||
def candidate_roots() -> list[Path]:
|
||||
roots: list[Path] = []
|
||||
env = os.environ.get("LE_APP_DESIGN_DEP_ROOTS", "")
|
||||
for part in env.split(os.pathsep):
|
||||
if part.strip():
|
||||
roots.append(Path(part).expanduser())
|
||||
home = Path.home()
|
||||
roots += [
|
||||
home / ".agents" / "skills",
|
||||
home / ".zcode" / "skills",
|
||||
home / ".codex" / "skills",
|
||||
home / ".claude" / "skills",
|
||||
]
|
||||
seen: set[str] = set()
|
||||
unique: list[Path] = []
|
||||
for r in roots:
|
||||
key = str(r)
|
||||
if key not in seen:
|
||||
seen.add(key)
|
||||
unique.append(r)
|
||||
return unique
|
||||
|
||||
|
||||
def read_frontmatter_name(skill_md: Path) -> str | None:
|
||||
try:
|
||||
text = skill_md.read_text(encoding="utf-8", errors="replace")
|
||||
except OSError:
|
||||
return None
|
||||
m = re.match(r"^---\s*\n(.*?\n)?---", text, re.DOTALL)
|
||||
if not m:
|
||||
return None
|
||||
block = m.group(1) or ""
|
||||
nm = re.search(r"^name:\s*['\"]?([A-Za-z0-9_-]+)", block, re.MULTILINE)
|
||||
return nm.group(1) if nm else None
|
||||
|
||||
|
||||
def resolve(key: str) -> tuple[Path | None, str]:
|
||||
"""返回 (解析到的目录, 说明)。"""
|
||||
for root in candidate_roots():
|
||||
dep_dir = root / key
|
||||
skill_md = dep_dir / "SKILL.md"
|
||||
if skill_md.is_file():
|
||||
name = read_frontmatter_name(skill_md)
|
||||
if name == key:
|
||||
return dep_dir, f"resolved at {dep_dir}"
|
||||
return dep_dir, f"SKILL.md frontmatter name={name!r} != {key!r}（目录在但身份不符）"
|
||||
return None, "not found in any candidate root"
|
||||
|
||||
|
||||
def _run(cmd: list[str], timeout: int = 90) -> subprocess.CompletedProcess:
|
||||
env = dict(os.environ, PYTHONDONTWRITEBYTECODE="1")
|
||||
return subprocess.run(
|
||||
cmd, capture_output=True, text=True, timeout=timeout, env=env
|
||||
)
|
||||
|
||||
|
||||
def liveness(spec: dict, dep_dir: Path) -> tuple[bool, str]:
|
||||
key, kind = spec["key"], spec["kind"]
|
||||
try:
|
||||
if kind == "cli-search":
|
||||
script = dep_dir / "scripts" / "search.py"
|
||||
if not script.is_file():
|
||||
return False, f"missing {script}"
|
||||
with tempfile.TemporaryDirectory() as td:
|
||||
proc = subprocess.run(
|
||||
[sys.executable, str(script), "mobile app", "--domain", "style", "-n", "1"],
|
||||
capture_output=True, text=True, timeout=90, cwd=td,
|
||||
env=dict(os.environ, PYTHONDONTWRITEBYTECODE="1"),
|
||||
)
|
||||
if proc.returncode != 0:
|
||||
return False, f"search.py exit={proc.returncode}: {proc.stderr.strip()[:300]}"
|
||||
if "Result" not in proc.stdout:
|
||||
return False, "search.py exit=0 but no result section in stdout"
|
||||
return True, "search.py live query ok"
|
||||
|
||||
if kind == "doc-guidance":
|
||||
skill_md = dep_dir / "SKILL.md"
|
||||
try:
|
||||
data = skill_md.read_bytes()
|
||||
except OSError as e:
|
||||
return False, f"unreadable SKILL.md: {e}"
|
||||
if len(data) < FRONTMATTER_MIN_BYTES:
|
||||
return False, f"SKILL.md only {len(data)} bytes (<{FRONTMATTER_MIN_BYTES}); likely truncated copy"
|
||||
text = data.decode("utf-8", errors="replace")
|
||||
if "name: frontend-design" not in text or "description:" not in text:
|
||||
return False, "SKILL.md frontmatter incomplete"
|
||||
return True, f"original SKILL.md intact ({len(data)} bytes, sha256 {hashlib.sha256(data).hexdigest()[:12]}…)"
|
||||
|
||||
if kind == "cli-engine":
|
||||
launcher = dep_dir / "scripts" / "impeccable"
|
||||
if not launcher.is_file():
|
||||
return False, f"missing launcher {launcher}"
|
||||
proc = _run(["sh", str(launcher), "--version"])
|
||||
if proc.returncode != 0:
|
||||
return False, f"impeccable --version exit={proc.returncode}: {proc.stderr.strip()[:300]}"
|
||||
version = (proc.stdout or "").strip() or (proc.stderr or "").strip()
|
||||
return True, f"impeccable binary ok ({version[:60]})"
|
||||
except subprocess.TimeoutExpired:
|
||||
return False, f"{key} liveness check timed out"
|
||||
except OSError as e:
|
||||
return False, f"liveness check error: {e}"
|
||||
return False, "unknown kind"
|
||||
|
||||
|
||||
def main() -> int:
|
||||
ap = argparse.ArgumentParser(description="le-app-design 依赖门")
|
||||
ap.add_argument("--out", help="JSON 结果写入路径（如 <RUN>/deps.json）")
|
||||
ap.add_argument("--quiet", action="store_true", help="只输出摘要一行")
|
||||
args = ap.parse_args()
|
||||
|
||||
result = {
|
||||
"skill": SKILL_KEY,
|
||||
"ts": datetime.now(timezone.utc).isoformat(timespec="seconds"),
|
||||
"roots_searched": [str(r) for r in candidate_roots()],
|
||||
"deps": {},
|
||||
"ok": False,
|
||||
}
|
||||
|
||||
for spec in UPSTREAMS:
|
||||
dep_dir, note = resolve(spec["key"])
|
||||
entry = {
|
||||
"repo": spec["repo"],
|
||||
"license": spec["license"],
|
||||
"kind": spec["kind"],
|
||||
"path": str(dep_dir) if dep_dir else None,
|
||||
"alive": False,
|
||||
"check": note if dep_dir is None else "",
|
||||
"install": spec["install"],
|
||||
}
|
||||
if dep_dir is not None:
|
||||
alive, check = liveness(spec, dep_dir)
|
||||
entry["alive"] = alive
|
||||
entry["check"] = check
|
||||
result["deps"][spec["key"]] = entry
|
||||
|
||||
result["ok"] = all(d["alive"] for d in result["deps"].values())
|
||||
|
||||
if args.out:
|
||||
out_path = Path(args.out).expanduser()
|
||||
out_path.parent.mkdir(parents=True, exist_ok=True)
|
||||
out_path.write_text(json.dumps(result, ensure_ascii=False, indent=2), encoding="utf-8")
|
||||
|
||||
lines = []
|
||||
for key, d in result["deps"].items():
|
||||
mark = "✅" if d["alive"] else "❌"
|
||||
where = d["path"] or "未找到"
|
||||
lines.append(f"{mark} {key:18} {where}")
|
||||
if not d["alive"]:
|
||||
lines.append(f" 原因: {d['check']}")
|
||||
lines.append(f" 安装: {d['install']}")
|
||||
verdict = "依赖门通过（三方解析且活性正常）" if result["ok"] else "依赖门未通过——禁止继续设计流程"
|
||||
if args.quiet:
|
||||
print(f"{'PASS' if result['ok'] else 'FAIL'}: " + ", ".join(
|
||||
f"{k}={'ok' if v['alive'] else 'MISSING'}" for k, v in result["deps"].items()))
|
||||
else:
|
||||
print("\n".join(lines))
|
||||
print(verdict)
|
||||
if args.out:
|
||||
print(f"JSON: {args.out}")
|
||||
return 0 if result["ok"] else 1
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
sys.exit(main())
|
||||
@@ -0,0 +1,171 @@
|
||||
#!/usr/bin/env python3
|
||||
"""le-app-design 验收门：从 calls.jsonl 生成本次运行的集成证据报告。
|
||||
|
||||
用法:
|
||||
python3 evidence_report.py --run-dir <RUN> [--out <RUN>/INTEGRATION-REPORT.md] \
|
||||
[--artifact <路径>]... [--title "任务名"] \
|
||||
[--require "dep[:note前缀],..."]
|
||||
|
||||
验收规则（硬门）:
|
||||
默认要求三个上游 ui-ux-pro-max / frontend-design / impeccable 各 ≥1 条成功调用
|
||||
（exec 且 exit_code==0，或 load 且 exit_code==0）。
|
||||
轻量路由用 --require 指定参与该路由的上游子集，如仅审查任务:
|
||||
--require "impeccable"
|
||||
每项可带 note 前缀限定履职阶段，防止非履职调用（如 S2-research 调研检索）
|
||||
混过门，如完整流程的严格口径:
|
||||
--require "ui-ux-pro-max:S3-,frontend-design:S2-,impeccable"
|
||||
--artifact 指定的每个文件必须存在。
|
||||
任一不满足 → 报告标 FAIL，exit 1；全满足 → PASS，exit 0。
|
||||
|
||||
报告内容: 判定横幅、调用统计表、逐条调用清单（时间/依赖/命令/退出码）、
|
||||
产物核验清单、失败与缺口说明。这份报告就是「真实集成」的可检查证据。
|
||||
仅 python3 标准库。
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import argparse
|
||||
import json
|
||||
import sys
|
||||
from datetime import datetime, timezone
|
||||
from pathlib import Path
|
||||
|
||||
GATE_DEPS = ["ui-ux-pro-max", "frontend-design", "impeccable"]
|
||||
|
||||
|
||||
def load_records(ledger: Path) -> list[dict]:
|
||||
if not ledger.is_file():
|
||||
return []
|
||||
records = []
|
||||
for line in ledger.read_text(encoding="utf-8", errors="replace").splitlines():
|
||||
line = line.strip()
|
||||
if not line:
|
||||
continue
|
||||
try:
|
||||
rec = json.loads(line)
|
||||
except json.JSONDecodeError:
|
||||
records.append({"dep": "(unparsable)", "kind": "raw", "exit_code": None, "command": line[:120], "ts": ""})
|
||||
continue
|
||||
records.append(rec)
|
||||
return records
|
||||
|
||||
|
||||
def is_success(rec: dict) -> bool:
|
||||
return rec.get("exit_code") == 0 and rec.get("kind") in ("exec", "load")
|
||||
|
||||
|
||||
def one_line(rec: dict) -> str:
|
||||
cmd = rec.get("command", "")
|
||||
try: # exec 记录的 command 是 JSON 数组字符串
|
||||
parts = json.loads(cmd)
|
||||
if isinstance(parts, list):
|
||||
cmd = " ".join(str(p) for p in parts)
|
||||
except (json.JSONDecodeError, TypeError):
|
||||
pass
|
||||
return cmd if len(cmd) <= 160 else cmd[:157] + "..."
|
||||
|
||||
|
||||
def main() -> int:
|
||||
ap = argparse.ArgumentParser(description="le-app-design 验收门")
|
||||
ap.add_argument("--run-dir", required=True)
|
||||
ap.add_argument("--out", default=None, help="报告写入路径，缺省 <run-dir>/INTEGRATION-REPORT.md")
|
||||
ap.add_argument("--artifact", action="append", default=[], help="须存在的交付物路径（可多次）")
|
||||
ap.add_argument("--title", default="le-app-design 集成证据报告")
|
||||
ap.add_argument("--require", default=None,
|
||||
help='门规格 "dep[:note前缀],..."；缺省=三个上游全部、不限前缀。轻量路由传子集')
|
||||
args = ap.parse_args()
|
||||
|
||||
# 解析门规格：dep[:note-prefix]
|
||||
gate: dict[str, str | None] = {}
|
||||
if args.require:
|
||||
for item in args.require.split(","):
|
||||
item = item.strip()
|
||||
if not item:
|
||||
continue
|
||||
dep, _, prefix = item.partition(":")
|
||||
gate[dep] = prefix or None
|
||||
else:
|
||||
gate = {dep: None for dep in GATE_DEPS}
|
||||
|
||||
run_dir = Path(args.run_dir).expanduser()
|
||||
records = load_records(run_dir / "calls.jsonl")
|
||||
out_path = Path(args.out).expanduser() if args.out else run_dir / "INTEGRATION-REPORT.md"
|
||||
|
||||
stats = {dep: {"ok": 0, "fail": 0} for dep in gate}
|
||||
for rec in records:
|
||||
dep = rec.get("dep")
|
||||
if dep in stats:
|
||||
stats[dep]["ok" if is_success(rec) else "fail"] += 1
|
||||
|
||||
def gate_ok(dep: str) -> bool:
|
||||
prefix = gate[dep]
|
||||
if prefix is None:
|
||||
return stats[dep]["ok"] >= 1
|
||||
return any(
|
||||
is_success(rec) and str(rec.get("note", "")).startswith(prefix)
|
||||
for rec in records if rec.get("dep") == dep
|
||||
)
|
||||
|
||||
gate_pass = all(gate_ok(dep) for dep in gate)
|
||||
artifacts_missing = [a for a in args.artifact if not Path(a).expanduser().exists()]
|
||||
overall = gate_pass and not artifacts_missing
|
||||
|
||||
lines: list[str] = []
|
||||
lines.append(f"# {args.title}")
|
||||
lines.append("")
|
||||
lines.append(f"- 运行目录: `{run_dir}`")
|
||||
lines.append(f"- 生成时间: {datetime.now(timezone.utc).isoformat(timespec='seconds')}")
|
||||
lines.append(f"- 调用记录: {len(records)} 条（`calls.jsonl`）")
|
||||
lines.append("")
|
||||
lines.append(f"## 判定: {'✅ PASS' if overall else '❌ FAIL'}")
|
||||
lines.append("")
|
||||
lines.append("| 上游 | 成功调用 | 失败调用 | 门(≥1 成功) |")
|
||||
lines.append("|---|---|---|---|")
|
||||
for dep in gate:
|
||||
s = stats[dep]
|
||||
req = f"（限 note={gate[dep]}*）" if gate[dep] else ""
|
||||
lines.append(f"| {dep}{req} | {s['ok']} | {s['fail']} | {'✅' if gate_ok(dep) else '❌ 未被真实调用'} |")
|
||||
lines.append("")
|
||||
|
||||
if artifacts_missing:
|
||||
lines.append("**缺失产物:**")
|
||||
for a in artifacts_missing:
|
||||
lines.append(f"- ❌ `{a}`")
|
||||
lines.append("")
|
||||
elif args.artifact:
|
||||
lines.append("**产物核验:**")
|
||||
for a in args.artifact:
|
||||
lines.append(f"- ✅ `{a}`")
|
||||
lines.append("")
|
||||
|
||||
lines.append("## 调用清单")
|
||||
lines.append("")
|
||||
lines.append("| # | 时间(UTC) | 依赖 | 类型 | 退出码 | 命令/装载 |")
|
||||
lines.append("|---|---|---|---|---|---|")
|
||||
for i, rec in enumerate(records, 1):
|
||||
lines.append(
|
||||
f"| {i} | {rec.get('ts', '')} | {rec.get('dep', '?')} | {rec.get('kind', '?')} "
|
||||
f"| {rec.get('exit_code', '?')} | `{one_line(rec)}` |"
|
||||
)
|
||||
lines.append("")
|
||||
|
||||
if not overall:
|
||||
lines.append("## 缺口说明")
|
||||
lines.append("")
|
||||
for dep in gate:
|
||||
if not gate_ok(dep):
|
||||
prefix = f"（履职阶段 note={gate[dep]}*）" if gate[dep] else ""
|
||||
lines.append(f"- `{dep}` 无成功调用记录{prefix}——该上游未被真实使用，本次流程**不得标记为成功**。")
|
||||
for a in artifacts_missing:
|
||||
lines.append(f"- 产物缺失: `{a}`")
|
||||
lines.append("")
|
||||
|
||||
report = "\n".join(lines)
|
||||
out_path.parent.mkdir(parents=True, exist_ok=True)
|
||||
out_path.write_text(report + "\n", encoding="utf-8")
|
||||
print(report)
|
||||
print(f"\n[report] {'PASS' if overall else 'FAIL'} → {out_path}", file=sys.stderr)
|
||||
return 0 if overall else 1
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
sys.exit(main())
|
||||
@@ -0,0 +1,140 @@
|
||||
#!/usr/bin/env python3
|
||||
"""le-app-design 证据账本：所有对上游 Skill 的真实调用经此包裹，落入 calls.jsonl。
|
||||
|
||||
用法:
|
||||
执行型调用（CLI 类上游）:
|
||||
python3 log_call.py <dep> --run-dir <RUN> -- python3 <DEP>/scripts/search.py "…" --design-system
|
||||
装载型调用（文档型上游 / playbook）:
|
||||
python3 log_call.py <dep> --run-dir <RUN> --load <DEP>/SKILL.md
|
||||
|
||||
dep ∈ {ui-ux-pro-max, frontend-design, impeccable, le-app-design(自检)}
|
||||
--run-dir 缺省时按序: $LE_APP_DESIGN_RUN_DIR > <cwd>/le-app-design-runs/<UTC 时间戳>-run/
|
||||
|
||||
行为:
|
||||
- exec: 运行命令，透传 stdout/stderr，透传退出码；成功失败都记账。
|
||||
- load: 读文件记 sha256 与字节数（证明用的是原文而非转述），文件缺失记 FAIL 退出 1。
|
||||
- 记录字段: ts / dep / kind / command / exit_code / duration_ms / stdout_tail /
|
||||
stderr_tail / bytes / sha256 / note。stdout/stderr 仅保留尾部 4000 字符防账本膨胀。
|
||||
|
||||
仅 python3 标准库。
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import argparse
|
||||
import hashlib
|
||||
import json
|
||||
import os
|
||||
import subprocess
|
||||
import sys
|
||||
import time
|
||||
from datetime import datetime, timezone
|
||||
from pathlib import Path
|
||||
|
||||
TAIL = 4000
|
||||
KNOWN_DEPS = {"ui-ux-pro-max", "frontend-design", "impeccable", "le-app-design"}
|
||||
|
||||
|
||||
def default_run_dir() -> Path:
|
||||
env = os.environ.get("LE_APP_DESIGN_RUN_DIR")
|
||||
if env:
|
||||
return Path(env).expanduser()
|
||||
stamp = datetime.now(timezone.utc).strftime("%Y%m%d-%H%M%SZ")
|
||||
return Path.cwd() / "le-app-design-runs" / f"{stamp}-run"
|
||||
|
||||
|
||||
def append_record(run_dir: Path, record: dict) -> Path:
|
||||
run_dir.mkdir(parents=True, exist_ok=True)
|
||||
ledger = run_dir / "calls.jsonl"
|
||||
with ledger.open("a", encoding="utf-8") as f:
|
||||
f.write(json.dumps(record, ensure_ascii=False) + "\n")
|
||||
return ledger
|
||||
|
||||
|
||||
def confirm(dep: str, kind: str, status: str, ledger: Path, extra: str = "") -> None:
|
||||
print(
|
||||
f"[log_call] {dep} {kind} {status} → {ledger}"
|
||||
+ (f" ({extra})" if extra else ""),
|
||||
file=sys.stderr,
|
||||
)
|
||||
|
||||
|
||||
def main() -> int:
|
||||
# 手工在第一个裸 "--" 处切分：argparse 的 REMAINDER 会把 -- 之前的选项误吞进命令
|
||||
argv = sys.argv[1:]
|
||||
cmd: list[str] = []
|
||||
if "--" in argv:
|
||||
split = argv.index("--")
|
||||
argv, cmd = argv[:split], argv[split + 1:]
|
||||
|
||||
ap = argparse.ArgumentParser(description="le-app-design 调用账本")
|
||||
ap.add_argument("dep", help="上游标识: ui-ux-pro-max | frontend-design | impeccable | le-app-design")
|
||||
ap.add_argument("--run-dir", default=None, help="运行目录（缺省自动创建）")
|
||||
ap.add_argument("--note", default="", help="阶段/用途备注，如 S2-design-system")
|
||||
ap.add_argument("--load", metavar="PATH", default=None, help="装载型调用：记录读取的原文文件")
|
||||
args = ap.parse_args(argv)
|
||||
|
||||
dep = args.dep
|
||||
if dep not in KNOWN_DEPS:
|
||||
print(f"[log_call] 未知依赖标识 {dep!r}；允许: {sorted(KNOWN_DEPS)}", file=sys.stderr)
|
||||
return 2
|
||||
|
||||
run_dir = Path(args.run_dir).expanduser() if args.run_dir else default_run_dir()
|
||||
base = {"ts": datetime.now(timezone.utc).isoformat(timespec="seconds"), "dep": dep, "note": args.note}
|
||||
|
||||
if args.load:
|
||||
path = Path(args.load).expanduser()
|
||||
rec = dict(base, kind="load", command=f"load:{path}")
|
||||
try:
|
||||
data = path.read_bytes()
|
||||
except OSError as e:
|
||||
rec.update(exit_code=1, stderr_tail=f"read failed: {e}"[:TAIL])
|
||||
ledger = append_record(run_dir, rec)
|
||||
confirm(dep, "load", "FAIL", ledger, str(e))
|
||||
return 1
|
||||
rec.update(
|
||||
exit_code=0,
|
||||
bytes=len(data),
|
||||
sha256=hashlib.sha256(data).hexdigest(),
|
||||
)
|
||||
ledger = append_record(run_dir, rec)
|
||||
confirm(dep, "load", "OK", ledger, f"{len(data)} bytes sha256:{rec['sha256'][:12]}…")
|
||||
return 0
|
||||
|
||||
if not cmd:
|
||||
print("[log_call] 需要 --load PATH 或 -- <命令…>", file=sys.stderr)
|
||||
return 2
|
||||
|
||||
rec = dict(base, kind="exec", command=json.dumps(cmd, ensure_ascii=False))
|
||||
t0 = time.monotonic()
|
||||
try:
|
||||
proc = subprocess.run(
|
||||
cmd, capture_output=True, text=True, timeout=900,
|
||||
env=dict(os.environ, PYTHONDONTWRITEBYTECODE="1"),
|
||||
)
|
||||
rc, out, err = proc.returncode, proc.stdout or "", proc.stderr or ""
|
||||
except subprocess.TimeoutExpired as e:
|
||||
rc, out, err = 124, (e.stdout or b"").decode(errors="replace") if isinstance(e.stdout, bytes) else (e.stdout or ""), f"timeout after {e.timeout}s"
|
||||
except FileNotFoundError as e:
|
||||
rc, out, err = 127, "", f"command not found: {e}"
|
||||
|
||||
rec.update(
|
||||
exit_code=rc,
|
||||
duration_ms=int((time.monotonic() - t0) * 1000),
|
||||
stdout_tail=out[-TAIL:],
|
||||
stderr_tail=err[-TAIL:],
|
||||
)
|
||||
ledger = append_record(run_dir, rec)
|
||||
if out:
|
||||
sys.stdout.write(out)
|
||||
if not out.endswith("\n"):
|
||||
sys.stdout.write("\n")
|
||||
if err:
|
||||
sys.stderr.write(err)
|
||||
if not err.endswith("\n"):
|
||||
sys.stderr.write("\n")
|
||||
confirm(dep, "exec", f"exit={rc}", ledger, f"{rec['duration_ms']}ms")
|
||||
return rc
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
sys.exit(main())
|
||||
@@ -0,0 +1,67 @@
|
||||
# Le SPEC
|
||||
|
||||
> 智能需求分析与 SPEC 生成总控：把模糊、零散、矛盾的想法，经**真实集成的** Grill 深度访谈、Think 方案挑战、OpenSpec 规格工程，转化为可执行、可测试的正式 SPEC。VibeCoding / AI Coding 工作流的需求工程入口。
|
||||
|
||||
**状态**：rigorous 档 ｜ **正式名称 Le SPEC，技术标识 `le-spec`** ｜ 优先适配 Codex，兼容 ZCode / Claude Code
|
||||
|
||||
## 它解决什么问题
|
||||
|
||||
你有一堆没想清楚的想法（甚至互相矛盾），直接丢给 Coding Agent 会得到一堆它自行猜测的「需求」。Le SPEC 在编码之前接管：先访谈把该想清楚的想清楚，再挑战不合理方案，最后产出结构化的 OpenSpec 规格（产品需求 / 技术设计 / 开发任务三分离），让 Coding Agent 不用猜。
|
||||
|
||||
## 架构：真实集成，不是借鉴
|
||||
|
||||
| 引擎 | 来源 | 在 Le SPEC 中的职责 | 调用方式 |
|
||||
|---|---|---|---|
|
||||
| grilling (+ domain-modeling) | [mattpocock/skills](https://github.com/mattpocock/skills) | Phase 2 深度访谈：design tree / frontier 轮次 / 推荐答案 | Skill 工具按名调用，或 Read 其原始 SKILL.md 遵循原义；记调用账本 |
|
||||
| think | [tw93/Waza](https://github.com/tw93/Waza) | Phase 3 方案分析：单一推荐、Simplicity Gate、premise collapse | 同上 |
|
||||
| openspec CLI + skills | [Fission-AI/OpenSpec](https://github.com/Fission-AI/OpenSpec) | Phase 5 规格生成（proposal/specs/design/tasks）、validate、变更与归档 | `openspec` CLI 真实执行（new change / instructions / validate） |
|
||||
|
||||
「真实调用」的证据是**调用账本**（项目内 `openspec/le-spec/ledger.jsonl`）：每次依赖交互记录 dep/kind/method/cmd/exit。审查与交付阶段核对账本，无账本条目视为未发生。协议细节见 [references/dependencies.md](references/dependencies.md)。
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
# 1. 依赖（一次性；skills.sh 落 ~/.agents/skills，软链各 runtime）
|
||||
npx skills@latest add mattpocock/skills --skill grilling grill-me grill-with-docs domain-modeling -g -a claude-code codex
|
||||
npx skills@latest add tw93/Waza --skill think -g -a claude-code codex
|
||||
npx skills@latest add Fission-AI/OpenSpec --skill openspec-propose openspec-new-change openspec-update-change openspec-verify-change openspec-archive-change openspec-apply-change openspec-explore -g -a claude-code codex
|
||||
npm install -g @fission-ai/openspec@latest
|
||||
|
||||
# 2. 本 skill（MetaSkill 仓库真源 + 软链）
|
||||
ln -sfn <本仓库路径>/skills/le-spec ~/.agents/skills/le-spec
|
||||
|
||||
# 3. 验证
|
||||
python3 ~/.agents/skills/le-spec/scripts/deps_check.py # required 全绿 exit 0
|
||||
```
|
||||
|
||||
目标项目无需预装 OpenSpec：Phase 5 检测到无根时会征求用户意见再 `openspec init`。
|
||||
|
||||
## 使用
|
||||
|
||||
自然语言直接开始，例如：
|
||||
|
||||
- 「帮我把这个想法整理成 spec：我想做一个……」（零散长文也行，直接贴）
|
||||
- 「先 grill 我一下，把这个功能想透」
|
||||
- 「需求变了，更新之前那个 spec」
|
||||
|
||||
中断随时可恢复：状态存 `<项目>/openspec/le-spec/state.md`，新会话说「继续上次的 le-spec 分析」即可。产出批准后：实现交给 Coding Agent（openspec-apply-change 工作流），需求变更走 openspec-update-change，完成归档 openspec-archive-change。
|
||||
|
||||
## 工作流（逻辑七阶段，按复杂度自适应压缩）
|
||||
|
||||
```
|
||||
0 识别分级 → 1 需求结构化(十类分拣) → 2 Grill 访谈(动态轮次·每4轮检查点·收敛即停)
|
||||
→ 3 Think 挑战(有分歧才进) → 4 反向验收(独立工程师视角找"还得猜什么")
|
||||
→ 5 OpenSpec 生成(validate 通过) → 6 四视角独立审查 → 7 用户批准(硬停点)
|
||||
```
|
||||
|
||||
详见 [SKILL.md](SKILL.md) 与 [references/](references/)。
|
||||
|
||||
## 安全边界
|
||||
|
||||
- 未经用户明确批准不进入实现（Phase 7 回合终止硬停点）。
|
||||
- required 依赖缺失 → 停止并给安装命令，不以模拟调用冒充。
|
||||
- 不编造业务规则/验收标准；AI 推荐方案标 [建议]，不冒充已批准。
|
||||
|
||||
## 已知限制
|
||||
|
||||
见 [reports/test-report.md](reports/test-report.md)（测试 A-I 执行记录与未验证项）。
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
name: le-spec
|
||||
description: |
|
||||
Le SPEC —— 智能需求分析与 SPEC 生成总控：把模糊、零散、矛盾的自然语言想法，经真实集成的 Grill 深度访谈、Think 方案挑战、OpenSpec 规格工程，转化为可执行、可测试的正式 SPEC。
|
||||
何时触发：用户想从想法或零散需求出发，先梳理清楚再开发（"帮我把这个想法整理成 spec""我要做个 App，先分析下需求""这些需求有点乱，帮我梳理""先想清楚再写代码""来一场需求访谈""write a spec""refine these requirements"）；提到 grill / openspec / 需求工程 / SPEC 生成；已有项目新增功能或变更需求要走规格（"给这个功能写个 spec""需求变了，更新规格"）。
|
||||
不要触发：已批准 SPEC 的实现与编码（交给 Coding Agent / openspec-apply-change）；纯 PRD/需求文档的润色与排版；与需求澄清无关的普通文档写作；用户明说"别做 spec、直接写代码、直接改代码"。
|
||||
metadata:
|
||||
author: Leroy
|
||||
version: "1.0.0"
|
||||
runtimes: zcode, claude-code, codex
|
||||
requires: grilling + grill-me/grill-with-docs + domain-modeling (mattpocock/skills), think (tw93/Waza), openspec CLI + openspec-* skills (Fission-AI/OpenSpec)
|
||||
---
|
||||
|
||||
# Le SPEC —— 需求分析与 SPEC 生成总控
|
||||
|
||||
用户负责表达意图与做关键决策；你负责理解、挖掘、思考、推荐、整理与验证。
|
||||
产出物不是"更漂亮的需求文档"，而是**在开始编码前把该想清楚的都想清楚**的正式 SPEC。
|
||||
|
||||
## 三条铁律（先于一切流程）
|
||||
|
||||
1. **真实调用，不冒充。** 访谈必须真实加载 `grilling` 原文并遵循其 design-tree/frontier 机制；方案分析必须真实加载 `think` 原文；规格必须经 `openspec` CLI 生成与校验。禁止用自拟提示词模拟依赖行为。每次依赖交互记入调用账本（见下），无账本条目视为未发生。
|
||||
2. **不重复、不复盘。** 已确认的决策写入状态文件后，后续任何阶段（Think / 验收 / 审查）只消费不重问；发现新不确定性时做**针对性**追问，不重启流程。
|
||||
3. **批准前不编码。** Phase 7 是回合终止硬停点：向用户呈交确认包后终止回合，未经用户明确批准，不得创建/修改任何实现代码，不得执行 openspec-apply-change。
|
||||
|
||||
## 阶段机
|
||||
|
||||
| 阶段 | 做什么 | 依赖调用 | 退出条件 |
|
||||
|---|---|---|---|
|
||||
| 0 识别 | 判项目类型、只读检查、复杂度分级 | `openspec context --json`（探测已有根） | 复杂度定档、上下文清单成形 |
|
||||
| 1 理解 | 原始需求结构化（十类分拣） | — | `state.md` 初始化完成 |
|
||||
| 2 访谈 | Grill 深度访谈 | **grilling**；已有代码库时叠加 **domain-modeling** | 收敛标准满足（见 workflow.md） |
|
||||
| 3 方案 | 方案分析与挑战 | **think**（无实质分歧可跳过） | 推荐方案获用户确认 |
|
||||
| 4 验收 | 需求反向验收（独立工程师视角） | 独立子代理（fresh context） | 无 blocking 级未决问题 |
|
||||
| 5 规格 | OpenSpec 生成正式 SPEC | **openspec CLI** + openspec-propose/new-change 工作流 | artifacts 齐全且 `validate` 通过 |
|
||||
| 6 审查 | SPEC 独立质量审查（四视角） | 独立子代理 + `openspec validate` | 审查问题清零或降为非阻塞 |
|
||||
| 7 交接 | 用户确认与交接 | — | 用户明确批准 → 交给 Coding Agent |
|
||||
|
||||
- 每阶段详细规程：[workflow.md](references/workflow.md)
|
||||
- 依赖真实调用协议：[dependencies.md](references/dependencies.md)（**Phase 2/3/5 入口必读**）
|
||||
- Phase 4 规程：[acceptance.md](references/acceptance.md)；Phase 6 规程：[review.md](references/review.md)
|
||||
|
||||
阶段是逻辑流不是机械串行：simple 档压缩执行（见 workflow.md 复杂度分档），用户可随时切换讨论模块、修改需求、查看草稿——但**只能向前跳过 AI 侧环节，不能跳过用户确认停点**。
|
||||
|
||||
## 启动协议（每次触发本 skill 时）
|
||||
|
||||
1. 定位项目 OpenSpec 根：`openspec context --json`。有根且存在 `<root>/openspec/le-spec/state.md` → 读状态，从其「下一步」恢复，不重做已完成阶段。
|
||||
2. 无状态文件 → 全新分析：跑 `python3 <skill_dir>/scripts/deps_check.py` 检查依赖（见铁律 1）。缺失 required 级依赖 → 停止并给出精确安装命令（见 dependencies.md），不得以降级模拟继续。
|
||||
3. 按 Phase 0 → 1 进入。
|
||||
|
||||
## 状态与账本（持久化，跨会话恢复）
|
||||
|
||||
- `<root>/openspec/le-spec/state.md` —— 阶段、已确认决策、否定方案、开放问题、假设、下一步、访谈轮次计数。每轮重要交互后增量更新；用户变更需求时记录影响范围。
|
||||
- `<root>/openspec/le-spec/ledger.jsonl` —— 调用账本，经 `scripts/ledger.py append` 记录每次依赖交互（dep / kind / cmd / exit / summary）。Phase 7 交付与 Phase 6 审查以账本为真实调用证据。
|
||||
- 项目无 OpenSpec 根时暂用 `.le-spec/` 存放，待 Phase 5 init 后迁移。
|
||||
|
||||
## 停手点（回合终止硬约束）
|
||||
|
||||
1. 依赖检查失败 → 停，给安装指引。
|
||||
2. Phase 2 每轮问完 → 终止回合等用户回答；Phase 3 推荐方案给出 → 等用户决断。
|
||||
3. Phase 4 发现 blocking 问题 → 终止回合，向用户澄清后才能进 Phase 5。
|
||||
4. Phase 7 呈交确认包 → **终止回合**；未获明确批准不得动实现代码。
|
||||
5. 用户要求删除/重写已批准 SPEC 的大范围内容 → 停，先确认影响范围。
|
||||
|
||||
## 反例黑名单
|
||||
|
||||
- 不把临时想法当已确认需求，不把 AI 推荐方案当用户已批准。
|
||||
- 不为凑轮数追问，也不为省事跳过 blocking 问题。
|
||||
- 不在 SPEC 里编造业务规则、验收标准或技术约束。
|
||||
- 不把产品需求、技术设计、开发任务混写进一个文件（OpenSpec 三 artifact 天然分离，遵循它）。
|
||||
- 不在旧会话假设新装依赖"应该可用"——调用前先 deps_check 或确认账本路径可写。
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"_说明": "Le SPEC 触发用例。应触发：从想法/零散需求出发要梳理成规格；不应触发：已批准 SPEC 的实现、纯文案、无关任务。family 标注场景族。",
|
||||
"recommended_threshold": 0.3,
|
||||
"negative_patterns": ["直接写代码", "直接改代码", "别做 spec", "别做访谈", "润色", "排版", "只要总结", "翻译一下", "帮我实现"],
|
||||
"should_trigger": [
|
||||
{"text": "帮我把这个想法整理成 spec，我想做一个记账 App", "family": "idea_to_spec"},
|
||||
{"text": "这些需求有点乱，你先帮我梳理梳理，想清楚了再动手", "family": "messy_requirements"},
|
||||
{"text": "我要做个 App，先分析下需求，来一场深度访谈", "family": "explicit_interview"},
|
||||
{"text": "用 openspec 给这个新功能写个正式的规格", "family": "openspec_named"},
|
||||
{"text": "先 grill 我一下，把这个方案想透再写规格", "family": "grill_named"},
|
||||
{"text": "需求变了，把之前批准的 spec 更新一下，加一个导出功能", "family": "spec_change"},
|
||||
{"text": "refine these rough requirements into a testable spec", "family": "en_trigger"}
|
||||
],
|
||||
"should_not_trigger": [
|
||||
{"text": "spec 已经批了，现在开始实现 tasks 里的任务吧", "family": "implementation_phase"},
|
||||
{"text": "帮我把这份 PRD 润色一下排版更好看", "family": "doc_polish"},
|
||||
{"text": "这段代码有个 bug，帮我修一下", "family": "unrelated_task"},
|
||||
{"text": "别做 spec 了直接改代码，改完告诉我就行", "family": "explicit_skip"}
|
||||
],
|
||||
"near_neighbor": [
|
||||
{"text": "帮我把这个想法整理成 skill", "family": "meta_confusion_should_route_le_meta_skill"}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
# Phase 4：需求反向验收规程
|
||||
|
||||
**问题意识**：Phase 4 检查的不是"文档漂不漂亮"，而是**需求是否明确到足以形成规格**。核心一问：
|
||||
|
||||
> "一个完全没有参与讨论的资深工程师现在接手开发，哪些重要产品行为仍然需要他自己猜测？哪些必须回头找需求负责人确认？"
|
||||
|
||||
## 执行方式（按优先级）
|
||||
|
||||
1. **子代理独立审查（首选）**：用 Agent 工具派 fresh-context 子代理（general-purpose 或 Explore）。提示词要点：
|
||||
- 角色：资深开发工程师，第一次见到这个项目；
|
||||
- 输入：只给 state.md 路径（+ 已有 openspec specs 路径，如有）——**不给会话历史、不给 Le SPEC 的阶段叙事**，确保视角独立；
|
||||
- 任务：逐条检查下列清单，输出"我会被迫猜测/必须确认"的清单，每条注明影响哪个功能点与后果严重度；
|
||||
- 产出格式：问题列表（问题/影响/严重度建议/建议澄清方式）。
|
||||
2. **无子代理能力时的降级**：自审前显式重置角色（"放下前文立场，作为首次接手的工程师仅凭 state.md 判断"），只允许引用 state.md 与项目文件内容。**必须在产出中声明"本轮为同上下文自审，独立性弱于子代理审查"**——不装作独立。
|
||||
|
||||
## 检查清单
|
||||
|
||||
- [ ] 用户流程有断点（走不到下一步/回不去）
|
||||
- [ ] 功能之间缺关联规则（A 发生时 B 如何）
|
||||
- [ ] 数据关系歧义（谁拥有谁、一对多还是多对多、删除级联）
|
||||
- [ ] 状态机不完整（缺状态、缺转换、缺终态）
|
||||
- [ ] 权限与业务边界不明（谁能做什么、越界怎样）
|
||||
- [ ] 异常场景缺处理原则（失败/超时/并发/空数据）
|
||||
- [ ] 需求间冲突（同一对象两种定义）
|
||||
- [ ] 未经确认的重要默认假设（state.md 里的 [默认] 项逐条复核用户知情度）
|
||||
- [ ] 验收判据缺失（做完了怎么算"对"）
|
||||
|
||||
## 分级与处置
|
||||
|
||||
| 级别 | 判定 | 处置 |
|
||||
|---|---|---|
|
||||
| blocking | 不澄清就无法实现核心行为 / 两种理解导致完全不同的产品 | 终止回合向用户澄清（用 grilling 单轮格式，记账本） |
|
||||
| major | 影响正确性但可从已确认决策推导 | 推导入 state.md 并标注依据；推导不了升 blocking |
|
||||
| minor | 边缘场景、可延后 | 记开放问题，进 SPEC 的"非阻塞事项" |
|
||||
|
||||
更新后**只复核受影响项**，不重跑全清单。清零 blocking → 进 Phase 5。
|
||||
@@ -0,0 +1,100 @@
|
||||
# 依赖真实调用协议
|
||||
|
||||
Le SPEC 的价值建立在三个外部能力**真实运行**之上。本文件定义每个依赖的本体位置、调用条件、调用方式、上下文交接与失败处理。
|
||||
|
||||
## 0. 调用方式总则（skill 类依赖）
|
||||
|
||||
所有 skill 类依赖（grilling / domain-modeling / think / openspec-*）按以下顺序选择调用方式：
|
||||
|
||||
1. **宿主 Skill 工具**：若当前 runtime 提供 Skill 工具且该依赖已在可用列表中，用 Skill 工具按名调用。
|
||||
2. **文件直读**：否则用 Read 读取依赖原始 `SKILL.md` **全文**，把其内容作为当前回合的执行指令遵循。这不是降级——skill 的本质就是指令文档，宿主 Skill 工具内部做的也是加载原文；直读与工具调用在语义上等价，前提是**读原文、遵循原义**（包括其引用的 references 子文件，如 think 的 mode-evaluation.md）。
|
||||
|
||||
两种方式都必须：
|
||||
- 先记入调用账本（`ledger.py append --dep <name> --kind skill-load --method skill-tool|file-read`）；
|
||||
- 遵循原文机制，不自拟替代提示词（例如 grilling 的 frontier 轮次格式 ❓Q/➡️推荐、think 的 Simplicity Gate、openspec-propose 的 artifact 循环）。
|
||||
|
||||
## 1. grilling —— 访谈引擎
|
||||
|
||||
| 项 | 值 |
|
||||
|---|---|
|
||||
| 来源 | github.com/mattpocock/skills（productivity/grilling） |
|
||||
| 本体 | `~/.agents/skills/grilling/SKILL.md`（软链解析后读真源） |
|
||||
| 入口语义 | `grill-me` = 只调 grilling；`grill-with-docs` = grilling + domain-modeling。Le SPEC 按此原义路由：**全新项目 → grilling；已有代码/文档 → grilling + domain-modeling** |
|
||||
| 调用时机 | Phase 2 全程（simple 档也走它，只是轮数少） |
|
||||
| 输入交接 | state.md 的「已确认决策」「开放问题」两节——已确认项不得再问；开放问题构成 design tree 的初始节点 |
|
||||
| 原生机制（必须保留） | design tree、frontier（前置决策已定的可问集合）、每轮问整个 frontier 并给推荐答案、答案重塑树、"事实自己查（可派子代理）、决策问用户"、frontier 空且用户确认共识才算完 |
|
||||
| 产物 | 每轮问题（❓Q1… ➡️推荐格式）；用户回答由 Le SPEC 写入 state.md |
|
||||
|
||||
**Le SPEC 叠加规则**（不与原义冲突）：
|
||||
- 每轮用户回答后：决策入 state.md，轮次 +1；每约 4 轮做一次检查点（见 workflow.md Phase 2）。
|
||||
- grilling 的"会话结束条件 = frontier 空"之外，Le SPEC 用需求收敛标准（workflow.md）做结束判定；两者取先到者，且需向用户确认共识后收口。
|
||||
- 已有项目时叠加 domain-modeling：访谈中发现术语模糊 → 按其"Sharpen fuzzy language"当场澄清；硬决策按其三条件（难逆转/无上下文会困惑/真实取舍）写 ADR。GLOSSARY.md/ADR 由 domain-modeling 机制管理，Le SPEC 不另建。
|
||||
|
||||
## 2. think —— 方案分析引擎
|
||||
|
||||
| 项 | 值 |
|
||||
|---|---|
|
||||
| 来源 | github.com/tw93/Waza（skills/think） |
|
||||
| 本体 | `~/.agents/skills/think/SKILL.md` |
|
||||
| 调用时机 | Phase 3：出现重大产品分歧、技术选型、架构取舍、过度设计疑虑、值不值得判断。**simple 档且无实质争议 → 跳过并注明** |
|
||||
| 模式选择（遵循其原生定义） | 定义清楚的修复计划 → Lightweight Mode；价值/存废判断 → 读 references/mode-evaluation.md；批量诉求 → mode-triage.md。默认全模式 |
|
||||
| 输入交接 | state.md 已确认需求 + 约束 + 已否定方案 + 待选方案。think 的 "Durable Context Preflight" 要求读项目 AGENTS.md/CLAUDE.md 索引——照做 |
|
||||
| 原生机制（必须保留） | 先查官方方案、推荐单一方案+理由+一个替代、premise collapse（最脆弱假设）、attack angles（外部依赖/并发/迁移时）、Simplicity Gate、批准前不动代码 |
|
||||
| 产物 | 推荐方案 + 关键决策 + 风险 + 被否替代 → 写入 state.md「已确认决策」（待用户批准的标 [待批准]） |
|
||||
|
||||
**回流规则**：think 发现新的重大需求不确定性（Blocking ambiguities）→ 带回 Phase 2 用 grilling 格式做**针对性**追问（不是重启访谈），解决后回到 Phase 3 继续。
|
||||
|
||||
## 3. OpenSpec —— 规格工程引擎（CLI + skills 双通道）
|
||||
|
||||
| 项 | 值 |
|
||||
|---|---|
|
||||
| 来源 | github.com/Fission-AI/OpenSpec（npm: @fission-ai/openspec） |
|
||||
| CLI | `openspec`（PATH 中，≥1.3 可用 artifact 工作流；本 skill 按 1.16.x 验证） |
|
||||
| skills | `~/.agents/skills/openspec-{propose,new-change,update-change,verify-change,archive-change,apply-change,explore}/SKILL.md` |
|
||||
| 调用时机 | Phase 0（context 探测）、Phase 5（生成）、Phase 6（validate）、Phase 7 后的变更与归档 |
|
||||
|
||||
**Phase 5 标准路径**（遵循 openspec-propose 原生步骤，Le SPEC 已备齐输入故跳过其澄清步）：
|
||||
|
||||
```bash
|
||||
openspec context --json # 定位根；root:null → 见下"项目初始化"
|
||||
openspec new change "<kebab-name>" # 脚手架（默认 spec-driven schema）
|
||||
openspec status --change "<name>" --json # artifact 顺序与路径
|
||||
openspec instructions <artifact> --change "<name>" --json # 逐个：proposal → specs → design → tasks
|
||||
# 按 template + instruction 撰写每个 artifact 文件
|
||||
openspec validate "<name>" # 必须通过
|
||||
```
|
||||
|
||||
- **artifact 分工是 OpenSpec 原生的**：`specs/` = 产品需求（行为契约、Requirement/Scenario）、`design.md` = 技术设计（HOW，conditional）、`tasks.md` = 开发任务（checkbox）、`proposal.md` = Why/What/Capabilities。不混写。
|
||||
- **项目初始化边界**（遵循其 Project check 原义）：`root:null` 且用户未提 OpenSpec → 停下问用户：init（`openspec init --tools none`，工具注入由用户后续决定）/ 走 store / 不用 OpenSpec 本次降级输出。绝不让 `new change` 的副作用悄悄创建根。
|
||||
- **变更管理**：SPEC 已批准后的需求变化 → openspec-update-change 工作流（新 change 或修订现有），归档 → openspec-archive-change。Le SPEC 交接到此为止，apply 交给 Coding Agent。
|
||||
|
||||
## 4. 依赖检查与失败处理
|
||||
|
||||
`scripts/deps_check.py`（--json 供脚本、默认人读输出）：
|
||||
|
||||
| 依赖 | 级别 | 缺失时 |
|
||||
|---|---|---|
|
||||
| grilling skill | required | 停止访谈阶段，输出安装命令（下表），不降级为普通问答 |
|
||||
| think skill | required（Phase 3 入口） | 方案分歧时停止并提示安装；无分歧场景不受影响 |
|
||||
| openspec CLI | required（Phase 5 入口） | 停止规格生成，提示 `npm install -g @fission-ai/openspec` |
|
||||
| openspec-* skills | recommended | CLI 工作流仍可走（Phase 5 标准路径即 CLI 驱动），但提示安装以获得完整工作流指令 |
|
||||
| domain-modeling skill | recommended（已有项目时升 required） | 已有项目的访谈照常，但声明"术语沉淀与 ADR 不可用" |
|
||||
| grill-me / grill-with-docs | optional（入口薄壳） | 不影响——Le SPEC 直接路由到底层组合 |
|
||||
|
||||
安装命令（真实可执行，2026-11 验证）：
|
||||
|
||||
```bash
|
||||
npx skills@latest add mattpocock/skills --skill grilling grill-me grill-with-docs domain-modeling -g
|
||||
npx skills@latest add tw93/Waza --skill think -g
|
||||
npx skills@latest add Fission-AI/OpenSpec --skill openspec-propose openspec-new-change openspec-update-change openspec-verify-change openspec-archive-change openspec-apply-change openspec-explore -g
|
||||
npm install -g @fission-ai/openspec@latest
|
||||
```
|
||||
|
||||
**失败语义**：CLI 非零退出 ≠ 永远失败（如 `openspec list` 在无根项目返回非零，那是"未初始化"的答案不是崩溃）——读 JSON 输出判断，不盲目重试。skill 加载失败（文件不存在/为空）→ 记账本（method=file-read, exit=1）→ 按缺失处理。**任何情况下不得用模拟输出冒充调用成功。**
|
||||
|
||||
## 5. 防重复机制
|
||||
|
||||
- grilling 问过的 → state.md「已确认决策」，think 直接消费；
|
||||
- think 已否定的方案 → state.md「已否定方案」，Phase 4/6 审查不再重提，除非发现新证据；
|
||||
- OpenSpec artifacts 已写内容 → Phase 6 审查对照 state.md 检查一致性，不重新发起需求讨论；
|
||||
- 每阶段入口先读 state.md 的阶段标记，已完成阶段不重做（中断恢复同理）。
|
||||
@@ -0,0 +1,35 @@
|
||||
# Phase 6：SPEC 独立质量审查规程
|
||||
|
||||
**问题意识**：Phase 4 检查"需求是否明确到足以形成规格"；Phase 6 检查**"规格是否准确到足以指导开发和测试"**。审查对象是 OpenSpec artifacts（proposal/specs/design/tasks），不是重新审需求——需求问题应已在 Phase 4 清零。
|
||||
|
||||
## 审查组成（三路并行）
|
||||
|
||||
1. **四视角子代理审查**（首选 fresh-context 子代理；降级规则同 acceptance.md，须声明独立性等级）。输入：change 目录全部 artifact 路径 + state.md 路径 + （已有项目时）相关既有 specs 路径。四视角各答各的：
|
||||
|
||||
| 视角 | 追问 |
|
||||
|---|---|
|
||||
| 产品 | 完整表达真实需求了吗？有无遗漏功能？有无混入用户未确认的新要求（对照 state.md 逐条溯源）？ |
|
||||
| 架构 | 与现有系统/既有 specs 冲突？重大技术风险？不必要的复杂度（对照 design.md 的 Decisions 与 think 结论）？ |
|
||||
| 开发 | 还要猜什么？缺数据/流程/状态定义？互相矛盾的要求（specs 内部 + specs↔design↔tasks）？ |
|
||||
| 测试 | 每条 Requirement 的 Scenario 可执行可判定的吗？正常/异常/边界覆盖？有没有判不了 pass/fail 的模糊表述？ |
|
||||
|
||||
2. **CLI 校验**：`openspec validate "<change>"`（严格模式可用则用）+ `openspec status --change "<name>"` 确认 artifact 齐全。
|
||||
3. **账本核对**：`ledger.py check` 确认 grilling/think/openspec 均有真实调用记录；缺失 → 回补（真实调用）或如实声明。
|
||||
|
||||
## 产出格式（每问题一行，不许无依据打分）
|
||||
|
||||
```markdown
|
||||
| # | 视角 | 严重度 | 问题（引 artifact 行文） | 影响 | 修正建议 | 阻塞? |
|
||||
```
|
||||
|
||||
严重度：blocker（规格错误/矛盾/无法实现或测试）｜major（会导致误解或返工）｜minor（措辞与边缘）。
|
||||
|
||||
## 修正循环
|
||||
|
||||
blocker/major 逐条修正 artifact → 只复验受影响项（重跑 validate + 相关视角复查）→ 清零或全部降为 minor 后出结论：
|
||||
|
||||
```markdown
|
||||
审查结论：blocker 0 / major 0 / minor N（列表，随 SPEC 一并呈交）
|
||||
```
|
||||
|
||||
修正时保持铁律 2：修正只动规格文本与事实呈现，不重启需求讨论；发现规格确实承载不了的需求歧义 → 回 Phase 4 流程处理。
|
||||
@@ -0,0 +1,106 @@
|
||||
# 七阶段工作流规程
|
||||
|
||||
阶段是逻辑流。每阶段入口先读 state.md 阶段标记，已完成的跳过。
|
||||
|
||||
## Phase 0：项目识别与上下文理解
|
||||
|
||||
1. 判任务类型：全新产品 / 已有产品加功能 / 已有功能修改 / 复杂业务模块 / 架构重构 / 探索性想法。
|
||||
2. 有代码库时只读检查（按复杂度控制深度，simple 档可缩到 3-5 分钟扫读）：
|
||||
- 项目结构、技术栈、入口文件；已有文档与 `openspec/specs/`（`openspec context --json` 探测）；GLOSSARY/ADR（domain-modeling 的管理物）；近期 git log 的设计决策线索。
|
||||
- **能从代码和文档确认的事实，绝不进访谈问题**（grilling 原义：事实自己查，决策问用户）。
|
||||
3. 复杂度定档（可随讨论动态升降级，升降级写入 state.md 并注明理由）：
|
||||
|
||||
| 档 | 特征 | 流程 |
|
||||
|---|---|---|
|
||||
| simple | 字段/筛选/文案级修改，影响单一界面或接口 | 0 → 1 → grilling 单轮（≤1 轮）→ （跳过 3）→ 清单式 4 → 5（propose，design 多为 skip）→ 快速 6 → 7 |
|
||||
| medium | 新功能模块（日历、用户管理级） | 全流程，3 按需 |
|
||||
| complex | 全新产品、多角色/多流程系统、架构重构 | 全流程；3 必用于重大决策；访谈允许多轮充分展开 |
|
||||
|
||||
## Phase 1：原始需求理解
|
||||
|
||||
对用户原始输入做**十类分拣**，产出写入 state.md：
|
||||
|
||||
1. 明确需求 2. 目标与期望结果 3. 用户角色与场景 4. 未定想法 5. 用户假设 6. 约束（产品+技术） 7. 矛盾描述（列出冲突双方与出处） 8. 重要缺失信息 9. 已否定方案 10. 明确不做
|
||||
|
||||
规则：保留原始措辞的关键短语与来源（哪条消息）；不擅自增需求；临时想法标注 [未定]；AI 推荐方案标注 [建议]，不得记为已批准。矛盾不在此阶段裁决——入开放问题，Phase 2 问。
|
||||
|
||||
state.md 初始化模板：
|
||||
|
||||
```markdown
|
||||
# Le SPEC 状态 — <项目/功能名>
|
||||
更新: <日期> | 阶段: Phase 1 | 复杂度: <档>（理由）
|
||||
|
||||
## 项目
|
||||
类型: <全新/加功能/修改/…> ｜ 目标: <一句话>
|
||||
|
||||
## 原始输入摘要
|
||||
- (来源: 首条消息) <要点，保留关键原话>
|
||||
|
||||
## 已确认决策
|
||||
| # | 决策 | 内容 | 来源 | 状态 |
|
||||
|---|------|------|------|------|
|
||||
|
||||
## 已否定方案
|
||||
- <方案> — 否定原因 <来源>
|
||||
|
||||
## 开放问题
|
||||
- [ ] Q1 <问题>（影响: 核心/边缘；依赖: -）
|
||||
|
||||
## 假设（待验证）
|
||||
- <假设>（依据）
|
||||
|
||||
## 访谈计数
|
||||
轮次: 0 ｜ 检查点: -
|
||||
|
||||
## 下一步
|
||||
- <具体动作>
|
||||
```
|
||||
|
||||
## Phase 2：Grill 深度访谈
|
||||
|
||||
入口动作（顺序固定）：
|
||||
1. 读 [dependencies.md](dependencies.md) 第 1 节，按调用方式总则**真实加载 grilling**（已有项目叠加 domain-modeling），记账本。
|
||||
2. 以 state.md 开放问题 + 十类分拣中的矛盾/缺失为 design tree 初始节点。
|
||||
|
||||
访谈中 Le SPEC 叠加于 grilling 原义之上的规则：
|
||||
- **每轮结束**（用户答完）：新决策入表、开放问题更新、轮次 +1、增量写 state.md。
|
||||
- **检查点**：每逢第 4、8、12…轮答完，附一段 ≤6 行小结（已确认 N 项 / 开放 M 项 / 收敛判断：继续｜接近｜已达标）。有 blocking 问题默认继续，不要求用户批准继续；已达标主动提议收口。
|
||||
- **收敛标准**（全部满足才收口）：目标明确 ｜ 范围明确（含不做） ｜ 角色明确 ｜ 核心流程闭环 ｜ 业务规则明确 ｜ 数据关系与权限边界明确（适用时） ｜ 异常边界已有处理原则 ｜ 无阻塞实现的重大未决。非关键细节可用「明确标注的默认方案」填充（标注 [默认] 进 state.md），不无限追问。
|
||||
- **用户控制权**：随时可换模块、改需求（记录影响范围，受影响的已确认项重开并注明）、看草稿、暂停（state.md 存「下一步」）、先谈技术（跳 Phase 3 再回）。
|
||||
- 关键需求仍有歧义时不得自行拍板；重大未决可出「标注风险的草稿」但明示未经审查。
|
||||
|
||||
## Phase 3：Think 方案分析与挑战
|
||||
|
||||
1. 无实质方案争议（simple 或方案唯一且用户已定）→ state.md 记"Phase 3 跳过（无分歧）"，进 Phase 4。
|
||||
2. 否则按 [dependencies.md](dependencies.md) 第 2 节**真实加载 think**（含其 Preflight：读项目 AGENTS/CLAUDE 索引与相关规则），记账本。
|
||||
3. think 产出推荐方案 → 向用户呈现（推荐+理由+一个替代+风险+最脆弱假设）→ **终止回合等决断** → 批准则入 state.md [已批准]，新不确定性回流 Phase 2。
|
||||
|
||||
## Phase 4：需求反向验收
|
||||
|
||||
详见 [acceptance.md](acceptance.md)。核心：fresh-context 子代理扮演"没参与讨论的资深工程师"，只读 state.md + 已确认材料，回答"由我实现的话，哪些产品行为还得靠猜？"。产出 blocking / major / minor 问题清单：
|
||||
- blocking → 以 grilling 单轮格式向用户澄清（记账本 dep=grilling, summary=acceptance-driven）→ 更新后**只复核受影响项**；
|
||||
- major → 能由已确认决策推导的当场补进 state.md 并标注推导依据，推导不了的升级 blocking；
|
||||
- minor → 记入开放问题，随 SPEC 的"非阻塞事项"呈现。
|
||||
清零 blocking 才进 Phase 5。
|
||||
|
||||
## Phase 5：OpenSpec 生成正式 SPEC
|
||||
|
||||
按 [dependencies.md](dependencies.md) 第 3 节标准路径执行（每条 CLI 命令记账本）。要点：
|
||||
- change 名 kebab-case，从需求导出；同名已存在 → 问用户续用还是新建（遵循原生 guardrail）。
|
||||
- 逐 artifact：先 `instructions`，按其 template + instruction 撰写；内容全部来自 state.md（已批准决策/已确认需求/[默认] 项如实标注），**不编造规则**；验收场景用 Requirement/Scenario 结构，可测、可观察。
|
||||
- `design.md` 遵循其 conditional 规则（跨切面/新依赖/数据模型等才写）；Phase 3 有 think 结论的，方案与已否替代直接沉淀为 Decisions。
|
||||
- `openspec validate` 必须通过；失败按输出修正后重跑。
|
||||
- SPEC 语言聚焦"系统做什么、表现什么行为、如何判断正确"——实现机制进 design/tasks（OpenSpec config 的 product-language 约定同理）。
|
||||
|
||||
## Phase 6：SPEC 独立质量审查
|
||||
|
||||
详见 [review.md](review.md)。四视角（产品/架构/开发/测试）独立审查 artifacts + `openspec validate` 复跑 + 账本核对。问题分级（blocker/major/minor）→ 修正 → 只复验受影响项 → 出审查结论（无事实依据的分数不打）。
|
||||
|
||||
## Phase 7：用户确认与交接
|
||||
|
||||
确认包含：正式 SPEC 位置与摘要、核心功能与范围、关键决策（含被否方案）、明确不做、尚存风险与非阻塞问题、审查结果摘要、账本统计（grilling/think/openspec 各 N 次真实调用）。
|
||||
**呈交后终止回合。** 用户批准 → 更新 state.md 阶段为"已交接"，提示后续：实现用 openspec-apply-change 工作流、需求变化用 openspec-update-change、完成后 openspec-archive-change。用户要改 → 只更新受影响 artifact 并复验（不重跑全流程）。
|
||||
|
||||
## 中断恢复
|
||||
|
||||
任何会话重入：`openspec context --json` → 读 `<root>/openspec/le-spec/state.md` → 校验其「下一步」与 OpenSpec 实际状态（`openspec status --change` 或 `openspec list --json`）一致 → 从断点继续。state.md 阶段标记与实际不符时以实际产物为准并修正状态。
|
||||
@@ -0,0 +1,6 @@
|
||||
# reports/ —— 证据政策
|
||||
|
||||
- `test-report.md` —— 测试 A-I 的执行记录、修正记录与已知限制（**入库**：本次交付要求的可复查证据）
|
||||
- `trigger-eval.json` —— trigger_eval.py 生成物（**不入库**，gitignore：按需重跑即得，遵循仓库先例）
|
||||
|
||||
诚实条款：验证不了的写「证据缺失」，不编造；计划中的工作不是证据。测试脚手架项目（/tmp/lespec-test/）不入库，证据以本报告 + 文中账本数字为指针。
|
||||
@@ -0,0 +1,40 @@
|
||||
# Le SPEC 测试报告（v1.0.0，2026-11-08）
|
||||
|
||||
测试方法：以 fresh-context 子代理为 Le SPEC 执行者、主会话扮演真实用户的多轮对话实测（非单发提示词测试），产物全部可复核。证据分级：[已验证] 有执行记录/文件/账本；[设计优势] 源码可见；[假设] 合理未证。
|
||||
|
||||
## 总览
|
||||
|
||||
| 测试 | 验证点 | 结果 | 关键证据 |
|
||||
|---|---|---|---|
|
||||
| A 零散需求理解 | 混乱输入十类分拣 | ✅ [已验证] | app-idea state.md：矛盾 A（安卓↔iCloud）入开放问题、语音标[未定]、「先不管」搁置不重问 |
|
||||
| B 全新产品+Grill | grilling 真实加载+frontier 机制 | ✅ [已验证] | 账本 grilling×6（file-read）；❓Q/➡️推荐格式、每轮问整 frontier、答案重塑树（Q1-C 解锁 R2） |
|
||||
| C 已有项目 | 读代码、grill-with-docs、不重复问 | ✅ [已验证] | todo-app：README/代码被读（29 行/数据路径/无账号），零代码可答问题；GLOSSARY 6 术语（domain-modeling×1 账本） |
|
||||
| D 不合理方案 | think 真实调用+有效挑战 | ✅ [已验证] | 账本 think×2；🥷 前缀/官方方案核查（真实链接）/minimal 选项/premise collapse/被否替代；Redis 被识别为唯一过度点，账号/排序/审计被否 |
|
||||
| E 深度访谈 | >4 轮、每 4 轮检查点、收敛即停 | ✅ [已验证] | 4 轮（变更延长第 4 轮）；R4 后检查点（≤6 行/8/8 收敛/frontier 空）；收敛后主动收口不凑轮 |
|
||||
| F 反向验收 | 独立视角挖隐藏歧义 | ✅ [已验证] | 子代理场景：D25-D27 推导（编辑规则/清单快照/独立性）；主会话独立子代理补测：抓到 2 blocking（用量数据模型、Mac 交付范围）+4 major——**独立审查显著强于自审** |
|
||||
| G SPEC 生成与审查 | openspec 真实工作流 | ✅ [已验证] | 两项目 validate --strict 复跑通过；场景1：6 capability/21 Requirement/46 Scenario；场景2：3 capability/17 tasks；WHEN/THEN 可测场景 |
|
||||
| H 变更与中断恢复 | 状态存取/局部更新/不重复问 | ✅ [已验证] | R3 变更（+采购清单/−微信）→ 变更日志+D1/D4/D9 影响标注；新会话恢复：21 项决策未重问、断点续问 |
|
||||
| I 依赖真实性 | 真实运行/缺失提示/无模拟 | ✅ [已验证] | deps_check 缺失场景 exit 1+精确安装命令；账本共 28 条真实调用（grilling 9/think 2/openspec CLI 14/propose 2/domain-modeling 1）；CLI exit 1 被正确解读为「未初始化」非崩溃 |
|
||||
|
||||
测试项目（脚手架，不入库）：/tmp/lespec-test/{app-idea,todo-app}。
|
||||
|
||||
## 修正记录（测试驱动）
|
||||
|
||||
1. **触发词面缺口**：初版 description 对「PRD 润色」「别做 spec 直接改代码」误触发 → 补负触发词面（润色/排版/直接改代码/别做 spec），trigger_eval 11/11 通过。
|
||||
2. **ledger.py 元组解包 bug**：append 直接崩溃 → 拆 resolve_ledger()，通过。
|
||||
3. **ledger 误报**：think 缺失警告未区分「Phase 3 合规跳过」→ 提示语区分，合规跳过需 state.md 有记录佐证。
|
||||
4. **Phase 4 独立性差异实测**：子代理执行环境（无嵌套 Agent 工具）自动降级自审并声明——机制正确，但自审 vs 独立审查的质量差是真实的（见测试 F），主会话使用时 Agent 工具可用，acceptance.md「首选子代理」规则已经覆盖。
|
||||
|
||||
## 已知限制与未验证项（如实声明）
|
||||
|
||||
1. **[假设→部分验证] 多 runtime**：ZCode 路径全程实测；Claude Code / Codex 仅建软链未实测（Skill 工具按名调用路径未跑）。
|
||||
2. **[假设] think 其它模式**：Evaluation / Triage / Lightweight 模式未被单独触发测试（全模式已两轮实测）。
|
||||
3. **[假设] openspec store**：--store 语义未测（本机无 store 环境）。
|
||||
4. **[已知局限] 嵌套子代理**：le-spec 跑在子代理内时 Phase 4/6 必然降级自审（子代理无 Agent 工具）；主会话直接使用无此限制。
|
||||
5. **[已知边界] init 授权解释**：用户宽泛授权（「继续吧」）时，执行者可能将授权泛化到 openspec init 决策（场景 1 记录为「用户批准」，场景 2 无授权时正确显式三选一询问）。explicit 判定留给执行 agent，建议用户对 init 表态时明确。
|
||||
6. **[已知局限] 触发实测深度**：冒烟 11/11；真实对话自动触发未测（本 skill 为本会话期间创建，同会话无法模拟新会话触发——见 le-meta-skill 惯例：skill 触发一次性读入，需新会话验证）。
|
||||
7. **[已知边界] 访谈轮次上限语义**：未验证 12+ 轮超长访谈的检查点节奏与上下文膨胀行为。
|
||||
|
||||
## 结论
|
||||
|
||||
九项测试全部通过，其中 A-I 的核心机制均有文件级证据；「真实集成、不冒充」约束由账本+CLI 退出码双重背书。未验证项集中于多 runtime 与依赖 skill 的非主路径模式，已在 README 与本报告声明，不声称已测。
|
||||
@@ -0,0 +1,121 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Le SPEC 依赖检查：skill 目录 + openspec CLI。
|
||||
|
||||
用法:
|
||||
python3 deps_check.py # 人读输出, 退出码 0=required 全就位, 1=有缺失
|
||||
python3 deps_check.py --json # 机器可读
|
||||
"""
|
||||
import argparse
|
||||
import json
|
||||
import os
|
||||
import shutil
|
||||
import subprocess
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
# 依赖清单: (name, level, source, install_cmd)
|
||||
SKILL_DEPS = [
|
||||
("grilling", "required", "mattpocock/skills", "npx skills@latest add mattpocock/skills --skill grilling grill-me grill-with-docs domain-modeling -g"),
|
||||
("domain-modeling", "recommended", "mattpocock/skills", "npx skills@latest add mattpocock/skills --skill domain-modeling -g"),
|
||||
("grill-me", "optional", "mattpocock/skills", None), # 入口薄壳
|
||||
("grill-with-docs", "optional", "mattpocock/skills", None), # 入口薄壳
|
||||
("think", "required", "tw93/Waza", "npx skills@latest add tw93/Waza --skill think -g"),
|
||||
("openspec-propose", "recommended", "Fission-AI/OpenSpec", "npx skills@latest add Fission-AI/OpenSpec --skill openspec-propose openspec-new-change openspec-update-change openspec-verify-change openspec-archive-change openspec-apply-change openspec-explore -g"),
|
||||
("openspec-new-change", "recommended", "Fission-AI/OpenSpec", None),
|
||||
("openspec-update-change", "recommended", "Fission-AI/OpenSpec", None),
|
||||
("openspec-verify-change", "recommended", "Fission-AI/OpenSpec", None),
|
||||
("openspec-archive-change", "recommended", "Fission-AI/OpenSpec", None),
|
||||
]
|
||||
|
||||
# 候选 skill 根目录(顺序即优先级); 可用 LESPEC_SKILL_PATHS 覆盖, 冒号分隔
|
||||
DEFAULT_ROOTS = [
|
||||
"~/.agents/skills",
|
||||
"~/.zcode/skills",
|
||||
"~/.claude/skills",
|
||||
"~/.codex/skills",
|
||||
]
|
||||
|
||||
|
||||
def skill_roots():
|
||||
env = os.environ.get("LESPEC_SKILL_PATHS")
|
||||
if env:
|
||||
return [Path(p).expanduser() for p in env.split(":") if p.strip()]
|
||||
return [Path(p).expanduser() for p in DEFAULT_ROOTS]
|
||||
|
||||
|
||||
def find_skill(name):
|
||||
"""返回 (resolved_skill_md_path | None, root_dir)。软链解析到真源。"""
|
||||
for root in skill_roots():
|
||||
cand = root / name / "SKILL.md"
|
||||
if cand.exists():
|
||||
try:
|
||||
return cand.resolve(), root
|
||||
except OSError:
|
||||
return cand, root
|
||||
return None, None
|
||||
|
||||
|
||||
def check_openspec_cli():
|
||||
exe = shutil.which("openspec")
|
||||
if not exe:
|
||||
return {"name": "openspec-cli", "level": "required", "ok": False,
|
||||
"detail": "openspec not in PATH",
|
||||
"install": "npm install -g @fission-ai/openspec@latest"}
|
||||
try:
|
||||
out = subprocess.run([exe, "--version"], capture_output=True, text=True,
|
||||
timeout=15)
|
||||
ver = (out.stdout or out.returncode and out.stderr or "").strip().splitlines()[-1] \
|
||||
if (out.stdout or out.stderr) else "?"
|
||||
return {"name": "openspec-cli", "level": "required", "ok": out.returncode == 0,
|
||||
"detail": f"{exe} (v{ver})",
|
||||
"install": "npm install -g @fission-ai/openspec@latest"}
|
||||
except Exception as e: # timeout / spawn 失败
|
||||
return {"name": "openspec-cli", "level": "required", "ok": False,
|
||||
"detail": f"exec failed: {e}",
|
||||
"install": "npm install -g @fission-ai/openspec@latest"}
|
||||
|
||||
|
||||
def main():
|
||||
ap = argparse.ArgumentParser()
|
||||
ap.add_argument("--json", action="store_true", help="JSON 输出")
|
||||
args = ap.parse_args()
|
||||
|
||||
results = []
|
||||
for name, level, source, install in SKILL_DEPS:
|
||||
path, root = find_skill(name)
|
||||
results.append({
|
||||
"name": name, "kind": "skill", "level": level,
|
||||
"ok": path is not None,
|
||||
"detail": str(path) if path else f"not found under {':'.join(str(r) for r in skill_roots())}",
|
||||
"source": source, "install": install,
|
||||
})
|
||||
results.append(check_openspec_cli())
|
||||
|
||||
missing_required = [r for r in results if not r["ok"] and r["level"] == "required"]
|
||||
missing_recommended = [r for r in results if not r["ok"] and r["level"] == "recommended"]
|
||||
|
||||
if args.json:
|
||||
print(json.dumps({
|
||||
"ok": not missing_required,
|
||||
"missing_required": [r["name"] for r in missing_required],
|
||||
"missing_recommended": [r["name"] for r in missing_recommended],
|
||||
"items": results,
|
||||
}, ensure_ascii=False, indent=2))
|
||||
else:
|
||||
mark = lambda r: "✅" if r["ok"] else ("❌" if r["level"] == "required" else "⚠️ ")
|
||||
print(f"{'':2}{'状态':4} {'级别':12} {'依赖':24} 详情")
|
||||
for r in results:
|
||||
print(f"{mark(r)} {r['level']:<12} {r['name']:<24} {r['detail']}")
|
||||
print()
|
||||
if not missing_required and not missing_recommended:
|
||||
print("全部依赖就位。")
|
||||
for r in missing_required + missing_recommended:
|
||||
if r.get("install"):
|
||||
print(f"补装 {r['name']}: {r['install']}")
|
||||
print("提示: optional 级(grill-me/grill-with-docs)是入口薄壳, 缺失不影响运行。")
|
||||
|
||||
sys.exit(1 if missing_required else 0)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -0,0 +1,143 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Le SPEC 调用账本: 记录每次依赖真实交互, 供审查与交付作证据。
|
||||
|
||||
用法:
|
||||
python3 ledger.py append --dep grilling --kind skill-load --method file-read \
|
||||
--summary "Phase2 R1 frontier 4问" [--cmd "..."] [--exit 0] [--file PATH]
|
||||
python3 ledger.py check [--file PATH] [--json]
|
||||
python3 ledger.py tail [-n 5] [--file PATH]
|
||||
|
||||
账本定位优先级: --file > openspec root 下 openspec/le-spec/ledger.jsonl > ./.le-spec/ledger.jsonl
|
||||
"""
|
||||
import argparse
|
||||
import datetime
|
||||
import json
|
||||
import subprocess
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
KINDS = {"skill-load", "cli", "subagent"}
|
||||
METHODS = {"skill-tool", "file-read", "bash", "agent"}
|
||||
|
||||
|
||||
def default_ledger():
|
||||
try:
|
||||
out = subprocess.run(["openspec", "context", "--json"],
|
||||
capture_output=True, text=True, timeout=15)
|
||||
ctx = json.loads(out.stdout or "{}")
|
||||
root = (ctx.get("root") or {}).get("path")
|
||||
if root:
|
||||
p = Path(root) / "openspec" / "le-spec" / "ledger.jsonl"
|
||||
return p, True
|
||||
except Exception:
|
||||
pass
|
||||
return Path.cwd() / ".le-spec" / "ledger.jsonl", False
|
||||
|
||||
|
||||
def resolve_ledger(args):
|
||||
"""返回 (path, has_openspec_root)。"""
|
||||
if getattr(args, "file", None):
|
||||
return Path(args.file).expanduser(), None
|
||||
return default_ledger()
|
||||
|
||||
|
||||
def cmd_append(args):
|
||||
if args.kind not in KINDS or args.method not in METHODS:
|
||||
print(f"kind 须为 {KINDS}, method 须为 {METHODS}", file=sys.stderr)
|
||||
return 2
|
||||
path, has_root = resolve_ledger(args)
|
||||
path.parent.mkdir(parents=True, exist_ok=True)
|
||||
entry = {
|
||||
"ts": datetime.datetime.now().isoformat(timespec="seconds"),
|
||||
"phase": args.phase, "dep": args.dep, "kind": args.kind,
|
||||
"method": args.method, "cmd": args.cmd, "exit": args.exit,
|
||||
"summary": args.summary,
|
||||
}
|
||||
with path.open("a", encoding="utf-8") as f:
|
||||
f.write(json.dumps({k: v for k, v in entry.items() if v is not None},
|
||||
ensure_ascii=False) + "\n")
|
||||
print(f"账本已记: {path}")
|
||||
if has_root is False and not args.file:
|
||||
print("(未找到 openspec root, 暂写 .le-spec/; Phase 5 init 后迁移)", file=sys.stderr)
|
||||
return 0
|
||||
|
||||
|
||||
def _load(path):
|
||||
if not path.exists():
|
||||
return []
|
||||
rows = []
|
||||
for line in path.read_text(encoding="utf-8").splitlines():
|
||||
line = line.strip()
|
||||
if line:
|
||||
try:
|
||||
rows.append(json.loads(line))
|
||||
except json.JSONDecodeError:
|
||||
rows.append({"_unparsed": line})
|
||||
return rows
|
||||
|
||||
|
||||
def cmd_check(args):
|
||||
path, _ = resolve_ledger(args)
|
||||
rows = _load(path)
|
||||
by_dep = {}
|
||||
for r in rows:
|
||||
d = by_dep.setdefault(r.get("dep", "?"), {"count": 0, "last": None, "kinds": {}})
|
||||
d["count"] += 1
|
||||
d["last"] = r.get("ts", d["last"])
|
||||
d["kinds"][r.get("kind", "?")] = d["kinds"].get(r.get("kind", "?"), 0) + 1
|
||||
if args.json:
|
||||
print(json.dumps({"ledger": str(path), "total": len(rows), "by_dep": by_dep},
|
||||
ensure_ascii=False, indent=2))
|
||||
else:
|
||||
print(f"账本: {path} ｜ 总计 {len(rows)} 条")
|
||||
for dep, d in sorted(by_dep.items()):
|
||||
kinds = ", ".join(f"{k}×{v}" for k, v in d["kinds"].items())
|
||||
print(f" {dep:<16} {d['count']:>3} 次 ({kinds}) 末次 {d['last']}")
|
||||
expected = ["grilling", "think", "openspec"]
|
||||
missing = [e for e in expected if e not in by_dep]
|
||||
if missing:
|
||||
hint = {"think": "（若 Phase 3 合规跳过——无实质方案分歧——属正常，确认 state.md 有跳过记录即可）"}
|
||||
for m in missing:
|
||||
print(f"⚠️ 未见 {m} 的调用记录 {hint.get(m, '')} — 否则 Phase 6 审查前需真实补调或如实声明")
|
||||
return 0
|
||||
|
||||
|
||||
def cmd_tail(args):
|
||||
path, _ = resolve_ledger(args)
|
||||
rows = _load(path)[-args.n:]
|
||||
for r in rows:
|
||||
print(json.dumps(r, ensure_ascii=False))
|
||||
return 0
|
||||
|
||||
|
||||
def main():
|
||||
ap = argparse.ArgumentParser()
|
||||
sub = ap.add_subparsers(dest="cmd", required=True)
|
||||
|
||||
a = sub.add_parser("append")
|
||||
a.add_argument("--dep", required=True)
|
||||
a.add_argument("--kind", required=True)
|
||||
a.add_argument("--method", required=True)
|
||||
a.add_argument("--phase")
|
||||
a.add_argument("--cmd")
|
||||
a.add_argument("--exit", type=int)
|
||||
a.add_argument("--summary")
|
||||
a.add_argument("--file")
|
||||
a.set_defaults(fn=cmd_append)
|
||||
|
||||
c = sub.add_parser("check")
|
||||
c.add_argument("--file")
|
||||
c.add_argument("--json", action="store_true")
|
||||
c.set_defaults(fn=cmd_check)
|
||||
|
||||
t = sub.add_parser("tail")
|
||||
t.add_argument("-n", type=int, default=5)
|
||||
t.add_argument("--file")
|
||||
t.set_defaults(fn=cmd_tail)
|
||||
|
||||
args = ap.parse_args()
|
||||
sys.exit(args.fn(args))
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
## 交付物
|
||||
|
||||
`article.md`（终稿）+ `article.html`（干净正文）+ `article_预览.html`（带「复制到公众号」按钮的预览页）+ 审读报告摘要（含合规清零）+ 3 个标题候选与摘要 + 封面 brief（七步推导，可联动 ckm-banner-design 直接出图）。排版默认走主题引擎（6 套实战主题组件库，HTML 过平台合规校验），轻稿可用 md2wechat 快档。
|
||||
`article.md`（终稿）+ `article.html`（干净正文）+ `article_预览.html`（带「复制到公众号」按钮的预览页）+ 审读报告摘要（含合规清零）+ 3 个标题候选与摘要 + 封面 brief（七步推导）。配图按生产路由分派：节奏位、卡片型信息位与封面首选 le-gpt-image（Gallery 精调 prompt、图上文字逐字复核），精确结构图 SVG 自绘，实证图直接用/可 edit 加工，失败自动回退 SVG。排版默认走主题引擎（6 套实战主题组件库，HTML 过平台合规校验），轻稿可用 md2wechat 快档。
|
||||
|
||||
可选收尾：经官方 API 同步到公众号草稿箱（`scripts/publish_draft.py`，需已认证公众号 + `WECHAT_APP_ID`/`WECHAT_APP_SECRET` 环境变量 + IP 白名单；自动提交 2.35:1 与 1:1 封面裁剪框；首次用 `--check` 验证，`--dry-run` 预览计划）。
|
||||
|
||||
|
||||
@@ -109,9 +109,9 @@ python3 scripts/check_prose.py <文章目录>/article.md
|
||||
|
||||
### 第 7 步：交付
|
||||
|
||||
0. **图片生产（默认执行，用户明确不要图时才跳过）**：正文图位与封面按 [visual-production.md](references/visual-production.md) 生产——交给 ckm-banner-design，或 SVG 自绘 + 浏览器截图均可，满足 brief 验收点即可。信息位图上的文字**逐字取自文章**，配色与所选排版主题一致；可编辑源文件（SVG/HTML）随 PNG 一起保留在 `imgs/src/`。生成后把正文图位占位替换为 `imgs/<文件名>.png` 真实路径——**终稿不得残留 placeholder**（此时 check_article 不再加 `--allow-placeholder`）。
|
||||
0. **图片生产（默认执行，用户明确不要图时才跳过）**：正文图位与封面按 [visual-production.md](references/visual-production.md) 的**生产路由**分派——节奏位、卡片型信息位与封面首选 **le-gpt-image**（Gallery 精调案例出 prompt，图上中文文字直引号逐字写入并读图复核，封面生成后居中裁 2.35:1）；精确结构型信息位（多节点流程/数据曲线）走 SVG 自绘；实证位直接用真实素材，需标注时用 le-gpt-image `edit` 加工；**失败或文字复核两轮不过即回退 SVG 自绘**，如实记入图片状态，不中断交付。信息位图上的文字**逐字取自文章**，配色与所选排版主题一致；可编辑源文件（SVG/HTML）随 PNG 一起保留在 `imgs/src/`。生成后把正文图位占位替换为 `imgs/<文件名>.png` 真实路径——**终稿不得残留 placeholder**（此时 check_article 不再加 `--allow-placeholder`）。
|
||||
|
||||
1. 排版转换。默认走**主题引擎**——6 套实战主题组件库，融合自 gzh-design-skill（AGPL，见 [themes/README.md](references/themes/README.md)）。主题用**第 2 步停点用户选定的**（画像默认 + 当场调整的结果）；若停点被「一口气跑完」豁免跳过，按文章类型对照 [themes/theme-index.md](references/themes/theme-index.md) 的适用场景自动选（教程/测评→摸鱼绿、深度观点→红白色系、设计科技→石墨极简、随笔→留白禅意、对比评测→摸鱼票据、内刊复盘→橄榄手记），并在交付时说明选择理由。选定后按 [themes/ENGINE.md](references/themes/ENGINE.md) 读该主题组件库 + 通用组件库装配 HTML，装配完**校验到全绿才算完成**：
|
||||
1. 排版转换。默认走**主题引擎**——7 套实战主题组件库，融合自 gzh-design-skill（AGPL，见 [themes/README.md](references/themes/README.md)）。主题用**第 2 步停点用户选定的**（画像默认 + 当场调整的结果）；若停点被「一口气跑完」豁免跳过，按文章类型对照 [themes/theme-index.md](references/themes/theme-index.md) 的适用场景自动选（教程/测评→摸鱼绿、深度观点→红白色系、设计科技→石墨极简、随笔→留白禅意、对比评测→摸鱼票据、内刊复盘→橄榄手记），并在交付时说明选择理由。选定后按 [themes/ENGINE.md](references/themes/ENGINE.md) 读该主题组件库 + 通用组件库装配 HTML，装配完**校验到全绿才算完成**：
|
||||
|
||||
```bash
|
||||
python3 scripts/validate_gzh_html.py <文章目录>/article.html
|
||||
|
||||
@@ -0,0 +1,597 @@
|
||||
<!-- THEME-NAME: 暖橙风 -->
|
||||
<!-- THEME-ID: theme-warm-orange -->
|
||||
<!-- THEME-DESCRIPTION: 以暖橙为主色的温暖疗愈系排版主题，用于品牌发布、心理陪伴、生活方式与产品介绍类公众号文章；气质温暖、亲和、积极，像冬日午后的一杯热橙茶；圆角卡片与呼吸留白并重，信息清晰但无压迫感 -->
|
||||
<!-- THEME-COLOR: #EE7A2D -->
|
||||
<!-- THEME-BACKGROUND-COLOR: #FDFBF7 -->
|
||||
<!-- THEME-TEXT-COLOR: #3D3229 -->
|
||||
<!-- THEME-ACCENT-COLOR: #C2541A -->
|
||||
<!-- THEME-DECORATION-COLOR: #F9E3CE -->
|
||||
<!-- THEME-FONT-PREFERENCE: pingfang -->
|
||||
<!-- THEME-DESIGN-TECHNIQUE-TAGS: 暖色卡片化, 圆角呼吸感, 柔和点缀, 浅衬底分层 -->
|
||||
<!-- THEME-STYLE-FEATURE-TAGS: 温暖, 亲和, 疗愈, 积极 -->
|
||||
<!-- THEME-SCENE-TAGS: 品牌发布, 产品介绍, 心理陪伴, 生活方式 -->
|
||||
<!-- THEME-RADIUS-PREFERENCE: 大圆角 -->
|
||||
<!-- THEME-SHADOW-PREFERENCE: 轻柔和阴影 -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>暖橙风 · 主题区块预览</title>
|
||||
</head>
|
||||
<body style="margin:0;padding:30px 16px 44px;background:#FDFBF7;color:#3D3229;font-size:16px;line-height:1.8;font-family:'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">
|
||||
|
||||
<!-- Block: 暖阳导语条（开篇轻量） -->
|
||||
<p style="margin:8px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖阳导语条（开篇轻量）</p>
|
||||
<section style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">栏目标签</span></span>
|
||||
<p style="margin:12px 0 0;font-size:16px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">开篇导语：一句话说清本篇讲什么、读者能带走什么，与外标题错开视角。</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 品牌叙事开篇卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">品牌叙事开篇卡</p>
|
||||
<section id="block-wo-hero-narrative" style="margin:0;padding:18px 14px;background:#F9E3CE;border-radius:22px;">
|
||||
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"></span><span style="display:inline-block;font-size:14px;font-weight:bold;color:#C2541A;vertical-align:middle;">开篇导语占位</span>
|
||||
<p style="margin:12px 0 14px;font-size:16px;line-height:1.9;color:#3D3229;text-align:justify;">叙事导语占位：这里放两三行品牌故事或情绪铺垫文字，语速放慢、句子放短，让读者先安静下来，再进入正文的说明部分。</p>
|
||||
<span style="display:inline-block;padding:9px 26px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);">按钮文案占位</span>
|
||||
</section>
|
||||
|
||||
<!-- Block: 情绪寄语开篇条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">情绪寄语开篇条</p>
|
||||
<section id="block-wo-hero-greeting" style="margin:0;padding:22px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
|
||||
<p style="margin:0 0 10px;font-size:13px;color:#EE7A2D;letter-spacing:6px;">· · ·</p>
|
||||
<p style="margin:0 0 8px;font-size:21px;line-height:1.6;font-weight:bold;color:#3D3229;">一句寄语占位：今天也想对你说</p>
|
||||
<p style="margin:0;font-size:14px;color:#C2541A;">小注说明占位：寄语来源或氛围说明</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 拍立得首图卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">拍立得首图卡</p>
|
||||
<figure id="block-wo-hero-polaroid" style="margin:0;padding:14px 14px 18px;background:#FFFFFF;border-radius:18px;box-shadow:0 8px 20px rgba(238,122,45,0.12);">
|
||||
<span style="display:block;width:72px;height:14px;margin:0 auto 12px;border-radius:999px;background:#F9E3CE;"></span>
|
||||
<img src="https://placehold.orence.net/480x340/F9E3CE/C2541A?text=Story+Opening" alt="开篇配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:12px;">
|
||||
<figcaption style="margin:12px 4px 0;font-size:14px;color:#3D3229;text-align:center;">图片说明占位：一句轻轻的图注</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 圆点目录卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">圆点目录卡</p>
|
||||
<section id="block-wo-nav-dots" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;">目录标题占位</p>
|
||||
<p style="margin:0 0 12px;font-size:13px;color:#C2541A;">目录说明占位：本篇包含的小节导航</p>
|
||||
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">01</span><span style="vertical-align:middle;">章节标题占位一</span></p>
|
||||
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">02</span><span style="vertical-align:middle;">章节标题占位二</span></p>
|
||||
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">03</span><span style="vertical-align:middle;">章节标题占位三</span></p>
|
||||
<p style="margin:0;padding:10px 2px 0;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">04</span><span style="vertical-align:middle;">章节标题占位四</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 阅读指引条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">阅读指引条</p>
|
||||
<section id="block-wo-nav-guide" style="margin:0;padding:14px 18px;background:#F9E3CE;border-radius:999px;">
|
||||
<p style="margin:0;font-size:14px;color:#3D3229;text-align:center;"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"></span><span style="font-weight:bold;color:#C2541A;vertical-align:middle;">阅读提示占位</span><span style="vertical-align:middle;"> · 说明文字占位：按顺序阅读更舒适 →</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 标签索引带 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">标签索引带</p>
|
||||
<section id="block-wo-nav-tagindex" style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 12px;font-size:14px;font-weight:bold;color:#C2541A;">索引说明占位：本篇关键词索引</p>
|
||||
<p style="margin:0 0 10px;font-size:14px;line-height:2.2;">
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;">标签占位一</span>
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;">标签占位二</span>
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;">标签占位三</span>
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;">标签占位四</span>
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;">标签占位五</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖点分隔线 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖点分隔线</p>
|
||||
<hr id="block-wo-divider-dots" style="border:none;border-top:2px dotted #EE7A2D;margin:10px 30px;">
|
||||
|
||||
<!-- Block: 圆点章节标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">圆点章节标题</p>
|
||||
<section id="block-wo-title-dot-section" style="margin:0;padding:6px 2px;">
|
||||
<p style="margin:0 0 8px;font-size:21px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#EE7A2D;margin-right:12px;vertical-align:middle;"></span><span style="vertical-align:middle;">章节标题占位：正文从这里开始</span></p>
|
||||
<p style="margin:0;padding-bottom:10px;border-bottom:2px dotted #F9E3CE;font-size:14px;color:#C2541A;">章节引导语占位：一句话说明本章内容</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 便签小节标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">便签小节标题</p>
|
||||
<section id="block-wo-title-note" style="margin:0;padding:16px 20px;background:#F9E3CE;border-radius:18px;border-left:6px solid #EE7A2D;">
|
||||
<p style="margin:0 0 4px;font-size:18px;font-weight:bold;color:#3D3229;">小节标题占位</p>
|
||||
<p style="margin:0;font-size:14px;color:#C2541A;">小节说明占位：这一小节要讲的重点</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 居中仪式标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">居中仪式标题</p>
|
||||
<section id="block-wo-title-center" style="margin:0;padding:8px 2px;text-align:center;">
|
||||
<p style="margin:0 0 8px;"><span style="display:inline-block;padding:3px 12px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;">章节序号占位</span></p>
|
||||
<p style="margin:0 0 6px;font-size:23px;line-height:1.5;font-weight:bold;color:#3D3229;">居中标题占位</p>
|
||||
<p style="margin:0;font-size:14px;color:#EE7A2D;letter-spacing:4px;">· · ·</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖章编号标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖章编号标题</p>
|
||||
<section id="block-wo-title-numbered" style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;margin-right:12px;font-size:25px;font-weight:bold;color:#EE7A2D;vertical-align:middle;">01</span>
|
||||
<span style="display:inline-block;font-size:20px;font-weight:bold;color:#3D3229;vertical-align:middle;">章节标题占位一</span>
|
||||
</p>
|
||||
<p style="margin:0;padding-top:8px;border-top:2px dotted #F9E3CE;font-size:14px;color:#C2541A;">章节摘要占位：编号章节的一句摘要</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 栏目贴纸标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">栏目贴纸标题</p>
|
||||
<section id="block-wo-title-label" style="margin:0;padding:8px 2px;">
|
||||
<p style="margin:0 0 10px;"><span style="display:inline-block;padding:5px 16px;border-radius:12px;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;box-shadow:0 4px 10px rgba(238,122,45,0.25);">栏目标签占位</span></p>
|
||||
<p style="margin:0;font-size:19px;font-weight:bold;color:#3D3229;">栏目标题占位：贴纸下方的标题行</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 呼吸正文段落 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">呼吸正文段落</p>
|
||||
<section id="block-wo-para-breath" style="margin:0;padding:4px 6px;">
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;">正文段落占位：这里是放松呼吸的正文区域，行距放宽、句子放短。占位文字用来展示段落节奏与留白比例，两到三行为一组，读起来不赶时间。</p>
|
||||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;">正文段落占位：第二段承接第一段的话题继续展开，保持同样的字重与行高，让整页像一杯慢慢降温的热茶，信息清晰但没有压迫感。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖点引导段落 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖点引导段落</p>
|
||||
<section id="block-wo-para-lead" style="margin:0;padding:4px 6px;">
|
||||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span style="background:#F9E3CE;color:#C2541A;font-weight:bold;padding:2px 8px;border-radius:6px;margin-right:6px;">引导短语占位</span>正文占位：开头用一枚浅杏色的高亮短语轻轻拉住视线，后面的文字自然展开，用来说明这一段的重点句式与节奏。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 浅杏底纹强调段 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">浅杏底纹强调段</p>
|
||||
<section id="block-wo-para-emphasis" style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:18px;border-left:6px solid #EE7A2D;">
|
||||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;">重点段落占位：需要读者慢下来多看一眼的内容放在这里。浅杏衬底加左侧暖橙竖线，强调而不喊叫，适合放核心观点或安抚性的说明。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 行内代码段落 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">行内代码段落</p>
|
||||
<section id="block-wo-para-code" style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0;font-size:16px;line-height:2.1;color:#3D3229;text-align:justify;">说明文字占位：正文中出现配置项或命令时，使用行内代码样式，例如 <code style="font-family:Menlo,Consolas,monospace;font-size:14px;color:#C2541A;background:#F9E3CE;padding:2px 8px;border-radius:6px;">配置项占位</code> 或 <code style="font-family:Menlo,Consolas,monospace;font-size:14px;color:#C2541A;background:#F9E3CE;padding:2px 8px;border-radius:6px;">命令占位</code>，保持柔和的可读性。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 热茶引语卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">热茶引语卡</p>
|
||||
<section id="block-wo-quote-tea" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 8px;font-size:25px;line-height:1;color:#EE7A2D;font-weight:bold;">“</p>
|
||||
<p style="margin:0 0 14px;font-size:17px;line-height:1.9;color:#3D3229;">引用内容占位：一段值得慢慢读的话放在这里，像热茶冒着的一缕气，轻轻落在页面中间。</p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||||
<p style="margin:0;font-size:14px;color:#C2541A;text-align:right;">—— 引用署名占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 居中轻引言 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">居中轻引言</p>
|
||||
<section id="block-wo-quote-center" style="margin:0;padding:20px 12px;text-align:center;">
|
||||
<p style="margin:0 0 10px;font-size:13px;color:#EE7A2D;letter-spacing:6px;">· · ·</p>
|
||||
<p style="margin:0 0 8px;font-size:17px;line-height:1.9;color:#3D3229;">引言文字占位：居中排布的一句轻声话。</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">—— 引用出处占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖心提示卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖心提示卡</p>
|
||||
<section id="block-wo-notice-warm" style="margin:0;padding:16px 12px;background:#FFFFFF;border:2px solid #F9E3CE;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.08);">
|
||||
<p style="margin:0 0 8px;"><span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;">提示标签占位</span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;">提示说明占位：温和的信息提示放在这里，例如阅读建议、氛围说明或背景补充，语气保持轻柔。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 温和提醒卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">温和提醒卡</p>
|
||||
<section id="block-wo-notice-caution" style="margin:0;padding:14px 12px;background:#FDFBF7;border:2px dashed #EE7A2D;border-radius:18px;">
|
||||
<p style="margin:0 0 6px;font-size:15px;font-weight:bold;color:#C2541A;">注意标签占位</p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;">提醒说明占位：需要读者留意但不必紧张的内容，用虚线暖框表达，提醒而不吓人。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 安心确认卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">安心确认卡</p>
|
||||
<section id="block-wo-notice-reassure" style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:22px;border-left:6px solid #EE7A2D;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 8px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;">✓</span><span style="font-weight:bold;vertical-align:middle;">确认标题占位</span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;">确认说明占位：已经完成或可以放心的事项写在这里，给读者一个落地的安心感。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 陪伴留声卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">陪伴留声卡</p>
|
||||
<section id="block-wo-notice-companion" style="margin:0;padding:18px 14px;background:linear-gradient(180deg,#F9E3CE,#FDFBF7);border-radius:22px;">
|
||||
<p style="margin:0 0 8px;font-size:14px;color:#C2541A;">陪伴小语占位 ♡</p>
|
||||
<p style="margin:0 0 12px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;">陪伴语句占位：写给此刻正在阅读的人的一句话，承认情绪、给出陪伴，不做评判。</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;text-align:right;">落款占位 · 留声说明占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 圆点清单卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">圆点清单卡</p>
|
||||
<section id="block-wo-list-dots" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;">清单标题占位</p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">清单条目占位一：短句说明</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">清单条目占位二：短句说明</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">清单条目占位三：短句说明</span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">清单条目占位四：短句说明</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖序步骤列表 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖序步骤列表</p>
|
||||
<section id="block-wo-list-steps" style="margin:0;padding:18px 14px;background:#F9E3CE;border-radius:22px;">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;">有序清单标题占位</p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:24px;height:24px;line-height:24px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">1</span><span style="vertical-align:middle;">列表条目占位一</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:24px;height:24px;line-height:24px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">2</span><span style="vertical-align:middle;">列表条目占位二</span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:24px;height:24px;line-height:24px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">3</span><span style="vertical-align:middle;">列表条目占位三</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 心愿任务清单 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">心愿任务清单</p>
|
||||
<section id="block-wo-list-tasks" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;">任务清单标题占位</p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">✓</span><span style="vertical-align:middle;">任务条目占位一（已完成占位）</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">✓</span><span style="vertical-align:middle;">任务条目占位二（已完成占位）</span></p>
|
||||
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:15px;border-radius:50%;border:2px solid #EE7A2D;background:#FDFBF7;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">任务条目占位三（待完成占位）</span></p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">完成度说明占位：示例数字 2 / 3</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 词语标签云 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">词语标签云</p>
|
||||
<section id="block-wo-list-tags" style="margin:0;padding:20px 22px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 12px;font-size:14px;font-weight:bold;color:#C2541A;">词语云说明占位：氛围关键词陈列</p>
|
||||
<p style="margin:0;font-size:14px;line-height:2.4;">
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;">词语占位一</span>
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:14px;font-weight:bold;">词语占位二</span>
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;">词语占位三</span>
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;">词语占位四</span>
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;border:2px dashed #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;">词语占位五</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 要点三束卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">要点三束卡</p>
|
||||
<section id="block-wo-list-triple" style="margin:0;padding:4px;">
|
||||
<section style="margin:0 0 12px;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;padding:2px 10px;border-radius:8px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;margin-right:8px;vertical-align:middle;">要点一</span><span style="vertical-align:middle;">要点标题占位一</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">要点说明占位：一句话解释第一个要点。</p>
|
||||
</section>
|
||||
<section style="margin:0 0 12px;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;padding:2px 10px;border-radius:8px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;margin-right:8px;vertical-align:middle;">要点二</span><span style="vertical-align:middle;">要点标题占位二</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">要点说明占位：一句话解释第二个要点。</p>
|
||||
</section>
|
||||
<section style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;padding:2px 10px;border-radius:8px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;margin-right:8px;vertical-align:middle;">要点三</span><span style="vertical-align:middle;">要点标题占位三</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">要点说明占位：一句话解释第三个要点。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 圆角大图卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">圆角大图卡</p>
|
||||
<figure id="block-wo-media-photo" style="margin:0;padding:14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<img src="https://placehold.orence.net/640x400/EE7A2D/FDFBF7?text=Photo+Placeholder" alt="正文配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
|
||||
<figcaption style="margin:12px 6px 2px;padding-top:10px;border-top:2px dotted #F9E3CE;font-size:14px;color:#C2541A;text-align:center;">图片说明占位：图注文字放这里</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 拍立得图文卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">拍立得图文卡</p>
|
||||
<figure id="block-wo-media-polaroid" style="margin:0;padding:16px 16px 16px;background:#FFFFFF;border-radius:18px;box-shadow:0 8px 20px rgba(238,122,45,0.12);">
|
||||
<span style="display:block;width:72px;height:14px;margin:0 auto 12px;border-radius:999px;background:#F9E3CE;"></span>
|
||||
<img src="https://placehold.orence.net/520x340/C2541A/F9E3CE?text=Life+Moment" alt="生活方式配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:12px;">
|
||||
<figcaption style="margin:12px 4px 0;">
|
||||
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;">图注标题占位</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">图注说明占位：写一句和图片心情一致的话。</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 双图柔和对比卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">双图柔和对比卡</p>
|
||||
<figure id="block-wo-media-duo" style="margin:0;padding:18px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<img src="https://placehold.orence.net/600x340/F9E3CE/C2541A?text=Compare+A" alt="对比图一占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
|
||||
<figcaption style="margin:8px 4px 0;font-size:14px;color:#3D3229;text-align:center;">对比图注占位一</figcaption>
|
||||
<p style="margin:12px 0;text-align:center;"><span style="display:inline-block;padding:3px 16px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;">对比占位</span></p>
|
||||
<img src="https://placehold.orence.net/600x340/EE7A2D/FDFBF7?text=Compare+B" alt="对比图二占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
|
||||
<figcaption style="margin:8px 4px 0;font-size:14px;color:#3D3229;text-align:center;">对比图注占位二</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 静态视频占位卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">静态视频占位卡</p>
|
||||
<figure id="block-wo-media-video" style="margin:0;padding:16px 16px 18px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<img src="https://placehold.orence.net/640x360/C2541A/F9E3CE?text=Video+Placeholder" alt="视频封面占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
|
||||
<figcaption style="margin:14px 4px 0;text-align:center;">
|
||||
<span style="display:inline-block;width:40px;height:40px;line-height:40px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:17px;font-weight:bold;text-align:center;box-shadow:0 4px 12px rgba(238,122,45,0.30);">▶</span>
|
||||
<p style="margin:10px 0 2px;font-size:15px;font-weight:bold;color:#3D3229;">视频说明占位</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">时长占位 · 封面说明占位</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 浅杏代码块 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">浅杏代码块</p>
|
||||
<section id="block-wo-code-light" style="margin:0;background:#F9E3CE;border-radius:18px;overflow:hidden;">
|
||||
<p style="margin:0;padding:10px 18px;font-size:13px;color:#C2541A;"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"></span><span style="vertical-align:middle;">代码说明占位 · 代码块标题占位</span></p>
|
||||
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border-radius:0 0 18px 18px;">
|
||||
<code style="font-family:Menlo,Consolas,monospace;font-size:14px;line-height:1.9;color:#3D3229;"><span style="color:#C2541A;">// 说明注释占位</span><br>const warmConfig = {<br> fieldA: <span style="color:#EE7A2D;">"字段占位一"</span>,<br> fieldB: <span style="color:#EE7A2D;">"字段占位二"</span><br>};</code>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖框代码块 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖框代码块</p>
|
||||
<section id="block-wo-code-warm" style="margin:0;padding:16px 12px;background:#FFFFFF;border:2px solid #EE7A2D;border-radius:22px;">
|
||||
<p style="margin:0 0 10px;font-size:14px;font-weight:bold;color:#C2541A;">代码标题占位：终端样式说明</p>
|
||||
<code style="font-family:Menlo,Consolas,monospace;font-size:14px;line-height:1.9;color:#3D3229;">$ 命令占位 --参数占位<br>> 输出说明占位一<br>> 输出说明占位二<br>完成提示占位 ✓</code>
|
||||
</section>
|
||||
|
||||
<!-- Block: 轻盈指标条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">轻盈指标条</p>
|
||||
<section id="block-wo-data-metrics" style="margin:0;padding:4px;">
|
||||
<section style="margin:0 0 10px;padding:12px 12px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;">82%</span><span style="vertical-align:middle;">指标名称占位一 · 指标说明占位</span></p>
|
||||
</section>
|
||||
<section style="margin:0 0 10px;padding:12px 12px;background:#FFFFFF;border-radius:14px;box-shadow:0 4px 12px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;">1200+</span><span style="vertical-align:middle;">指标名称占位二 · 指标说明占位</span></p>
|
||||
</section>
|
||||
<section style="margin:0;padding:12px 12px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;">4.8</span><span style="vertical-align:middle;">指标名称占位三 · 指标说明占位</span></p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 字段数据表 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">字段数据表</p>
|
||||
<section id="block-wo-data-table" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;font-size:18px;font-weight:bold;color:#3D3229;">表格标题占位</p>
|
||||
<p style="margin:0 0 14px;font-size:13px;color:#C2541A;">表格说明占位：字段与示例数据的对照</p>
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;color:#3D3229;">
|
||||
<tr>
|
||||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;">字段占位一</td>
|
||||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;">字段占位二</td>
|
||||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;">字段占位三</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 01</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 02</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 03</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 04</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 05</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 06</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 07</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 08</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 09</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖橙进度条组 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖橙进度条组</p>
|
||||
<section id="block-wo-data-progress" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 16px;font-size:18px;font-weight:bold;color:#3D3229;">进度标题占位</p>
|
||||
<p style="margin:0 0 6px;font-size:14px;color:#3D3229;">进度项占位一 · 80%</p>
|
||||
<section style="margin:0 0 16px;height:12px;background:#F9E3CE;border-radius:999px;"><section style="width:80%;height:12px;background:#EE7A2D;border-radius:999px;"></section></section>
|
||||
<p style="margin:0 0 6px;font-size:14px;color:#3D3229;">进度项占位二 · 60%</p>
|
||||
<section style="margin:0 0 16px;height:12px;background:#F9E3CE;border-radius:999px;"><section style="width:60%;height:12px;background:#C2541A;border-radius:999px;"></section></section>
|
||||
<p style="margin:0 0 6px;font-size:14px;color:#3D3229;">进度项占位三 · 45%</p>
|
||||
<section style="margin:0;height:12px;background:#F9E3CE;border-radius:999px;"><section style="width:45%;height:12px;background:#EE7A2D;border-radius:999px;"></section></section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 指标圆卡组 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">指标圆卡组</p>
|
||||
<section id="block-wo-data-stats" style="margin:0;padding:4px;">
|
||||
<section style="margin:0 0 12px;padding:18px;background:#FFFFFF;border-radius:20px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;">
|
||||
<span style="display:inline-block;width:48px;height:48px;line-height:48px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:21px;font-weight:bold;text-align:center;margin-right:14px;vertical-align:middle;">A</span>
|
||||
<span style="display:inline-block;vertical-align:middle;"><span style="display:block;font-size:23px;font-weight:bold;color:#3D3229;line-height:1.4;">数字占位一</span><span style="display:block;font-size:13px;color:#C2541A;">指标名称占位一</span></span>
|
||||
</p>
|
||||
<p style="margin:6px 0 0;font-size:14px;line-height:1.8;color:#3D3229;">指标说明占位：用一句话解释这个数字代表什么。</p>
|
||||
</section>
|
||||
<section style="margin:0;padding:18px;background:#FFFFFF;border-radius:20px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;">
|
||||
<span style="display:inline-block;width:48px;height:48px;line-height:48px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:21px;font-weight:bold;text-align:center;margin-right:14px;vertical-align:middle;">B</span>
|
||||
<span style="display:inline-block;vertical-align:middle;"><span style="display:block;font-size:23px;font-weight:bold;color:#3D3229;line-height:1.4;">数字占位二</span><span style="display:block;font-size:13px;color:#C2541A;">指标名称占位二</span></span>
|
||||
</p>
|
||||
<p style="margin:6px 0 0;font-size:14px;line-height:1.8;color:#3D3229;">指标说明占位：轻量数据摘要，不做厚重的参数矩阵。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 前后对照卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">前后对照卡</p>
|
||||
<section id="block-wo-compare-contrast" style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 12px;font-size:18px;font-weight:bold;color:#3D3229;">对照标题占位</p>
|
||||
<section style="margin:0 0 10px;padding:14px 12px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0 0 4px;font-size:14px;font-weight:bold;color:#C2541A;">对照项标签占位：调整前占位</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">对照说明占位：描述原来的状态或做法。</p>
|
||||
</section>
|
||||
<p style="margin:0 0 10px;text-align:center;font-size:17px;color:#EE7A2D;font-weight:bold;">↓</p>
|
||||
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0 0 4px;font-size:14px;font-weight:bold;color:#C2541A;">对照项标签占位：调整后占位</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">对照说明占位：描述变化之后的状态或感受。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 轻重对照清单 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">轻重对照清单</p>
|
||||
<section id="block-wo-compare-pros" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 12px;font-size:18px;font-weight:bold;color:#3D3229;">对照清单标题占位</p>
|
||||
<section style="margin:0 0 14px;padding:14px 12px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0 0 8px;font-size:14px;font-weight:bold;color:#C2541A;">优势组标签占位</p>
|
||||
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">✓</span>优势条目占位一</p>
|
||||
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">✓</span>优势条目占位二</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">✓</span>优势条目占位三</p>
|
||||
</section>
|
||||
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border:2px dashed #EE7A2D;border-radius:14px;">
|
||||
<p style="margin:0 0 8px;font-size:14px;font-weight:bold;color:#C2541A;">留意组标签占位</p>
|
||||
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#C2541A;font-weight:bold;margin-right:8px;">—</span>注意条目占位一</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#C2541A;font-weight:bold;margin-right:8px;">—</span>注意条目占位二</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 情境对照条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">情境对照条</p>
|
||||
<section id="block-wo-compare-scene" style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:14px;color:#C2541A;">情境对照说明占位：两种使用情境的并置</p>
|
||||
<p style="margin:0 0 12px;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;padding:3px 12px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;margin-right:10px;vertical-align:middle;">情境一占位</span><span style="vertical-align:middle;">情境说明占位：适合安静独处的场景。</span></p>
|
||||
<p style="margin:0;padding:10px 2px 0;font-size:15px;color:#3D3229;"><span style="display:inline-block;padding:3px 12px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;margin-right:10px;vertical-align:middle;">情境二占位</span><span style="vertical-align:middle;">情境说明占位：适合与人分享的场景。</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 三步流程圆点卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">三步流程圆点卡</p>
|
||||
<section id="block-wo-process-steps" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 16px;font-size:18px;font-weight:bold;color:#3D3229;">流程标题占位</p>
|
||||
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">1</span><span style="vertical-align:middle;">步骤标题占位一</span></p>
|
||||
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;">流程说明占位：第一步先做这件事。</p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||||
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">2</span><span style="vertical-align:middle;">步骤标题占位二</span></p>
|
||||
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;">流程说明占位：第二步接着做这件事。</p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||||
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">3</span><span style="vertical-align:middle;">步骤标题占位三</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;">流程说明占位：第三步收尾并确认。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖色时间线 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖色时间线</p>
|
||||
<section id="block-wo-process-timeline" style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;">时间线标题占位</p>
|
||||
<section style="margin:0;padding:2px 0 2px 16px;border-left:2px dotted #EE7A2D;">
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">●</span><span style="font-weight:bold;">时间节点占位一</span></p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;">节点说明占位：这一阶段发生了什么。</p>
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">●</span><span style="font-weight:bold;">时间节点占位二</span></p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;">节点说明占位：这一阶段的心情或变化。</p>
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">●</span><span style="font-weight:bold;">时间节点占位三</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">节点说明占位：时间线在这里收束。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 步骤大数字卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">步骤大数字卡</p>
|
||||
<section id="block-wo-process-numbered" style="margin:0;padding:4px;">
|
||||
<section style="margin:0 0 12px;padding:18px;background:#F9E3CE;border-radius:20px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;width:52px;height:52px;line-height:52px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:21px;font-weight:bold;text-align:center;margin-right:14px;vertical-align:middle;box-shadow:0 4px 12px rgba(238,122,45,0.30);">01</span>
|
||||
<span style="display:inline-block;font-size:17px;font-weight:bold;color:#3D3229;vertical-align:middle;">阶段标题占位一</span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">阶段说明占位：这一阶段的动作与感受说明，控制在两行以内。</p>
|
||||
</section>
|
||||
<section style="margin:0;padding:18px;background:#FFFFFF;border-radius:20px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;width:52px;height:52px;line-height:52px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:21px;font-weight:bold;text-align:center;margin-right:14px;vertical-align:middle;box-shadow:0 4px 12px rgba(238,122,45,0.30);">02</span>
|
||||
<span style="display:inline-block;font-size:17px;font-weight:bold;color:#3D3229;vertical-align:middle;">阶段标题占位二</span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">阶段说明占位：浅杏衬底与白底卡片交替，形成大圆角的呼吸节奏。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 问答呼吸卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">问答呼吸卡</p>
|
||||
<section id="block-wo-faq-breathe" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 16px;font-size:18px;font-weight:bold;color:#3D3229;">常见问答标题占位</p>
|
||||
<p style="margin:0 0 8px;font-size:15px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;">问</span><span style="vertical-align:middle;">常见问题占位一</span></p>
|
||||
<section style="margin:0 0 18px;padding:12px 16px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">答案说明占位：用平稳的语气回答第一个问题。</p>
|
||||
</section>
|
||||
<p style="margin:0 0 8px;font-size:15px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;">问</span><span style="vertical-align:middle;">常见问题占位二</span></p>
|
||||
<section style="margin:0;padding:12px 16px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">答案说明占位：第二个问题的回答同样保持柔和。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 问答折叠样式卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">问答折叠样式卡</p>
|
||||
<section id="block-wo-faq-folded" style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 10px;font-size:14px;color:#C2541A;">折叠问答说明占位：静态折叠样式示意</p>
|
||||
<p style="margin:0 0 4px;padding:12px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="font-weight:bold;color:#C2541A;margin-right:8px;">Q1</span>问题标题占位一</p>
|
||||
<p style="margin:0 0 12px;font-size:13px;color:#EE7A2D;text-align:right;">＋ 展开查看占位</p>
|
||||
<p style="margin:0 0 4px;padding:12px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="font-weight:bold;color:#C2541A;margin-right:8px;">Q2</span>问题标题占位二</p>
|
||||
<p style="margin:0;font-size:13px;color:#EE7A2D;text-align:right;">＋ 展开查看占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 延伸阅读暖卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">延伸阅读暖卡</p>
|
||||
<section id="block-wo-resource-reading" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;">延伸阅读标题占位</p>
|
||||
<p style="margin:0 0 12px;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">●</span>延伸标题占位一<span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;">分类占位 · 阅读量占位</span></p>
|
||||
<p style="margin:0 0 12px;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">●</span>延伸标题占位二<span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;">分类占位 · 阅读量占位</span></p>
|
||||
<p style="margin:0;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">●</span>延伸标题占位三<span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;">分类占位 · 阅读量占位</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 资料引导条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">资料引导条</p>
|
||||
<section id="block-wo-resource-guide" style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:22px;">
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:34px;height:34px;line-height:34px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:16px;font-weight:bold;text-align:center;margin-right:12px;vertical-align:middle;">↓</span><span style="vertical-align:middle;">资料说明占位：配套资料与获取方式说明。</span></p>
|
||||
<p style="margin:0;"><span style="display:inline-block;padding:9px 26px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:15px;font-weight:bold;">获取方式占位</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 作者暖名卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">作者暖名卡</p>
|
||||
<section id="block-wo-author-card" style="margin:0;padding:20px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
|
||||
<img src="https://placehold.orence.net/140x140/F9E3CE/EE7A2D?text=Avatar" alt="作者头像占位" style="max-width:100%;height:auto;display:block;margin:0 auto;width:84px;border-radius:50%;border:3px solid #F9E3CE;">
|
||||
<p style="margin:12px 0 2px;font-size:19px;font-weight:bold;color:#3D3229;">作者名占位</p>
|
||||
<p style="margin:0 0 10px;font-size:13px;color:#C2541A;">作者身份占位 · 领域占位</p>
|
||||
<p style="margin:0 0 14px;font-size:14px;line-height:1.8;color:#3D3229;">作者简介占位：一句话介绍作者的兴趣与写作方向。</p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 14px;">
|
||||
<span style="display:inline-block;padding:8px 28px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);">关注按钮占位</span>
|
||||
</section>
|
||||
|
||||
<!-- Block: 联系方式卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">联系方式卡</p>
|
||||
<section id="block-wo-author-contact" style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;">联系标题占位</p>
|
||||
<p style="margin:0 0 10px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">渠道占位一：联系信息占位一</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">渠道占位二：联系信息占位二</span></p>
|
||||
<p style="margin:0;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">渠道占位三：联系信息占位三</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 居中花点分隔 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">居中花点分隔</p>
|
||||
<p id="block-wo-divider-center" style="margin:10px 0;text-align:center;font-size:13px;color:#EE7A2D;letter-spacing:10px;">· ● ·</p>
|
||||
|
||||
<!-- Block: 暖橙主行动卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖橙主行动卡</p>
|
||||
<section id="block-wo-cta-action" style="margin:0;padding:24px 14px;background:#EE7A2D;border-radius:24px;box-shadow:0 10px 24px rgba(238,122,45,0.28);text-align:center;">
|
||||
<p style="margin:0 0 8px;font-size:23px;line-height:1.5;font-weight:bold;color:#FFFFFF;">行动主标题占位</p>
|
||||
<p style="margin:0 0 18px;font-size:14px;line-height:1.8;color:#FDFBF7;">行动说明占位：一句话说清楚下一步做什么，语气积极。</p>
|
||||
<span style="display:inline-block;padding:11px 34px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:16px;font-weight:bold;box-shadow:0 4px 12px rgba(61,50,41,0.15);">按钮文案占位</span>
|
||||
<p style="margin:12px 0 0;font-size:13px;color:#F9E3CE;">行动备注占位：补充说明一行</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 双按钮行动条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">双按钮行动条</p>
|
||||
<section id="block-wo-cta-buttons" style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
|
||||
<p style="margin:0 0 14px;font-size:16px;font-weight:bold;color:#3D3229;">双按钮标题占位</p>
|
||||
<p style="margin:0 0 12px;"><span style="display:inline-block;padding:10px 30px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);">主按钮占位</span></p>
|
||||
<p style="margin:0;"><span style="display:inline-block;padding:9px 30px;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;background:#FFFFFF;font-size:15px;font-weight:bold;">次按钮占位</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 邀约互动卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">邀约互动卡</p>
|
||||
<section id="block-wo-cta-invite" style="margin:0;padding:24px;background:linear-gradient(180deg,#F9E3CE,#FDFBF7);border-radius:24px;text-align:center;">
|
||||
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;">邀约标题占位</p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;">邀约说明占位：邀请读者一起参与某件温柔的小事。</p>
|
||||
<span style="display:inline-block;padding:10px 30px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);">留言互动占位</span>
|
||||
</section>
|
||||
|
||||
<!-- Block: 温暖收束卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">温暖收束卡</p>
|
||||
<section id="block-wo-ending-warm" style="margin:0;padding:20px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;"><span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;">结语标签占位</span></p>
|
||||
<p style="margin:0 0 14px;font-size:20px;font-weight:bold;color:#3D3229;">收束标题占位</p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">收束要点占位一</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">收束要点占位二</span></p>
|
||||
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"></span><span style="vertical-align:middle;">收束要点占位三</span></p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 12px;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#C2541A;">结语文字占位：一句收尾的温暖话，像把杯子轻轻放回桌上。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 互动留言区 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">互动留言区</p>
|
||||
<section id="block-wo-ending-interact" style="margin:0;padding:20px 14px;background:#F9E3CE;border-radius:22px;text-align:center;">
|
||||
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;">互动问题占位</p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;">互动引导占位：把问题抛给读者，邀请他们在留言区聊聊。</p>
|
||||
<p style="margin:0 0 14px;">
|
||||
<span style="display:inline-block;padding:7px 22px;margin:0 6px 8px 0;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:14px;font-weight:bold;">选项占位一</span>
|
||||
<span style="display:inline-block;padding:7px 22px;margin:0 0 8px 6px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:14px;font-weight:bold;">选项占位二</span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">留言引导占位：点赞占位 · 在看占位 · 分享占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 再会祝福尾签 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">再会祝福尾签</p>
|
||||
<section id="block-wo-ending-blessing" style="margin:0;padding:22px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
|
||||
<p style="margin:0 0 8px;font-size:13px;color:#EE7A2D;letter-spacing:6px;">· · ·</p>
|
||||
<p style="margin:0 0 6px;font-size:17px;line-height:1.8;font-weight:bold;color:#3D3229;">祝福语占位：愿你今天也被温柔对待</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">结尾落款占位 · 下期预告占位</p>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -17,6 +17,12 @@
|
||||
- 代码/命令/Prompt → common-components 1a/1b 代码块（**必须**，塞普通段落会丢缩进）；行内 code → 1c
|
||||
- 图片 → 2a（只有 `` 真有说明文字才加说明行，不编造）；**融合**：本地 `imgs/*.png` 路径原样保留，草稿箱同步时由 publish_draft.py 替换为微信域名
|
||||
|
||||
## 版式基线（融合 v1.5.1，全主题强制）
|
||||
|
||||
1. **开篇轻量铁律**：开篇组件只做「栏目标签 + 一句话导语/金句」的轻量形态——**不放大字主标题、不放头图照片、不放公司落款**。公众号后台已承担标题、封面图、账号名三样，正文开篇再出现就是信息重复。原头图并入正文首个图位；导语文案与外标题两层错开，禁止复述其核心关键词。
|
||||
2. **侧边距上限**：微信 App 自带 ~20px 页面边距是唯一主边距，HTML 各层合计每侧 ≤16px——容器/模块侧边 ≤6px；卡片侧边 10~14px；卡内嵌强调块 ≤12px。正文列宽占屏宽 ≥80%（文字距屏边约 30~34px 含 App 边距）。多层嵌套时从外到内逐层递减，宁可卡片贴边也不要正文列变窄。
|
||||
3. **字号阶梯**：正文 16px 起步（密集型主题最低 15px）；辅文/摘要/目录行 15px 起步；标签/图注 13~14px；≤11px 仅限装饰性微标（大写 letter-spacing 标签、水印编号、票据撕票行），不得用于正文与辅文。
|
||||
|
||||
## 智能处理（装配时必须做）
|
||||
|
||||
1. **章节自动编号**：按正文章节标题顺序编 01/02/03…（「融合」本工坊文章的章节是 `###`，按 `###` 计数——见 style-rules 标题层级，不用 `##`）；末章为结语/总结时用主题库指定的结语编号变体（如 `∞`）。
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#FF5F56;margin-right:7px;font-size:0;line-height:0;overflow:hidden;">.</span>
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#FFBD2E;margin-right:7px;font-size:0;line-height:0;overflow:hidden;">.</span>
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#27C93F;font-size:0;line-height:0;overflow:hidden;">.</span>
|
||||
<span style="margin-left:12px;font-size:12px;color:#64748B;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">python</span></span>
|
||||
<span style="margin-left:12px;font-size:13px;color:#64748B;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">python</span></span>
|
||||
</section>
|
||||
<section style="padding:11px 14px;">
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#E2E8F0;"><span leaf="">def make_skill(name):</span></p>
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#E2E8F0;"><span leaf=""> return f"已生成 {name}"</span></p>
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#E2E8F0;"><span leaf="">print(make_skill("gzh-design"))</span></p>
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;line-height:1.6;color:#E2E8F0;"><span leaf="">def make_skill(name):</span></p>
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;line-height:1.6;color:#E2E8F0;"><span leaf=""> return f"已生成 {name}"</span></p>
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;line-height:1.6;color:#E2E8F0;"><span leaf="">print(make_skill("gzh-design"))</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -37,10 +37,10 @@
|
||||
```html
|
||||
<section style="margin:0 0 20px;border-radius:8px;overflow:hidden;background:#F6F8FA;border:1px solid #E5E7EB;border-left:3px solid #DC2626;">
|
||||
<section style="padding:7px 14px;border-bottom:1px solid #E5E7EB;">
|
||||
<span style="font-size:12px;color:#9CA3AF;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">bash</span></span>
|
||||
<span style="font-size:13px;color:#9CA3AF;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">bash</span></span>
|
||||
</section>
|
||||
<section style="padding:11px 14px;">
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#24292F;"><span leaf="">npx skills add gzh-design</span></p>
|
||||
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;line-height:1.6;color:#24292F;"><span leaf="">npx skills add gzh-design</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -50,7 +50,7 @@
|
||||
### 1c. 行内代码（正文中的 `code` 短片段）
|
||||
|
||||
```html
|
||||
<span style="background:#F1F5F9;color:#DC2626;padding:1px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;"><span leaf="">SKILL.md</span></span>
|
||||
<span style="background:#F1F5F9;color:#DC2626;padding:1px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:15px;"><span leaf="">SKILL.md</span></span>
|
||||
```
|
||||
|
||||
（文字色 `#DC2626` 换主题主色；底色保持中性浅灰。）
|
||||
@@ -69,7 +69,7 @@
|
||||
<span leaf=""><img src="图片URL" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
</section>
|
||||
<p style="font-size:12px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
|
||||
<p style="font-size:13px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
|
||||
<span leaf="">— 图片说明文字</span>
|
||||
</p>
|
||||
```
|
||||
@@ -88,7 +88,7 @@
|
||||
</section>
|
||||
<p style="text-align:center;margin:0 0 24px;">
|
||||
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;font-size:11px;font-weight:700;padding:1px 8px;border-radius:4px;margin-right:6px;"><span leaf="">GIF 动图</span></span>
|
||||
<span style="font-size:12px;color:#9CA3AF;"><span leaf="">动图说明文字</span></span>
|
||||
<span style="font-size:13px;color:#9CA3AF;"><span leaf="">动图说明文字</span></span>
|
||||
</p>
|
||||
```
|
||||
|
||||
@@ -102,9 +102,9 @@
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 24px;padding:30px 20px;border:1.5px dashed #DAD7D2;border-radius:14px;background:#FAFAF8;text-align:center;">
|
||||
<p style="margin:0 0 10px;font-size:26px;line-height:1;"><span leaf="">🎬</span></p>
|
||||
<p style="margin:0;font-size:14px;font-weight:700;color:#9CA3AF;letter-spacing:1px;"><span leaf="">待补素材</span></p>
|
||||
<p style="margin:8px 0 0;font-size:13px;color:#B8B5B0;line-height:1.7;"><span leaf="">此处插入：创建 skill 的录屏演示</span></p>
|
||||
<p style="margin:0 0 10px;font-size:27px;line-height:1;"><span leaf="">🎬</span></p>
|
||||
<p style="margin:0;font-size:15px;font-weight:700;color:#9CA3AF;letter-spacing:1px;"><span leaf="">待补素材</span></p>
|
||||
<p style="margin:8px 0 0;font-size:14px;color:#B8B5B0;line-height:1.7;"><span leaf="">此处插入：创建 skill 的录屏演示</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
### 3a. 左竖条小标题（最推荐，干净）
|
||||
|
||||
```html
|
||||
<p style="margin:28px 0 14px;font-size:16px;font-weight:800;color:#1C1917;line-height:1.5;border-left:4px solid #DC2626;padding-left:12px;">
|
||||
<p style="margin:28px 0 14px;font-size:17px;font-weight:800;color:#1C1917;line-height:1.5;border-left:4px solid #DC2626;padding-left:12px;">
|
||||
<span leaf="">小标题文字</span>
|
||||
</p>
|
||||
```
|
||||
@@ -138,14 +138,14 @@
|
||||
|
||||
```html
|
||||
<p style="margin:28px 0 14px;">
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:14px;font-weight:700;padding:5px 16px;border-radius:6px;"><span leaf="">小标题文字</span></span>
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:15px;font-weight:700;padding:5px 16px;border-radius:6px;"><span leaf="">小标题文字</span></span>
|
||||
</p>
|
||||
```
|
||||
|
||||
### 3c. 序号药丸 + 标题（清单/步骤）
|
||||
|
||||
```html
|
||||
<p style="margin:24px 0 12px;font-size:15px;font-weight:800;color:#1C1917;line-height:1.6;">
|
||||
<p style="margin:24px 0 12px;font-size:16px;font-weight:800;color:#1C1917;line-height:1.6;">
|
||||
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;border-radius:5px;padding:1px 9px;margin-right:8px;font-weight:900;"><span leaf="">01</span></span>
|
||||
<span leaf="">要点标题</span>
|
||||
</p>
|
||||
@@ -155,7 +155,7 @@
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 24px;background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:16px 20px;">
|
||||
<p style="font-size:16px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
|
||||
<p style="font-size:17px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
|
||||
<span leaf="">「这里是核心观点或关键金句」</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -168,7 +168,7 @@
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:11px;font-weight:700;padding:2px 10px;border-radius:4px;letter-spacing:1px;"><span leaf="">提示</span></span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;">
|
||||
<span leaf="">提示或旁注的正文内容</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -207,7 +207,7 @@
|
||||
也就是说，需要覆盖文章排版常见场景，但"覆盖全面"不等于"固定骨架"；你必须根据主题结构模型决定哪些类别更重、哪些类别更轻、哪些类别需要细分出更多变体。
|
||||
至少包含以下大类 Block：
|
||||
|
||||
- 头图 / Hero / 封面
|
||||
- 头图 / Hero / 封面（开篇组件必须是 ENGINE「版式基线」的轻量导语条形态：栏目标签 + 一句话导语，无大字主标题/头图/落款；正文字号 ≥15px、卡片侧边 padding ≤14px、容器/模块侧边 ≤6px（HTML 每侧合计 ≤16px））
|
||||
- 章节标题 / 小节标题 / 标签标题
|
||||
- 正文段落 / 强调段落 / 行内代码段落
|
||||
- 引用块 / 提示卡 / 警示卡 / 成功卡 / 信息卡
|
||||
|
||||
@@ -30,11 +30,11 @@
|
||||
极浅灰底： #FAFAFA（引用块 / 目录卡 / 提示块，正文底保持纯白）
|
||||
纯白底： #FFFFFF
|
||||
强调色（暖橙）： #F97316（全篇 ≤3 处，仅用于锚点点睛）
|
||||
正文字号： 15px（不可改）
|
||||
正文字号： 16px（不可改）
|
||||
行高： 1.8
|
||||
字间距： 0.3px
|
||||
最大宽度： 677px
|
||||
内容区边距： 0 10px（左右各 10px）
|
||||
内容区边距： 0 4px（模块边距，卡片侧边 10~12px）
|
||||
章节间距： 56px（后续章节 margin-top）
|
||||
```
|
||||
|
||||
@@ -63,16 +63,16 @@
|
||||
> - 纯白底 + 上下各 1px 石墨极细线框定 + 大号金句，无色块、无阴影、无圆角，完全依靠细线与留白产生质感
|
||||
|
||||
```html
|
||||
<section style="margin:10px 10px 40px;padding:32px 24px 24px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;background:#FFFFFF;">
|
||||
<section style="margin:10px 4px 40px;padding:28px 14px 20px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;background:#FFFFFF;">
|
||||
<p style="font-size:11px;color:#A1A1AA;letter-spacing:2px;margin:0 0 18px;font-weight:400;">
|
||||
<span leaf="">QUOTE</span>
|
||||
</p>
|
||||
<p style="font-size:18px;font-weight:700;color:#27272A;margin:0 0 8px;line-height:1.7;letter-spacing:0.5px;">
|
||||
<p style="font-size:19px;font-weight:700;color:#27272A;margin:0 0 8px;line-height:1.7;letter-spacing:0.5px;">
|
||||
<span leaf="">{{金句前段}}</span>
|
||||
<span style="border-bottom:2px solid #52525B;"><span leaf="">{{石墨下划线关键词}}</span></span>
|
||||
<span leaf="">{{金句收尾}}</span>
|
||||
</p>
|
||||
<p style="text-align:right;font-size:12px;color:#A1A1AA;margin:16px 0 0;letter-spacing:1px;">
|
||||
<p style="text-align:right;font-size:13px;color:#A1A1AA;margin:16px 0 0;letter-spacing:1px;">
|
||||
<span leaf="">—— {{作者名，未知则删整行}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -87,22 +87,22 @@
|
||||
> 3 个及以上章节时生成。上方极细线 + 极浅灰底，石墨灰编号 + 深炭标题，纯灰阶无橙色，大留白。展示**精选 3 个核心看点**，不是全量章节列表。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px 40px;">
|
||||
<section style="padding:0 8px 40px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 16px;letter-spacing:2px;">
|
||||
<span leaf="">本文看点</span>
|
||||
</p>
|
||||
<section style="display:flex;justify-content:space-between;">
|
||||
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 12px 16px;margin-right:8px;">
|
||||
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 10px 16px;margin-right:8px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;font-weight:500;margin:0 0 8px;letter-spacing:1px;"><span leaf="">01</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点一}}</span></p>
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点一}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 12px 16px;margin-right:8px;">
|
||||
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 10px 16px;margin-right:8px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;font-weight:500;margin:0 0 8px;letter-spacing:1px;"><span leaf="">02</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点二}}</span></p>
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点二}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 12px 16px;">
|
||||
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 10px 16px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;font-weight:500;margin:0 0 8px;letter-spacing:1px;"><span leaf="">03</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点三}}</span></p>
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点三}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -115,7 +115,7 @@
|
||||
> 无渐变、无颜色变化，单纯 1px 横向石墨极细线，两侧超大留白，呼吸感即来自此。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="padding:0 8px;">
|
||||
<section style="height:1px;background:#E4E4E7;margin:0;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
@@ -129,16 +129,16 @@
|
||||
> 核心特征：极大号石墨灰水印数字（作为背景层视觉锚）+ 英文小标签 + 深炭标题 + 底部 1px 细线。编号大字非常"现代极简"。第一章 `margin-top:16px`，后续章节 `margin-top:56px`。
|
||||
|
||||
```html
|
||||
<section style="margin-top:56px;margin-bottom:32px;padding:0 10px;">
|
||||
<section style="margin-top:56px;margin-bottom:32px;padding:0 8px;">
|
||||
<section style="position:relative;padding-bottom:20px;border-bottom:1px solid #E4E4E7;">
|
||||
<p style="font-size:48px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
|
||||
<p style="font-size:49px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
|
||||
<span leaf="">01</span>
|
||||
</p>
|
||||
<section style="margin-top:-8px;">
|
||||
<p style="font-size:10px;color:#A1A1AA;font-weight:500;letter-spacing:3px;margin:0 0 6px;text-transform:uppercase;">
|
||||
<span leaf="">{{ENGLISH TAG}}</span>
|
||||
</p>
|
||||
<h3 style="font-size:20px;font-weight:800;color:#27272A;margin:0;letter-spacing:0.5px;line-height:1.4;">
|
||||
<h3 style="font-size:21px;font-weight:800;color:#27272A;margin:0;letter-spacing:0.5px;line-height:1.4;">
|
||||
<span leaf="">{{中文章节标题}}</span>
|
||||
</h3>
|
||||
</section>
|
||||
@@ -152,7 +152,7 @@
|
||||
**结语章节变体**（编号用 `∞` 替代数字，契合极简的无限循环意象，英文标签用 `THE END` / `EPILOGUE`）：
|
||||
|
||||
```html
|
||||
<p style="font-size:48px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
|
||||
<p style="font-size:49px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
|
||||
<span leaf="">∞</span>
|
||||
</p>
|
||||
```
|
||||
@@ -168,7 +168,7 @@
|
||||
**基础段落**：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:22px;font-size:15px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
|
||||
<p style="margin-bottom:22px;font-size:16px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -176,7 +176,7 @@
|
||||
**带关键词下划线标记的段落**（推荐默认）：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:22px;font-size:15px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
|
||||
<p style="margin-bottom:22px;font-size:16px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
|
||||
<span leaf="">{{前半句}}</span>
|
||||
<span style="border-bottom:2px solid #52525B;font-weight:600;color:#27272A;"><span leaf="">{{需要强调的关键短语}}</span></span>
|
||||
<span leaf="">{{后半句}}</span>
|
||||
@@ -192,7 +192,7 @@
|
||||
> `###` 子标题用石墨左竖条 + 深炭标题，**不套用组件 5 的水印编号章节样式**（水印编号只给 `##`）。竖条 3px 石墨灰，贴合极简气质。
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;font-weight:800;color:#27272A;margin:28px 0 14px;padding-left:12px;border-left:3px solid #52525B;line-height:1.4;">
|
||||
<p style="font-size:16px;font-weight:800;color:#27272A;margin:28px 0 14px;padding-left:12px;border-left:3px solid #52525B;line-height:1.4;">
|
||||
<span leaf="">{{子标题}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -222,7 +222,7 @@
|
||||
### 7b. 极浅灰底深炭字标签（核心概念，每篇 2~4 个）
|
||||
|
||||
```html
|
||||
<span style="background:#F4F4F5;color:#27272A;padding:2px 7px;border-radius:3px;font-weight:700;font-size:14px;"><span leaf="">关键词标签</span></span>
|
||||
<span style="background:#F4F4F5;color:#27272A;padding:2px 7px;border-radius:3px;font-weight:700;font-size:15px;"><span leaf="">关键词标签</span></span>
|
||||
```
|
||||
|
||||
### 7c. 极浅灰背景高亮（次要关键词）
|
||||
@@ -252,7 +252,7 @@
|
||||
### 7g. 行内代码
|
||||
|
||||
```html
|
||||
<span style="background:#F4F4F5;color:#27272A;padding:2px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;"><span leaf="">code</span></span>
|
||||
<span style="background:#F4F4F5;color:#27272A;padding:2px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:15px;"><span leaf="">code</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
@@ -264,8 +264,8 @@
|
||||
> 左侧 3px 石墨灰竖条 + 大留白 + 深炭字，无底色，靠竖条与缩进建立层级，呼吸感极强。
|
||||
|
||||
```html
|
||||
<section style="border-left:3px solid #52525B;padding:16px 0 16px 24px;margin:0 10px 28px;">
|
||||
<p style="font-size:16px;font-weight:700;color:#27272A;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
||||
<section style="border-left:3px solid #52525B;padding:16px 0 16px 24px;margin:0 4px 28px;">
|
||||
<p style="font-size:17px;font-weight:700;color:#27272A;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
||||
<span leaf="">「{{核心观点或关键金句}}」</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -276,11 +276,11 @@
|
||||
> 极浅灰底 + 1px 细线边框，用于展示 Prompt、引用内容、示例等较长内容。
|
||||
|
||||
```html
|
||||
<section style="background:#FAFAFA;border:1px solid #E4E4E7;padding:20px 22px;margin:0 10px 28px;">
|
||||
<section style="background:#FAFAFA;border:1px solid #E4E4E7;padding:20px 14px;margin:0 4px 28px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:2px;font-weight:500;">
|
||||
<span leaf="">REFERENCE</span>
|
||||
</p>
|
||||
<p style="font-size:15px;color:#3F3F46;margin:0;line-height:1.8;text-align:justify;">
|
||||
<p style="font-size:16px;color:#3F3F46;margin:0;line-height:1.8;text-align:justify;">
|
||||
{{引用内容，可含 7d 石墨下划线等内联样式}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -291,8 +291,8 @@
|
||||
> 极细辅助灰竖条 + 小号文字，用于轻量旁注、作者旁白，不抢主文视觉。
|
||||
|
||||
```html
|
||||
<section style="border-left:2px solid #E4E4E7;padding:12px 0 12px 20px;margin:0 10px 24px;">
|
||||
<p style="font-size:13px;color:#A1A1AA;margin:0;line-height:1.8;text-align:justify;">
|
||||
<section style="border-left:2px solid #E4E4E7;padding:12px 0 12px 20px;margin:0 4px 24px;">
|
||||
<p style="font-size:14px;color:#A1A1AA;margin:0;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">{{轻量旁注内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -303,7 +303,7 @@
|
||||
> 上下 1px 细线 + 居中深炭字，用于章节之间的过渡金句。
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;margin:0 10px 24px;text-align:center;color:#27272A;font-weight:700;letter-spacing:1px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;padding:14px 10px;">
|
||||
<p style="font-size:16px;margin:0 4px 24px;text-align:center;color:#27272A;font-weight:700;letter-spacing:1px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;padding:14px 10px;">
|
||||
<span leaf="">{{居中金句}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -317,8 +317,8 @@
|
||||
> 石墨竖条 + 深炭文字，无背景色，极简提醒。
|
||||
|
||||
```html
|
||||
<section style="border-left:3px solid #27272A;padding:14px 0 14px 22px;margin:0 10px 24px;">
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
||||
<section style="border-left:3px solid #27272A;padding:14px 0 14px 22px;margin:0 4px 24px;">
|
||||
<p style="font-size:15px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
||||
<span leaf="">{{重要提示或核心结论}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -329,8 +329,8 @@
|
||||
> 橙色竖条 + 深炭文字，无背景色，是橙色在正文中最自然的出现方式。
|
||||
|
||||
```html
|
||||
<section style="border-left:3px solid #F97316;padding:14px 0 14px 22px;margin:0 10px 24px;">
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
||||
<section style="border-left:3px solid #F97316;padding:14px 0 14px 22px;margin:0 4px 24px;">
|
||||
<p style="font-size:15px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
||||
<span leaf="">{{最需要引起注意的内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -341,11 +341,11 @@
|
||||
> 极浅灰底 + 顶部深炭细线 + 多行内容，适合提示内容较多时。
|
||||
|
||||
```html
|
||||
<section style="background:#FAFAFA;border-top:2px solid #27272A;padding:18px 22px;margin:0 10px 24px;">
|
||||
<section style="background:#FAFAFA;border-top:2px solid #27272A;padding:18px 14px;margin:0 4px 24px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 10px;letter-spacing:2px;font-weight:500;">
|
||||
<span leaf="">NOTE</span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#52525B;margin:0;line-height:1.8;">
|
||||
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;">
|
||||
<span leaf="">{{较多的提示内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -363,9 +363,9 @@
|
||||
<section style="margin-bottom:22px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#27272A;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:0.5px;"><span leaf="">STEP 01</span></span>
|
||||
<span style="font-size:15px;font-weight:800;color:#27272A;"><span leaf="">{{步骤标题}}</span></span>
|
||||
<span style="font-size:16px;font-weight:800;color:#27272A;"><span leaf="">{{步骤标题}}</span></span>
|
||||
</section>
|
||||
<p style="font-size:15px;margin:0 0 16px;color:#52525B;line-height:1.8;text-align:justify;">
|
||||
<p style="font-size:16px;margin:0 0 16px;color:#52525B;line-height:1.8;text-align:justify;">
|
||||
{{步骤内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -379,7 +379,7 @@
|
||||
<section style="margin-bottom:22px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#27272A;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:0.5px;"><span leaf="">SKILL 1</span></span>
|
||||
<span style="font-size:15px;font-weight:800;color:#27272A;"><span leaf="">{{名称}}</span></span>
|
||||
<span style="font-size:16px;font-weight:800;color:#27272A;"><span leaf="">{{名称}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -389,8 +389,8 @@
|
||||
### 10c. tool-card（工具 / 条目说明卡，极简线框版）
|
||||
|
||||
```html
|
||||
<section style="border:1px solid #E4E4E7;padding:16px 20px;margin:0 10px 24px;">
|
||||
<p style="font-size:14px;color:#52525B;margin:0;line-height:1.8;">
|
||||
<section style="border:1px solid #E4E4E7;padding:16px 14px;margin:0 4px 24px;">
|
||||
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;">
|
||||
{{条目说明内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -405,16 +405,16 @@
|
||||
```html
|
||||
<section style="margin-bottom:24px;">
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
|
||||
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
|
||||
<p style="font-size:16px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
|
||||
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
|
||||
<p style="font-size:16px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
|
||||
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
|
||||
<p style="font-size:16px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -424,9 +424,9 @@
|
||||
```html
|
||||
<section style="margin-bottom:14px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;font-size:14px;font-weight:700;color:#27272A;background:#F4F4F5;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#52525B;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{要点标题}}</span></span>
|
||||
<span style="display:inline-block;font-size:15px;font-weight:700;color:#27272A;background:#F4F4F5;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#52525B;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{要点标题}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#71717A;margin:0;line-height:1.7;text-align:justify;">
|
||||
<p style="font-size:15px;color:#71717A;margin:0;line-height:1.7;text-align:justify;">
|
||||
<span leaf="">{{要点说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -441,8 +441,8 @@
|
||||
<section style="width:2px;background:#E4E4E7;flex:1;margin-top:4px;min-height:44px;"><span leaf=""><br></span></section>
|
||||
</section>
|
||||
<section style="flex:1;padding-bottom:12px;">
|
||||
<p style="margin:0 0 6px;font-size:15px;font-weight:800;color:#27272A;"><span leaf="">{{节点标题}}</span></p>
|
||||
<p style="font-size:15px;margin:0;color:#52525B;line-height:1.8;text-align:justify;">{{节点内容}}</p>
|
||||
<p style="margin:0 0 6px;font-size:16px;font-weight:800;color:#27272A;"><span leaf="">{{节点标题}}</span></p>
|
||||
<p style="font-size:16px;margin:0;color:#52525B;line-height:1.8;text-align:justify;">{{节点内容}}</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -456,13 +456,13 @@
|
||||
### 两列数据卡（极简线框版）
|
||||
|
||||
```html
|
||||
<section style="display:flex;margin:0 10px 28px;">
|
||||
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 16px;margin-right:8px;text-align:center;">
|
||||
<p style="font-size:32px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
|
||||
<section style="display:flex;margin:0 4px 28px;">
|
||||
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 12px;margin-right:8px;text-align:center;">
|
||||
<p style="font-size:33px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0;letter-spacing:1px;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 16px;text-align:center;">
|
||||
<p style="font-size:32px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
|
||||
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 12px;text-align:center;">
|
||||
<p style="font-size:33px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0;letter-spacing:1px;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
@@ -471,21 +471,21 @@
|
||||
### 三列要点卡（顶部细线版）
|
||||
|
||||
```html
|
||||
<section style="display:flex;margin:0 10px 28px;">
|
||||
<section style="flex:1;border-top:2px solid #27272A;padding:18px 12px 16px;margin-right:8px;">
|
||||
<section style="display:flex;margin:0 4px 28px;">
|
||||
<section style="flex:1;border-top:2px solid #27272A;padding:18px 10px 16px;margin-right:8px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:1px;font-weight:500;"><span leaf="">01</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
|
||||
<p style="font-size:12px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
|
||||
<p style="font-size:13px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;border-top:2px solid #27272A;padding:18px 12px 16px;margin-right:8px;">
|
||||
<section style="flex:1;border-top:2px solid #27272A;padding:18px 10px 16px;margin-right:8px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:1px;font-weight:500;"><span leaf="">02</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
|
||||
<p style="font-size:12px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
|
||||
<p style="font-size:13px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;border-top:2px solid #27272A;padding:18px 12px 16px;">
|
||||
<section style="flex:1;border-top:2px solid #27272A;padding:18px 10px 16px;">
|
||||
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:1px;font-weight:500;"><span leaf="">03</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
|
||||
<p style="font-size:12px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
|
||||
<p style="font-size:13px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -493,8 +493,8 @@
|
||||
### 表格（真实数据表用）
|
||||
|
||||
```html
|
||||
<section style="margin:0 10px 24px;overflow-x:auto;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||||
<section style="margin:0 4px 24px;overflow-x:auto;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:15px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="background:#27272A;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
||||
@@ -544,7 +544,7 @@
|
||||
> 极简线框图片容器，无圆角、无阴影，1px 细线边框延续几何极简语言。
|
||||
|
||||
```html
|
||||
<section style="border:1px solid #E4E4E7;padding:4px;margin:0 10px 12px;">
|
||||
<section style="border:1px solid #E4E4E7;padding:4px;margin:0 4px 12px;">
|
||||
<section style="margin:0;overflow:hidden;">
|
||||
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
@@ -554,7 +554,7 @@
|
||||
带说明文字时，图片容器 `margin-bottom` 改 `8px`，其后加：
|
||||
|
||||
```html
|
||||
<p style="font-size:12px;color:#A1A1AA;text-align:center;margin:0 10px 28px;letter-spacing:0.5px;">
|
||||
<p style="font-size:13px;color:#A1A1AA;text-align:center;margin:0 4px 28px;letter-spacing:0.5px;">
|
||||
<span leaf="">— {{图片说明}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -568,7 +568,7 @@ GIF 动图角标改极简描边胶囊：边框与字色用石墨主色 `#52525B`
|
||||
> 纯几何，1px 细线 + 居中 "END" 字样，石墨灰，简洁收尾。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="padding:0 8px;">
|
||||
<section style="text-align:center;margin:0 0 36px;">
|
||||
<section style="display:flex;align-items:center;justify-content:center;">
|
||||
<span style="height:1px;width:48px;background:#E4E4E7;margin-right:16px;"><span leaf=""><br></span></span>
|
||||
@@ -586,12 +586,12 @@ GIF 动图角标改极简描边胶囊：边框与字色用石墨主色 `#52525B`
|
||||
> 固定签名文案以正文段落形式呈现；有个人名片 / 引导图素材才放图，无素材整块删。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px 24px;">
|
||||
<section style="padding:0 8px 24px;">
|
||||
<section style="border-top:1px solid #E4E4E7;padding-top:28px;">
|
||||
<p style="margin-bottom:16px;font-size:15px;line-height:1.8;color:#52525B;text-align:justify;">
|
||||
<p style="margin-bottom:16px;font-size:16px;line-height:1.8;color:#52525B;text-align:justify;">
|
||||
<span leaf="">我是 {{作者名}}，{{一句话简介，如：热衷于分享 AI 观察与干货}}。</span>
|
||||
</p>
|
||||
<p style="margin-bottom:0;font-size:15px;line-height:1.8;color:#52525B;text-align:justify;">
|
||||
<p style="margin-bottom:0;font-size:16px;line-height:1.8;color:#52525B;text-align:justify;">
|
||||
<span leaf="">如果你觉得今天这篇有收获，欢迎</span>
|
||||
<strong style="color:#27272A;"><span leaf="">点赞、在看、转发</span></strong>
|
||||
<span leaf="">三连，我们下篇见。</span>
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
| 留白禅意风 | `#4A5D52` 墨绿 | 禅意冥想、极简生活、深度随笔、艺术留白（呼吸感最强） | `references/theme-zen-whitespace.md` | `border-bottom:1.5px solid #B5C8BC;font-weight:500;` |
|
||||
| 摸鱼票据风 | `#059669` emerald | 测评、工具对比、创意评测（票据/门票视觉隐喻，星级评分+编号+硬阴影卡片） | `references/theme-moyu-ticket.md` | `border-bottom:2px solid #A7F3D0;font-weight:600;` |
|
||||
| 橄榄手记 | `#1e1f23` 墨黑（配橙 `#ed7b2f`） | 内刊手记、深度评测、案例复盘、系统性说明文档（编辑部内刊质感，分节形式多样，信息密度偏高） | `references/theme-olive-journal.md` | `border-bottom:2px solid #ed7b2f;font-weight:600;` |
|
||||
| 暖橙风 | `#EE7A2D` 暖橙 | 品牌发布、产品介绍、心理陪伴、生活方式（圆角暖卡、浅杏衬底、呼吸留白） | `references/theme-warm-orange.md` | `border-bottom:2px solid #F9C9A3;font-weight:600;` |
|
||||
|
||||
## 选择建议
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
> - 所有"装饰性空元素"（圆点、渐变分割线、装饰短横、时间线竖线）**必须在内部放 `<span leaf=""><br></span>` 占位**，否则微信会剥掉样式
|
||||
> - **不要把 `font-size`/`border-bottom` 打在 `<strong>` 上**，也不要在同一个 `<p>` 里混多个不同 `font-size`——微信编辑器会自动"纠正"导致样式被重写。正确做法：拆成多个 `<p>`，每个 `<p>` 只有一个字号；高亮样式统一挂在外层 `<span>` 上
|
||||
> - 不用 `position:absolute` 做划线/高亮，删除线用 `text-decoration:line-through`
|
||||
> - 结构化区域（如封面右侧图片槽位）没有内容时**整块删掉**，不留空 section
|
||||
> - 结构化区域（如作者头像、图片说明）没有内容时**整块删掉**，不留空 section
|
||||
|
||||
---
|
||||
|
||||
@@ -39,12 +39,12 @@
|
||||
浅边框： #E5E7EB
|
||||
浅灰背景： #F3F4F6
|
||||
极浅灰： #F9FAFB
|
||||
正文字号： 14px（不可改）
|
||||
正文字号： 15px（不可改）
|
||||
正文行高： 1.9
|
||||
全局行高： 1.75
|
||||
字间距： 0.5px
|
||||
最大宽度： 677px
|
||||
内容区边距： 0 20px（模块左右各 20px）
|
||||
内容区边距： 0 12px（卡片通栏为主，卡片侧边 12px，封面卡外边距 8px）
|
||||
```
|
||||
|
||||
字体栈：`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||||
@@ -63,93 +63,35 @@
|
||||
|
||||
---
|
||||
|
||||
## 组件 2 封面 cover-breaking（杂志快讯封面）
|
||||
## 组件 2 封面 cover-breaking（快讯导语条）
|
||||
|
||||
> **文案策略（先读，比代码重要）**：
|
||||
> - 封面标题和公众号外标题是**两层标题**，必须视角错开——外标题卖"为什么点开"，封面卖"里面讲什么"
|
||||
> - 已知外标题时，主标题**禁止原样复述**其核心关键词（产品名/功能名/场景词）；未知外标题时从五个视角（**数字反差 / 角色革命 / 案例串 / 方法论 / 情绪钩子**）自选一个直出，不停下来问
|
||||
> - 产品名/功能名只允许出现在**底部品牌条**或**副标题关键词条**，不出现在大字主标题
|
||||
> - 公众号后台已承担标题、封面图、账号名，开篇不再重复——本组件**不放大字主标题、不放头图**；开篇导语和外标题是**两层**，视角错开——外标题卖"为什么点开"，导语卖"里面讲什么、读完得到什么"
|
||||
> - 已知外标题时，导语**禁止原样复述**其核心关键词（产品名/功能名/场景词）；未知外标题时从五个视角（**数字反差 / 角色革命 / 案例串 / 方法论 / 情绪钩子**）自选一个直出，不停下来问
|
||||
> - 认知翻转签名保留：划线旧认知在上，导语一句话给出新认知
|
||||
> - 产品名/功能名只允许出现在**底部品牌条**
|
||||
> - 仅当用户要求"帮我定封面方向"时才列 3-5 个方向让用户选
|
||||
|
||||
**有右侧图片版**：
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 32px;background:#fff;border:1.5px solid rgba(5,150,105,0.15);border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);width:100%;">
|
||||
<section style="padding:32px 28px 28px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:28px;">
|
||||
<section style="padding:20px 12px 18px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:20px;">
|
||||
<span style="width:6px;height:6px;background:#059669;border-radius:50%;"><span leaf=""><br></span></span>
|
||||
<span style="font-size:11px;font-weight:700;letter-spacing:3px;color:#059669;"><span leaf="">{{顶部标签}}</span></span>
|
||||
<section style="flex:1;height:1px;overflow:hidden;background:linear-gradient(to right,rgba(5,150,105,0.12),transparent);"><span leaf=""><br></span></section>
|
||||
<span style="font-size:10px;color:#D1D5DB;font-weight:600;"><span leaf="">{{日期}}</span></span>
|
||||
</section>
|
||||
<section style="display:flex;align-items:center;gap:20px;">
|
||||
<section style="flex:1;min-width:0;">
|
||||
<p style="font-size:15px;color:#D1D5DB;margin:0 0 6px;text-decoration:line-through;letter-spacing:0.5px;">
|
||||
<p style="font-size:16px;color:#D1D5DB;margin:0 0 10px;text-decoration:line-through;letter-spacing:0.5px;">
|
||||
<span leaf="">{{划线旧认知}}</span>
|
||||
</p>
|
||||
<p style="font-size:24px;font-weight:900;color:#111827;margin:0;line-height:1.05;letter-spacing:-2px;">
|
||||
<span leaf="">{{主标题行1}}</span>
|
||||
<span style="color:#059669;"><span leaf="">{{绿色高亮词}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:24px;font-weight:900;color:#059669;margin:0 0 16px;line-height:1.05;letter-spacing:-2px;">
|
||||
<span leaf="">{{主标题行2}}</span>
|
||||
</p>
|
||||
<section style="width:48px;height:3px;background:linear-gradient(to right,#059669,#34D399);border-radius:2px;margin-bottom:12px;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
||||
<span leaf="">{{副标题关键词}}</span>
|
||||
<span leaf=""><br></span></section>
|
||||
<p style="font-size:14px;color:#6B7280;margin:0;line-height:1.8;letter-spacing:0.5px;">
|
||||
<span leaf="">{{开篇导语}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="flex-shrink:0;width:110px;height:110px;border-radius:16px;overflow:hidden;border:1px solid rgba(5,150,105,0.1);box-shadow:0 4px 12px rgba(0,0,0,0.06);">
|
||||
<!-- 封面右侧图片，保留原图代码 -->
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section style="background:linear-gradient(135deg,#059669,#10B981);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<p style="font-size:12px;color:rgba(255,255,255,0.9);margin:0;font-weight:600;letter-spacing:0.5px;">
|
||||
<span leaf="">{{底部左侧文字}}</span>
|
||||
</p>
|
||||
<section style="display:flex;gap:4px;">
|
||||
<span style="background:rgba(255,255,255,0.2);padding:1px 6px;border-radius:3px;font-size:8px;color:#fff;font-weight:600;"><span leaf="">{{标签1}}</span></span>
|
||||
<span style="background:rgba(255,255,255,0.2);padding:1px 6px;border-radius:3px;font-size:8px;color:#fff;font-weight:600;"><span leaf="">{{标签2}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
**无右侧图片版**（文章没有封面头像图时用这个，标题区满宽）：
|
||||
|
||||
```html
|
||||
<section style="margin:0 0 32px;background:#fff;border:1.5px solid rgba(5,150,105,0.15);border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);width:100%;">
|
||||
<section style="padding:32px 28px 28px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:28px;">
|
||||
<span style="width:6px;height:6px;background:#059669;border-radius:50%;"><span leaf=""><br></span></span>
|
||||
<span style="font-size:11px;font-weight:700;letter-spacing:3px;color:#059669;"><span leaf="">{{顶部标签}}</span></span>
|
||||
<section style="flex:1;height:1px;overflow:hidden;background:linear-gradient(to right,rgba(5,150,105,0.12),transparent);"><span leaf=""><br></span></section>
|
||||
<span style="font-size:10px;color:#D1D5DB;font-weight:600;"><span leaf="">{{日期}}</span></span>
|
||||
</section>
|
||||
<section>
|
||||
<p style="font-size:15px;color:#D1D5DB;margin:0 0 6px;text-decoration:line-through;letter-spacing:0.5px;">
|
||||
<span leaf="">{{划线旧认知}}</span>
|
||||
</p>
|
||||
<p style="font-size:24px;font-weight:900;color:#111827;margin:0;line-height:1.05;letter-spacing:-2px;">
|
||||
<span leaf="">{{主标题行1}}</span>
|
||||
<span style="color:#059669;"><span leaf="">{{绿色高亮词}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:24px;font-weight:900;color:#059669;margin:0 0 16px;line-height:1.05;letter-spacing:-2px;">
|
||||
<span leaf="">{{主标题行2}}</span>
|
||||
</p>
|
||||
<section style="width:48px;height:3px;background:linear-gradient(to right,#059669,#34D399);border-radius:2px;margin-bottom:12px;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
||||
<span leaf="">{{副标题关键词}}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<section style="background:linear-gradient(135deg,#059669,#10B981);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<p style="font-size:12px;color:rgba(255,255,255,0.9);margin:0;font-weight:600;letter-spacing:0.5px;">
|
||||
<section style="background:linear-gradient(135deg,#059669,#10B981);padding:12px 12px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<p style="font-size:13px;color:rgba(255,255,255,0.9);margin:0;font-weight:600;letter-spacing:0.5px;">
|
||||
<span leaf="">{{底部左侧文字}}</span>
|
||||
</p>
|
||||
<section style="display:flex;gap:4px;">
|
||||
@@ -164,10 +106,8 @@
|
||||
- `{{顶部标签}}` → 如 `TUTORIAL · 品牌实战`、`AI VIDEO · 实战案例`、`BREAKING`（建议 10-15 字符以内）
|
||||
- `{{日期}}` → 如 `2026.07`
|
||||
- `{{划线旧认知}}` → 被颠覆的旧观念（例：`MV要专业团队？`）
|
||||
- `{{主标题行1}}` → 标题前半段（黑色）；`{{绿色高亮词}}` → 标题中的绿色强调词；`{{主标题行2}}` → 标题第二行（全绿色）
|
||||
- `{{副标题关键词}}` → 简短关键词，用 `·` 分隔
|
||||
- `{{开篇导语}}` → 一句话给出新认知/本篇看点，与外标题错开视角
|
||||
- `{{底部左侧文字}}` → 产品/品牌名；`{{标签1/2}}` → 底部小标签
|
||||
|
||||
---
|
||||
|
||||
## 组件 3 目录 toc-scroll（横向滚动目录）
|
||||
@@ -175,7 +115,7 @@
|
||||
2 个及以上章节时生成。第一个卡片绿色高亮，最后一个固定为"写在最后"（PART ///）。
|
||||
|
||||
```html
|
||||
<section style="margin:0 20px 32px;">
|
||||
<section style="margin:0 8px 32px;">
|
||||
<section style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;text-transform:uppercase;letter-spacing:2px;font-weight:600;">
|
||||
<span leaf="">📦 {{N}} Parts + Conclusion</span>
|
||||
@@ -190,7 +130,7 @@
|
||||
<p style="font-size:9px;font-weight:700;color:rgba(255,255,255,0.7);letter-spacing:1px;margin:0 0 5px;">
|
||||
<span leaf="">PART 01</span>
|
||||
</p>
|
||||
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<span leaf="">{{章节名}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:rgba(255,255,255,0.7);margin:0;">
|
||||
@@ -202,7 +142,7 @@
|
||||
<p style="font-size:9px;font-weight:700;color:#9CA3AF;letter-spacing:1px;margin:0 0 5px;">
|
||||
<span leaf="">PART 02</span>
|
||||
</p>
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">{{章节名}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
||||
@@ -214,7 +154,7 @@
|
||||
<p style="font-size:9px;font-weight:700;color:#9CA3AF;letter-spacing:1px;margin:0 0 5px;">
|
||||
<span leaf="">PART ///</span>
|
||||
</p>
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">写在最后</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
||||
@@ -232,10 +172,10 @@
|
||||
第一个章节用 `margin-top:16px`，后续章节用 `margin-top:48px`。最后一章编号用 `///`，PART 改为 `LAST`。
|
||||
|
||||
```html
|
||||
<section style="margin-top:48px;margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-top:48px;margin-bottom:32px;padding:0 12px;">
|
||||
<section style="display:flex;align-items:center;gap:16px;margin-bottom:24px;">
|
||||
<section style="text-align:center;flex-shrink:0;">
|
||||
<p style="margin:0;font-size:28px;font-weight:900;color:#059669;line-height:1;letter-spacing:-2px;">
|
||||
<p style="margin:0;font-size:29px;font-weight:900;color:#059669;line-height:1;letter-spacing:-2px;">
|
||||
<span leaf="">{{01}}</span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:8px;font-weight:700;color:#D1D5DB;letter-spacing:2px;">
|
||||
@@ -244,7 +184,7 @@
|
||||
</section>
|
||||
<span style="width:1px;height:36px;background:#E5E7EB;flex-shrink:0;"><span leaf=""><br></span></span>
|
||||
<section>
|
||||
<p style="margin:0 0 1px;font-size:17px;font-weight:900;color:#111827;letter-spacing:0.3px;">
|
||||
<p style="margin:0 0 1px;font-size:18px;font-weight:900;color:#111827;letter-spacing:0.3px;">
|
||||
<span leaf="">{{中文标题}}</span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1.5px;">
|
||||
@@ -263,7 +203,7 @@
|
||||
## 组件 5 正文段落 paragraph
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:16px;font-size:14px;line-height:1.9;text-align:justify;">
|
||||
<p style="margin-bottom:16px;font-size:15px;line-height:1.9;text-align:justify;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -313,19 +253,19 @@
|
||||
### 6g. 代码标签（行内代码）
|
||||
|
||||
```html
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:600;"><span leaf="">code</span></span>
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">code</span></span>
|
||||
```
|
||||
|
||||
### 6h. 获取方式标签（黄色背景）
|
||||
|
||||
```html
|
||||
<span style="background:#FDE68A;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:700;"><span leaf="">「关键词」</span></span>
|
||||
<span style="background:#FDE68A;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:700;"><span leaf="">「关键词」</span></span>
|
||||
```
|
||||
|
||||
### 6i. 删除线灰色（旧的/被淘汰的概念）
|
||||
|
||||
```html
|
||||
<span style="background:#F3F4F6;color:#6B7280;padding:2px 6px;border-radius:4px;font-size:13px;text-decoration:line-through;font-weight:600;"><span leaf="">旧词</span></span>
|
||||
<span style="background:#F3F4F6;color:#6B7280;padding:2px 6px;border-radius:4px;font-size:14px;text-decoration:line-through;font-weight:600;"><span leaf="">旧词</span></span>
|
||||
```
|
||||
|
||||
**使用原则**：
|
||||
@@ -346,11 +286,11 @@
|
||||
<section style="margin-bottom:24px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#111827;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">STEP 01</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
|
||||
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
|
||||
<span leaf="">{{步骤标题}}</span>
|
||||
</h4>
|
||||
</section>
|
||||
<p style="font-size:14px;margin:0 0 16px;color:#4B5563;line-height:1.9;text-align:justify;">
|
||||
<p style="font-size:15px;margin:0 0 16px;color:#4B5563;line-height:1.9;text-align:justify;">
|
||||
{{步骤内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -362,7 +302,7 @@
|
||||
<section style="margin-bottom:28px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#E5E7EB;color:#6B7280;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">CASE 01</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
|
||||
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
|
||||
<span leaf="">{{案例标题}}</span>
|
||||
</h4>
|
||||
</section>
|
||||
@@ -376,7 +316,7 @@
|
||||
<section style="margin-bottom:28px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#111827;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">SKILL 1</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
|
||||
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
|
||||
<span leaf="">{{名称}}</span>
|
||||
</h4>
|
||||
</section>
|
||||
@@ -392,18 +332,18 @@
|
||||
### 8a. prompt-block（PROMPT 展示块）
|
||||
|
||||
```html
|
||||
<p style="font-size:13px;color:#374151;margin:0 0 16px;line-height:1.8;">
|
||||
<p style="font-size:14px;color:#374151;margin:0 0 16px;line-height:1.8;">
|
||||
<span style="display:inline-block;background:#059669;color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:3px;margin-right:6px;vertical-align:middle;letter-spacing:0.5px;"><span leaf="">PROMPT</span></span>
|
||||
<span style="font-size:12px;color:#9CA3AF;font-weight:700;"><span leaf="">{{提示词内容}}</span></span>
|
||||
<span style="font-size:13px;color:#9CA3AF;font-weight:700;"><span leaf="">{{提示词内容}}</span></span>
|
||||
</p>
|
||||
```
|
||||
|
||||
### 8b. cmd-block（CMD 单行命令块）
|
||||
|
||||
```html
|
||||
<p style="font-size:13px;color:#374151;margin:0 0 24px;line-height:1.8;">
|
||||
<p style="font-size:14px;color:#374151;margin:0 0 24px;line-height:1.8;">
|
||||
<span style="display:inline-block;background:#111827;color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:3px;margin-right:6px;vertical-align:middle;letter-spacing:0.5px;"><span leaf="">CMD</span></span>
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:600;"><span leaf="">{{命令内容}}</span></span>
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">{{命令内容}}</span></span>
|
||||
</p>
|
||||
```
|
||||
|
||||
@@ -420,8 +360,8 @@
|
||||
所有引用、补充说明的**默认组件**（虚线框是本主题的风格特征，仅此组件与 9b 保留 dashed）：
|
||||
|
||||
```html
|
||||
<section style="background:#F9FAFB;border:1px dashed #D1D5DB;border-radius:8px;padding:12px 16px;margin-bottom:24px;text-align:justify;">
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.6;">
|
||||
<section style="background:#F9FAFB;border:1px dashed #D1D5DB;border-radius:8px;padding:12px 12px;margin-bottom:24px;text-align:justify;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.6;">
|
||||
{{引用内容，可嵌入绿色加粗等内联样式}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -434,9 +374,9 @@
|
||||
单行版（只有主金句）：
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;margin-bottom:24px;text-align:center;">
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 12px;margin-bottom:24px;text-align:center;">
|
||||
<p style="margin:0;line-height:1.6;">
|
||||
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||||
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
@@ -444,12 +384,12 @@
|
||||
带前缀引导语版（两段式）：
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;margin-bottom:24px;text-align:center;">
|
||||
<p style="font-size:12px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 12px;margin-bottom:24px;text-align:center;">
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||
<span leaf="">{{引导语}}</span>
|
||||
</p>
|
||||
<p style="margin:0;line-height:1.6;">
|
||||
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||||
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
@@ -457,11 +397,11 @@
|
||||
带下方补充说明版：
|
||||
|
||||
```html
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;margin-bottom:24px;text-align:center;">
|
||||
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 12px;margin-bottom:24px;text-align:center;">
|
||||
<p style="margin:0 0 6px;line-height:1.6;">
|
||||
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮内容}}</span></span>
|
||||
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮内容}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
<p style="font-size:14px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
<span leaf="">{{补充说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -470,7 +410,7 @@
|
||||
### 9c. subtitle-highlight（小节黄色下划线标题）
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;font-weight:900;color:#111827;margin-bottom:16px;">
|
||||
<p style="font-size:16px;font-weight:900;color:#111827;margin-bottom:16px;">
|
||||
<span style="background:linear-gradient(180deg,transparent 65%,#FDE68A 65%);padding:0 4px;"><span leaf="">{{小节标题}}</span></span>
|
||||
</p>
|
||||
```
|
||||
@@ -480,7 +420,7 @@
|
||||
### 9d. center-divider（居中金句分隔）
|
||||
|
||||
```html
|
||||
<p style="font-size:14px;margin-bottom:20px;text-align:center;color:#059669;font-weight:700;letter-spacing:1px;border-top:1px solid #F3F4F6;border-bottom:1px solid #F3F4F6;padding:12px 0;">
|
||||
<p style="font-size:15px;margin-bottom:20px;text-align:center;color:#059669;font-weight:700;letter-spacing:1px;border-top:1px solid #F3F4F6;border-bottom:1px solid #F3F4F6;padding:12px 0;">
|
||||
<span leaf="">{{居中金句}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -493,10 +433,10 @@
|
||||
|
||||
```html
|
||||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
||||
<p style="margin-bottom:6px;font-size:12px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<p style="margin-bottom:6px;font-size:13px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<span style="color:rgb(255,76,0);"><span leaf="">！踩坑提示 🕳</span></span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.7;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;">
|
||||
<span style="color:rgb(136,136,136);font-weight:bold;"><span leaf="">{{提示内容}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -508,10 +448,10 @@
|
||||
|
||||
```html
|
||||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
||||
<p style="margin-bottom:6px;font-size:12px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<p style="margin-bottom:6px;font-size:13px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<span style="color:#059669;"><span leaf="">✦ {{提示标题}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.7;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;">
|
||||
{{提示内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -520,8 +460,8 @@
|
||||
### 10c. yellow-warning（黄色警告框）
|
||||
|
||||
```html
|
||||
<section style="background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:12px 16px;margin-bottom:20px;">
|
||||
<p style="font-size:13px;color:#92400E;margin:0;font-weight:700;">
|
||||
<section style="background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:12px 12px;margin-bottom:20px;">
|
||||
<p style="font-size:14px;color:#92400E;margin:0;font-weight:700;">
|
||||
<span leaf="">{{警告内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -530,8 +470,8 @@
|
||||
### 10d. green-info（绿色信息框）
|
||||
|
||||
```html
|
||||
<section style="background:#F0FDF4;padding:12px 16px;border-radius:8px;border:1px solid #BBF7D0;margin-bottom:20px;">
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.7;text-align:justify;">
|
||||
<section style="background:#F0FDF4;padding:12px 12px;border-radius:8px;border:1px solid #BBF7D0;margin-bottom:20px;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;text-align:justify;">
|
||||
{{信息内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -548,7 +488,7 @@
|
||||
```html
|
||||
<section style="margin-bottom:14px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;font-size:13px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{列表项文字}}</span></span>
|
||||
<span style="display:inline-block;font-size:14px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{列表项文字}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
@@ -558,9 +498,9 @@
|
||||
```html
|
||||
<section style="margin-bottom:14px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;font-size:13px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{标题}}</span></span>
|
||||
<span style="display:inline-block;font-size:14px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{标题}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
|
||||
<p style="font-size:14px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
|
||||
<span leaf="">{{描述内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -572,29 +512,29 @@
|
||||
<section style="background:#F9FAFB;padding:16px;border-radius:12px;border:1px solid #F3F4F6;margin-bottom:24px;">
|
||||
<section style="display:flex;align-items:stretch;justify-content:center;gap:6px;">
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:linear-gradient(135deg,#059669,#10B981);border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<span leaf="">{{步骤1标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
|
||||
<span leaf="">{{步骤1描述}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:14px;padding:0 4px;">
|
||||
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:15px;padding:0 4px;">
|
||||
<span leaf="">→</span>
|
||||
</section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">{{步骤2标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
<span leaf="">{{步骤2描述}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:14px;padding:0 4px;">
|
||||
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:15px;padding:0 4px;">
|
||||
<span leaf="">→</span>
|
||||
</section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #A7F3D0;border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#059669;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#059669;margin:0 0 3px;">
|
||||
<span leaf="">{{步骤3标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
@@ -602,7 +542,7 @@
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<p style="font-size:12px;color:#9CA3AF;text-align:center;margin:12px 0 0;letter-spacing:0.5px;">
|
||||
<p style="font-size:13px;color:#9CA3AF;text-align:center;margin:12px 0 0;letter-spacing:0.5px;">
|
||||
<span leaf="">{{底部说明文字}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -616,7 +556,7 @@
|
||||
<section style="background:#F9FAFB;padding:16px;border-radius:12px;border:1px solid #F3F4F6;margin-bottom:28px;">
|
||||
<section style="display:flex;align-items:stretch;justify-content:center;gap:6px;">
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:linear-gradient(135deg,#059669,#10B981);border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;">
|
||||
<span leaf="">{{卡片1标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
|
||||
@@ -624,7 +564,7 @@
|
||||
</p>
|
||||
</section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">{{卡片2标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
@@ -632,7 +572,7 @@
|
||||
</p>
|
||||
</section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
|
||||
<span leaf="">{{卡片3标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||
@@ -658,14 +598,14 @@
|
||||
<section style="flex:1;padding-bottom:12px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
|
||||
<span style="display:inline-block;background:#111827;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">{{CASE 01}}</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
|
||||
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
|
||||
<span leaf="">{{标题}}</span>
|
||||
</h4>
|
||||
</section>
|
||||
<p style="font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1px;margin:0 0 12px;">
|
||||
<span leaf="">{{英文副标题}}</span>
|
||||
</p>
|
||||
<p style="font-size:14px;margin:0 0 16px;color:#4B5563;line-height:1.7;text-align:justify;">
|
||||
<p style="font-size:15px;margin:0 0 16px;color:#4B5563;line-height:1.7;text-align:justify;">
|
||||
{{内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -679,8 +619,8 @@
|
||||
基本版：
|
||||
|
||||
```html
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;">
|
||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.8;">
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 12px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
|
||||
{{说明内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -689,12 +629,12 @@
|
||||
居中高亮版（同 oneliner-card 规则：拆多个 `<p>`，不要 `<strong>` 带 font-size/border-bottom）：
|
||||
|
||||
```html
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;text-align:center;">
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 12px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;text-align:center;">
|
||||
<p style="font-size:14px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||
<span leaf="">{{小字}}</span>
|
||||
</p>
|
||||
<p style="margin:0;line-height:1.6;">
|
||||
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮大字}}</span></span>
|
||||
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮大字}}</span></span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
@@ -705,7 +645,7 @@
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:24px;overflow-x:auto;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:13px;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="background:#059669;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题1}}</span></th>
|
||||
@@ -737,19 +677,19 @@
|
||||
<section style="margin-bottom:24px;">
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#059669;color:#fff;font-size:11px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<span leaf="">{{列表项内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#059669;color:#fff;font-size:11px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<span leaf="">{{列表项内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#059669;color:#fff;font-size:11px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
|
||||
<span leaf="">{{列表项内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -793,8 +733,8 @@
|
||||
固定文案照写；SVG 图标微信支持，原样保留。
|
||||
|
||||
```html
|
||||
<section style="background:radial-gradient(circle at center,#F9FAFB 0%,#FFFFFF 100%);border:1px solid #E5E7EB;border-radius:16px;padding:32px 20px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.03);margin:0 0 24px;">
|
||||
<p style="font-size:13px;font-weight:bold;color:#111827;margin-bottom:20px;line-height:1.6;">
|
||||
<section style="background:radial-gradient(circle at center,#F9FAFB 0%,#FFFFFF 100%);border:1px solid #E5E7EB;border-radius:16px;padding:28px 12px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.03);margin:0 0 24px;">
|
||||
<p style="font-size:14px;font-weight:bold;color:#111827;margin-bottom:20px;line-height:1.6;">
|
||||
<span leaf="">既然看到这里了，如果觉得有用，随手点个赞、在看、转发三连吧。</span>
|
||||
</p>
|
||||
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
|
||||
@@ -842,7 +782,7 @@
|
||||
```html
|
||||
<section style="max-width:677px;margin:0 auto;background:#ffffff;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;color:#374151;line-height:1.75;letter-spacing:0.5px;overflow-x:hidden;">
|
||||
|
||||
<!-- 1. 封面（组件2 cover-breaking，有图/无图二选一） -->
|
||||
<!-- 1. 开篇导语条（组件2 cover-breaking）——划线旧认知 + 一句话导语 -->
|
||||
|
||||
<!-- 2. 目录（组件3 toc-scroll，2+ 章节时生成，紧跟封面之下） -->
|
||||
|
||||
@@ -905,7 +845,7 @@
|
||||
|
||||
| Markdown 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；封面主标题从中提炼（视角错开） |
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；开篇导语（组件 2）从中提炼一句（视角错开，不复述关键词） |
|
||||
| 文章开头 `> 引言` | 组件 9b oneliner-card 或并入封面副标题 | 开头金句 |
|
||||
| `## 章节标题` | 组件 4 chapter-title | PART 01/02/03…，末章 /// + LAST |
|
||||
| `### 子标题` | 组件 9c subtitle-highlight | 黄色下划线小节标题 |
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
>
|
||||
> **WeChat 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
|
||||
> - 所有"装饰性空元素"（撕票虚线、头像占位框）**没有真实内容时整块删掉**，不留空 section
|
||||
> - 正文字号固定 `14px`、行高 `1.9`——这是本主题的排版铁律，不与其它主题共用字号
|
||||
> - 正文字号固定 `15px`、行高 `1.9`——这是本主题的排版铁律，不与其它主题共用字号
|
||||
> - 不要把 `font-size`/`border-bottom` 打在 `<strong>` 上，高亮样式统一挂在外层 `<span>` 上
|
||||
> - `writing-mode:vertical-rl`（票据侧边竖排字）在个别老旧客户端可能渲染异常，如遇异常可退化为横排小字，不影响其余结构
|
||||
|
||||
@@ -30,12 +30,12 @@
|
||||
代码背景： #F3F4F6
|
||||
代码字色： #1F2937
|
||||
品牌紫色（AI 品牌专用，如 Claude/Obsidian/Gemini）：#7C3AED
|
||||
正文字号： 14px（本主题铁律，不可改）
|
||||
正文字号： 15px（本主题铁律，不可改）
|
||||
正文行高： 1.9
|
||||
全局行高： 1.75
|
||||
字间距： 0.5px
|
||||
最大宽度： 677px
|
||||
内容区边距： 0 20px（正文区块左右各 20px）
|
||||
内容区边距： 0 10px（正文区块左右各 10px）
|
||||
章节间距： margin-bottom: 32px
|
||||
```
|
||||
|
||||
@@ -57,12 +57,13 @@
|
||||
|
||||
## 组件 2 票据封面 ticket-cover
|
||||
|
||||
**用途**：文章开头，适合测评/对比/创意类文章。星级评分 + 编号 + 竖排小字，营造"一张门票/凭证"的仪式感。
|
||||
**用途**：文章开头，适合测评/对比/创意类文章。星级评分 + 编号 + 竖排小字，营造"一张门票/凭证"的仪式感。开篇轻量形态：不放大字主标题、不放头图，导语职能由副标题 + 简介段落承担。
|
||||
|
||||
> **文案策略（先读，比代码重要）**：公众号后台已承担标题、封面图、账号名，开篇不再重复。副标题与简介段落合起来是开篇导语，和外标题**两层错开**——外标题卖"为什么点开"，导语卖"里面讲什么"；已知外标题时**禁止原样复述**其核心关键词。
|
||||
|
||||
**可替换字段**：
|
||||
- `{{头部标签}}` → 如 `AI DESIGN TOOLS`
|
||||
- `{{大标题}}` → 如 `STITCH vs PENCIL`
|
||||
- `{{副标题}}` → 如 `两款免费 AI 设计工具深度对比`
|
||||
- `{{副标题}}` → 开篇导语上半句，如 `两款免费 AI 设计工具深度对比`
|
||||
- `{{作者名}}` / `{{作者身份}}`
|
||||
- `{{简介段落}}` → 支持内嵌组件 6 的行内强调样式
|
||||
- `{{#标签1/2/3}}`
|
||||
@@ -72,24 +73,23 @@
|
||||
|
||||
```html
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;margin-bottom:32px;">
|
||||
<section style="background:#059669;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="background:#059669;padding:12px 12px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="color:#fffef8;font-size:11px;letter-spacing:4px;font-weight:600;"><span leaf="">{{头部标签}}</span></section>
|
||||
<section style="color:#fffef8;font-size:11px;letter-spacing:2px;"><span leaf="">★★★★★</span></section>
|
||||
</section>
|
||||
<section style="display:flex;">
|
||||
<section style="flex:1;padding:24px 20px;border-right:2px dashed #A7F3D0;">
|
||||
<section style="font-size:24px;font-weight:900;color:#1a1a1a;letter-spacing:0.5px;margin-bottom:4px;text-shadow:0.5px 0 0 #1a1a1a;"><span leaf="">{{大标题}}</span></section>
|
||||
<section style="font-size:14px;color:#666;letter-spacing:1px;margin-bottom:20px;"><span leaf="">{{副标题}}</span></section>
|
||||
<section style="flex:1;padding:18px 12px;border-right:2px dashed #A7F3D0;">
|
||||
<section style="font-size:15px;color:#1a1a1a;letter-spacing:1px;margin-bottom:20px;font-weight:700;"><span leaf="">{{副标题}}</span></section>
|
||||
<section style="border-top:1px dashed #A7F3D0;margin-bottom:16px;"><span leaf=""><br></span></section>
|
||||
<section style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
|
||||
<!-- 有作者头像图时插入 <img> 到下面这个圆框里；无头像时整块删除该 section -->
|
||||
<section style="width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid #059669;flex-shrink:0;"><span leaf=""><br></span></section>
|
||||
<section>
|
||||
<section style="font-size:15px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
|
||||
<section style="font-size:12px;color:#888;"><span leaf="">{{作者身份}}</span></section>
|
||||
<section style="font-size:16px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
|
||||
<section style="font-size:13px;color:#888;"><span leaf="">{{作者身份}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
<section style="font-size:13px;color:#555;line-height:1.8;padding:12px;background:#F0FDF4;border:1px solid #A7F3D0;">
|
||||
<section style="font-size:14px;color:#555;line-height:1.8;padding:12px;background:#F0FDF4;border:1px solid #A7F3D0;">
|
||||
<span leaf="">{{简介段落}}</span>
|
||||
</section>
|
||||
<section style="display:flex;gap:8px;margin-top:16px;">
|
||||
@@ -101,12 +101,12 @@
|
||||
<section style="width:48px;padding:14px 4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#F0FDF4;">
|
||||
<section style="text-align:center;">
|
||||
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">NO.</span></section>
|
||||
<section style="font-size:18px;font-weight:900;color:#059669;"><span leaf="">{{编号}}</span></section>
|
||||
<section style="font-size:19px;font-weight:900;color:#059669;"><span leaf="">{{编号}}</span></section>
|
||||
</section>
|
||||
<section style="writing-mode:vertical-rl;font-size:9px;color:#888;letter-spacing:2px;"><span leaf="">{{竖排文字}}</span></section>
|
||||
<section style="text-align:center;">
|
||||
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">GRADE</span></section>
|
||||
<section style="font-size:14px;font-weight:900;color:#059669;"><span leaf="">{{等级}}</span></section>
|
||||
<section style="font-size:15px;font-weight:900;color:#059669;"><span leaf="">{{等级}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -115,7 +115,7 @@
|
||||
<section style="padding:0 8px;font-size:10px;color:#A7F3D0;"><span leaf="">✂</span></section>
|
||||
<section style="flex:1;border-top:2px dashed #A7F3D0;"><span leaf=""><br></span></section>
|
||||
</section>
|
||||
<section style="padding:10px 20px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="padding:10px 12px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">VALID FOR ONE READ</span></section>
|
||||
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">ADMIT ONE 🎫</span></section>
|
||||
</section>
|
||||
@@ -131,11 +131,11 @@
|
||||
**可替换字段**：`{{编号}}` `{{标题}}` `{{副标题}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid #1a1a1a;">
|
||||
<section style="background:#059669;color:#fff;font-size:12px;font-weight:800;padding:6px 12px;letter-spacing:2px;"><span leaf="">{{编号}}</span></section>
|
||||
<section style="font-size:18px;font-weight:800;color:#1a1a1a;letter-spacing:1px;"><span leaf="">{{标题}}</span></section>
|
||||
<section style="font-size:12px;color:#888;"><span leaf="">/ {{副标题}}</span></section>
|
||||
<section style="background:#059669;color:#fff;font-size:13px;font-weight:800;padding:6px 12px;letter-spacing:2px;"><span leaf="">{{编号}}</span></section>
|
||||
<section style="font-size:19px;font-weight:800;color:#1a1a1a;letter-spacing:1px;"><span leaf="">{{标题}}</span></section>
|
||||
<section style="font-size:13px;color:#888;"><span leaf="">/ {{副标题}}</span></section>
|
||||
</section>
|
||||
|
||||
<!-- 本章节正文内容放在这里 -->
|
||||
@@ -152,10 +152,10 @@
|
||||
**可替换字段**：`{{小节标题}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
|
||||
<section style="width:4px;height:16px;background:#059669;"><span leaf=""><br></span></section>
|
||||
<section style="font-size:15px;font-weight:700;color:#1a1a1a;"><span leaf="">{{小节标题}}</span></section>
|
||||
<section style="font-size:16px;font-weight:700;color:#1a1a1a;"><span leaf="">{{小节标题}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -169,8 +169,8 @@
|
||||
**可替换字段**：`{{正文内容}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<p style="font-size:14px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<p style="font-size:15px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -203,7 +203,7 @@
|
||||
### 6d. 代码标签 —— 技术名词/模型名/命令
|
||||
|
||||
```html
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:600;"><span leaf="">{{文字}}</span></span>
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">{{文字}}</span></span>
|
||||
```
|
||||
|
||||
### 6e. 品牌紫色 —— Claude / Obsidian / Gemini 等 AI 品牌名专用
|
||||
@@ -223,8 +223,8 @@
|
||||
**可替换字段**：`{{case编号}}` `{{案例名称}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<p style="font-size:13px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<p style="font-size:14px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
|
||||
<span leaf="">case{{case编号}}: {{案例名称}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -237,7 +237,7 @@
|
||||
**用途**：包裹图片，票据纸感边框（米黄底 + 细灰边）。**规则**：`<img>` 标签及其 `src`/`data-src` 原封不动复制，只套外层容器。
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="background:#fffef8;border:1px solid #eee;padding:6px;margin-bottom:0;">
|
||||
<figure style="margin:0;">
|
||||
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
@@ -255,9 +255,9 @@
|
||||
**可替换字段**：`{{前缀}}` `{{结论内容}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 16px;margin-bottom:0;">
|
||||
<p style="font-size:14px;color:#1a1a1a;font-weight:600;line-height:1.7;margin:0;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 12px;margin-bottom:0;">
|
||||
<p style="font-size:15px;color:#1a1a1a;font-weight:600;line-height:1.7;margin:0;">
|
||||
<span leaf="">{{前缀}}</span>
|
||||
<span style="color:#059669;"><span leaf="">{{结论内容}}</span></span>
|
||||
</p>
|
||||
@@ -274,11 +274,11 @@
|
||||
**可替换字段**：`{{序号}}` `{{小标题}}` `{{描述}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="background:#fffef8;border:1px solid #eee;margin-bottom:12px;">
|
||||
<section style="display:flex;align-items:stretch;">
|
||||
<section style="width:36px;background:#059669;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;"><span leaf="">{{序号}}</span></section>
|
||||
<section style="flex:1;padding:12px 16px;font-size:13px;color:#555;line-height:1.7;border-left:1px dashed #A7F3D0;">
|
||||
<section style="width:36px;background:#059669;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;"><span leaf="">{{序号}}</span></section>
|
||||
<section style="flex:1;padding:12px 12px;font-size:14px;color:#555;line-height:1.7;border-left:1px dashed #A7F3D0;">
|
||||
<span style="font-weight:600;color:#1a1a1a;"><span leaf="">{{小标题}}</span></span>
|
||||
<span leaf="">：{{描述}}</span>
|
||||
</section>
|
||||
@@ -298,21 +298,21 @@
|
||||
**可替换字段**：`{{金句前半}}` `{{大数字}}`（可选）`{{金句后半}}` `{{补充说明}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:3px 3px 0 #1a1a1a;padding:20px;margin-bottom:0;">
|
||||
<p style="font-size:15px;color:#1a1a1a;font-weight:700;line-height:1.8;margin:0 0 12px;text-align:center;">
|
||||
<p style="font-size:16px;color:#1a1a1a;font-weight:700;line-height:1.8;margin:0 0 12px;text-align:center;">
|
||||
<span leaf="">{{金句前半}}</span>
|
||||
<span style="color:#059669;font-size:24px;"><span leaf="">{{大数字}}</span></span>
|
||||
<span style="color:#059669;font-size:25px;"><span leaf="">{{大数字}}</span></span>
|
||||
<span leaf="">{{金句后半}}</span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#555;line-height:1.8;margin:0;text-align:justify;">
|
||||
<p style="font-size:15px;color:#555;line-height:1.8;margin:0;text-align:justify;">
|
||||
<span leaf="">{{补充说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
无大数字时去掉中间那个 `font-size:24px` 的 `<span>`，整句金句合并放第一行 `<p>` 即可。
|
||||
无大数字时去掉中间那个 `font-size:25px` 的 `<span>`，整句金句合并放第一行 `<p>` 即可。
|
||||
|
||||
---
|
||||
|
||||
@@ -323,7 +323,7 @@
|
||||
**可替换字段**：`{{#标签}}`
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:32px;padding:0 20px;">
|
||||
<section style="margin-bottom:32px;padding:0 10px;">
|
||||
<section style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签1}}</span></section>
|
||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签2}}</span></section>
|
||||
@@ -344,8 +344,8 @@
|
||||
|
||||
```html
|
||||
<section style="padding:0 0 32px;">
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:24px 20px;text-align:center;">
|
||||
<p style="font-size:13px;font-weight:700;color:#1a1a1a;margin:0 0 20px;line-height:1.6;">
|
||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:22px 14px;text-align:center;">
|
||||
<p style="font-size:14px;font-weight:700;color:#1a1a1a;margin:0 0 20px;line-height:1.6;">
|
||||
<span leaf="">{{互动文案}}</span>
|
||||
</p>
|
||||
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
|
||||
@@ -384,7 +384,7 @@
|
||||
**用途**：文章最末尾收尾，放在外层容器（组件 1）内最后，footer-cta 之后。
|
||||
|
||||
```html
|
||||
<p style="text-align:center;color:#D1D5DB;font-size:14px;margin:24px 0 0 0;">
|
||||
<p style="text-align:center;color:#D1D5DB;font-size:15px;margin:24px 0 0 0;">
|
||||
<span leaf="">/</span>
|
||||
</p>
|
||||
```
|
||||
@@ -477,7 +477,7 @@
|
||||
|
||||
| Markdown 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；票据封面大标题从中提炼 |
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；开篇导语（副标题+简介段落）从中提炼，视角错开 |
|
||||
| 文章开头 `> 引言` | 并入封面简介段落 | 票据封面无独立引言卡组件 |
|
||||
| `## 章节标题` | 组件 3 chapter-title | 编号 01/02/03… |
|
||||
| `### 子标题` | 组件 4 subtitle | 左竖条小标题 |
|
||||
|
||||
@@ -30,26 +30,26 @@
|
||||
标签浅底： #e5e7e0
|
||||
强调橙（关键词下划线/前导词/CTA）： #ed7b2f
|
||||
陶土棕装饰（进行中/次强调）： #d4c9b8（配边框 #b17816）
|
||||
正文字号： 14px
|
||||
正文字号： 15px
|
||||
正文行高： 1.9
|
||||
全局行高： 1.75
|
||||
最大宽度： 677px
|
||||
容器内边距： 8px
|
||||
区块间距： margin-top: 24px（首块头图卡除外）
|
||||
圆角： 6px（统一小圆角，不用大圆角）
|
||||
阴影： 整体几乎无阴影，靠边框 + 色块分层，仅头图卡的插画占位区可有极轻装饰
|
||||
阴影： 整体几乎无阴影，靠边框 + 色块分层
|
||||
```
|
||||
|
||||
字体栈：`'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||||
|
||||
**正文关键词下划线**（对应 theme-index"正文下划线 CSS"列）：`border-bottom:2px solid #ed7b2f;font-weight:600;color:#23251d;`——直接复用本主题头图卡"强调词"与重点观点卡里已经出现的橙色下划线语言，保持主题内一致。
|
||||
**正文关键词下划线**（对应 theme-index"正文下划线 CSS"列）：`border-bottom:2px solid #ed7b2f;font-weight:600;color:#23251d;`——直接复用本主题重点观点卡里已经出现的橙色下划线语言，保持主题内一致。
|
||||
|
||||
---
|
||||
|
||||
## 组件 1 全局容器
|
||||
|
||||
```html
|
||||
<section style="max-width:677px;margin:0 auto;padding:8px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
|
||||
<section style="max-width:677px;margin:0 auto;padding:4px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
|
||||
|
||||
<!-- 所有组件放在这里，第一个子元素是组件 2 头图卡，其余组件均自带 margin-top:24px -->
|
||||
|
||||
@@ -58,47 +58,31 @@
|
||||
|
||||
---
|
||||
|
||||
## 组件 2 头图卡 hero-card
|
||||
## 组件 2 头图卡 hero-card（内刊导语条）
|
||||
|
||||
**用途**：文章开篇头图区，内刊风格：顶部标签+日期条，主标题+强调词，侧边配一枚手绘风占位插画，底部深色摘要条收尾。整篇文章唯一一处、放在最前面，不设 `margin-top`。
|
||||
**用途**：文章开篇区，内刊风格：顶部标签+日期条，一句话开篇导语，底部深色摘要条收尾。整篇文章唯一一处、放在最前面，不设 `margin-top`。开篇轻量形态：不放大字主标题、不放头图（公众号后台已承担标题与封面图）；原头图并入正文首个图位。
|
||||
|
||||
**可替换字段**：`{{内刊标签}}` `{{日期}}` `{{旧标题占位}}`（可选，删除线小字，无需要时整行删除）`{{主标题}}` `{{强调词}}` `{{副标题说明}}` `{{底部摘要}}` `{{标签1}}` `{{标签2}}`
|
||||
> **文案策略（先读，比代码重要）**：开篇导语和外标题**两层错开**——外标题卖"为什么点开"，导语卖"里面讲什么、读完得到什么"；已知外标题时**禁止原样复述**其核心关键词，从文章第一段或核心论点提炼一句。
|
||||
|
||||
**可替换字段**：`{{内刊标签}}` `{{日期}}` `{{开篇导语}}` `{{底部摘要}}` `{{标签1}}` `{{标签2}}`
|
||||
|
||||
```html
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,system-ui,sans-serif;">
|
||||
<section style="padding:28px 24px 22px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:22px;">
|
||||
<section style="padding:20px 12px 18px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:18px;">
|
||||
<span style="width:8px;height:8px;background:#1e1f23;border-radius:50%;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<span style="font-size:10px;font-weight:700;letter-spacing:3px;color:#65675e;"><span leaf="">{{内刊标签}}</span></span>
|
||||
<span style="flex:1;height:1px;background:#bfc1b7;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<span style="font-size:10px;color:#9ea096;font-weight:500;font-variant-numeric:tabular-nums;"><span leaf="">{{日期}}</span></span>
|
||||
</section>
|
||||
<section style="display:flex;align-items:stretch;gap:18px;">
|
||||
<section style="flex:1;min-width:0;">
|
||||
<p style="font-size:14px;color:#9ea096;margin:0 0 8px;letter-spacing:0.3px;text-decoration:line-through;"><span leaf="">{{旧标题占位}}</span></p>
|
||||
<p style="font-size:24px;font-weight:800;color:#23251d;margin:0 0 10px;line-height:1.15;letter-spacing:-0.75px;">
|
||||
<span leaf="">{{主标题}}</span><span style="color:#4d4f46;"><span leaf=""> · </span></span><span style="border-bottom:3px solid #e5e7e0;"><span leaf="">{{强调词}}</span></span>
|
||||
</p>
|
||||
<section style="display:flex;align-items:center;gap:4px;margin-bottom:12px;">
|
||||
<span style="width:22px;height:3px;background:#1e1f23;border-radius:2px;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<span style="width:8px;height:3px;background:#bfc1b7;border-radius:2px;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
</section>
|
||||
<p style="font-size:13px;color:#65675e;margin:0;line-height:1.7;"><span leaf="">{{副标题说明}}</span></p>
|
||||
<p style="font-size:14px;color:#4d4f46;margin:0;line-height:1.8;"><span leaf="">{{开篇导语}}</span></p>
|
||||
</section>
|
||||
<section style="flex-shrink:0;width:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eeefe9;border:1px dashed #bfc1b7;border-radius:6px;padding:8px;">
|
||||
<svg width="72" height="72" viewBox="0 0 64 64" aria-hidden="true" style="display:block;">
|
||||
<ellipse cx="32" cy="36" rx="22" ry="18" fill="none" stroke="#4d4f46" stroke-width="2"></ellipse>
|
||||
<circle cx="26" cy="30" r="3" fill="#4d4f46"></circle>
|
||||
<circle cx="38" cy="30" r="3" fill="#4d4f46"></circle>
|
||||
<path d="M28 40 Q32 44 36 40" fill="none" stroke="#4d4f46" stroke-width="1.5"></path>
|
||||
<path d="M12 34 L8 28 M52 34 L56 28" stroke="#bfc1b7" stroke-width="2" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
<span style="font-size:8px;font-weight:700;color:#9ea096;letter-spacing:1px;margin-top:4px;"><span leaf="">DOODLE</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section style="background:#1e1f23;padding:11px 24px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
|
||||
<p style="font-size:12px;color:rgba(255,255,255,0.92);margin:0;font-weight:600;"><span leaf="">{{底部摘要}}</span></p>
|
||||
<section style="background:#1e1f23;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
|
||||
<p style="font-size:13px;color:rgba(255,255,255,0.92);margin:0;font-weight:600;"><span leaf="">{{底部摘要}}</span></p>
|
||||
<section style="display:flex;gap:6px;flex-wrap:wrap;">
|
||||
<span style="background:#e5e7e0;color:#23251d;padding:3px 8px;border-radius:4px;font-size:8px;font-weight:700;border:1px solid #bfc1b7;"><span leaf="">{{标签1}}</span></span>
|
||||
<span style="background:#e5e7e0;color:#23251d;padding:3px 8px;border-radius:4px;font-size:8px;font-weight:700;border:1px solid #bfc1b7;"><span leaf="">{{标签2}}</span></span>
|
||||
@@ -107,8 +91,6 @@
|
||||
</section>
|
||||
```
|
||||
|
||||
（`{{旧标题占位}}` 那一行没有真实"旧标题"内容时整行 `<p>` 删除，不留占位删除线空行。）
|
||||
|
||||
---
|
||||
|
||||
## 组件 3 章节标题 section-title
|
||||
@@ -122,12 +104,12 @@
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:center;gap:14px;">
|
||||
<section style="text-align:center;flex-shrink:0;">
|
||||
<p style="margin:0;font-size:24px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">{{编号}}</span></p>
|
||||
<p style="margin:0;font-size:25px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">{{编号}}</span></p>
|
||||
<p style="margin:0;font-size:8px;font-weight:700;color:#9ea096;letter-spacing:2px;"><span leaf="">PART</span></p>
|
||||
</section>
|
||||
<span style="width:1px;height:36px;background:#bfc1b7;flex-shrink:0;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<section>
|
||||
<p style="margin:0 0 1px;font-size:17px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{标题}}</span></p>
|
||||
<p style="margin:0 0 1px;font-size:18px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{标题}}</span></p>
|
||||
<p style="margin:0;font-size:11px;font-weight:600;color:#65675e;letter-spacing:1.2px;"><span leaf="">{{副标题}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
@@ -145,7 +127,7 @@
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#eeefe9;border:1px solid #bfc1b7;border-radius:6px;padding:12px 16px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
|
||||
<section style="background:#eeefe9;border:1px solid #bfc1b7;border-radius:6px;padding:12px 10px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
|
||||
<p style="margin:0;font-size:10px;font-weight:800;letter-spacing:4px;color:#23251d;"><span leaf="">{{刊头标签}}</span></p>
|
||||
<section style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<span style="font-size:10px;color:#65675e;font-weight:700;"><span leaf="">{{版本号}}</span></span>
|
||||
@@ -166,7 +148,7 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#1e1f23;border:1px solid #23251d;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
|
||||
<section style="padding:12px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
|
||||
<p style="margin:0;font-size:10px;font-weight:800;letter-spacing:4px;color:#ffffff;"><span leaf="">{{刊头标签}}</span></p>
|
||||
<p style="margin:0;font-size:10px;color:rgba(255,255,255,0.68);"><span leaf="">{{说明文字}}</span></p>
|
||||
</section>
|
||||
@@ -184,7 +166,7 @@
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:14px 16px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;">
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:14px 10px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;">
|
||||
<section style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#1e1f23;color:#fff;font-size:11px;font-weight:800;"><span leaf="">{{期号}}</span></span>
|
||||
<section>
|
||||
@@ -210,7 +192,7 @@
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="background:#1e1f23;color:#fff;padding:4px 10px;border-radius:4px;font-size:11px;font-weight:700;"><span leaf="">{{步骤序号}}</span></span>
|
||||
<span style="font-size:14px;font-weight:600;color:#4d4f46;"><span leaf="">{{步骤标题}}</span></span>
|
||||
<span style="font-size:15px;font-weight:600;color:#4d4f46;"><span leaf="">{{步骤标题}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -227,7 +209,7 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<h3 style="font-size:18px;font-weight:700;color:#23251d;margin:0;padding:0 2px;display:block;width:fit-content;box-shadow:inset 0 -0.5em 0 rgba(245,78,0,0.18);"><span leaf="">{{标题文字}}</span></h3>
|
||||
<h3 style="font-size:19px;font-weight:700;color:#23251d;margin:0;padding:0 2px;display:block;width:fit-content;box-shadow:inset 0 -0.5em 0 rgba(245,78,0,0.18);"><span leaf="">{{标题文字}}</span></h3>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -245,7 +227,7 @@
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid #bfc1b7;padding-bottom:10px;">
|
||||
<span style="font-size:10px;font-weight:800;letter-spacing:3px;color:#ed7b2f;text-transform:uppercase;"><span leaf="">{{Kicker标签}}</span></span>
|
||||
<span style="font-size:18px;font-weight:800;color:#23251d;line-height:1.2;"><span leaf="">{{标题}}</span></span>
|
||||
<span style="font-size:19px;font-weight:800;color:#23251d;line-height:1.2;"><span leaf="">{{标题}}</span></span>
|
||||
<span style="margin-left:auto;font-size:10px;color:#9ea096;font-variant-numeric:tabular-nums;"><span leaf="">{{进度}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
@@ -263,7 +245,7 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;">
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;text-align:justify;color:#4d4f46;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -293,7 +275,7 @@
|
||||
**d. 行内代码标签** —— 技术名词/字段名/命令
|
||||
|
||||
```html
|
||||
<span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:13px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span>
|
||||
<span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:14px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span>
|
||||
```
|
||||
|
||||
**e. 删除线旧词** —— 与"新旧对照段落"（组件 12）配套，单独用时表示"已废弃/被替代的说法"
|
||||
@@ -313,8 +295,8 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0;font-size:14px;color:#4d4f46;line-height:1.9;">
|
||||
<span leaf="">{{正文前半}} </span><span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:13px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span><span leaf=""> {{正文后半}}</span>
|
||||
<p style="margin:0;font-size:15px;color:#4d4f46;line-height:1.9;">
|
||||
<span leaf="">{{正文前半}} </span><span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:14px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span><span leaf=""> {{正文后半}}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
@@ -331,8 +313,8 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;">
|
||||
<span style="font-size:14px;color:#9ea096;letter-spacing:0.3px;text-decoration:line-through;"><span leaf="">{{旧表述}}</span></span>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;text-align:justify;color:#4d4f46;">
|
||||
<span style="font-size:15px;color:#9ea096;letter-spacing:0.3px;text-decoration:line-through;"><span leaf="">{{旧表述}}</span></span>
|
||||
<span style="margin-left:6px;font-weight:700;color:#23251d;"><span leaf="">{{新表述}}</span></span>
|
||||
<span style="margin-left:6px;background:#e5e7e0;padding:1px 5px;border-radius:4px;font-weight:600;color:#23251d;border:1px solid #bfc1b7;"><span leaf="">{{差异点}}</span></span>
|
||||
</p>
|
||||
@@ -352,7 +334,7 @@
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<ul style="margin:0;padding-left:22px;line-height:1.8;list-style-position:outside;">
|
||||
<li style="margin-bottom:8px;font-size:15px;color:#4d4f46;list-style-type:disc;">
|
||||
<li style="margin-bottom:8px;font-size:16px;color:#4d4f46;list-style-type:disc;">
|
||||
<section><span leaf="">{{列表项}}</span></section>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -371,12 +353,12 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="padding:10px 16px;background:#1e1f23;display:flex;align-items:center;justify-content:space-between;gap:10px;">
|
||||
<section style="padding:10px 10px;background:#1e1f23;display:flex;align-items:center;justify-content:space-between;gap:10px;">
|
||||
<p style="margin:0;font-size:10px;font-weight:800;letter-spacing:2px;color:#ffffff;"><span leaf="">{{批注标签}}</span></p>
|
||||
<span style="font-size:10px;color:rgba(255,255,255,0.65);"><span leaf="">{{批注小字}}</span></span>
|
||||
</section>
|
||||
<section style="padding:16px 18px 18px;background:#eeefe9;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.9;color:#4d4f46;text-align:justify;"><span leaf="">{{编者按正文}}</span></p>
|
||||
<section style="padding:16px 12px 18px;background:#eeefe9;">
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:#4d4f46;text-align:justify;"><span leaf="">{{编者按正文}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -393,8 +375,8 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="background:#fdfdf8;border-radius:6px;padding:16px 18px;border:1px solid #bfc1b7;">
|
||||
<p style="font-size:14px;color:#4d4f46;margin:0;line-height:1.8;text-align:justify;">
|
||||
<section style="background:#fdfdf8;border-radius:6px;padding:16px 12px;border:1px solid #bfc1b7;">
|
||||
<p style="font-size:15px;color:#4d4f46;margin:0;line-height:1.8;text-align:justify;">
|
||||
<strong style="color:#23251d;border-bottom:3px solid #ed7b2f;"><span leaf="">{{重点观点}}</span></strong><span leaf=""> {{补充说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -464,7 +446,7 @@
|
||||
<section style="border-radius:6px;overflow:hidden;border:1px solid #bfc1b7;display:block;">
|
||||
<span leaf=""><img src="{{图片URL}}" alt="图片" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
<figcaption style="font-size:13px;line-height:1.7;color:#65675e;text-align:center;margin-top:10px;"><span leaf="">{{图片说明}}</span></figcaption>
|
||||
<figcaption style="font-size:14px;line-height:1.7;color:#65675e;text-align:center;margin-top:10px;"><span leaf="">{{图片说明}}</span></figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
```
|
||||
@@ -482,9 +464,9 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="padding:18px;border-radius:6px;background:#fdfdf8;border:1px solid #bfc1b7;text-align:center;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0 0 12px;font-size:12px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{图表标签}}</span></p>
|
||||
<p style="margin:0 0 12px;font-size:13px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{图表标签}}</span></p>
|
||||
<section style="min-height:140px;border-radius:6px;background:#eeefe9;display:flex;align-items:center;justify-content:center;border:1px dashed #bfc1b7;">
|
||||
<span style="font-size:14px;color:#4d4f46;"><span leaf="">{{占位说明}}</span></span>
|
||||
<span style="font-size:15px;color:#4d4f46;"><span leaf="">{{占位说明}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -503,12 +485,12 @@
|
||||
<section style="background:#eeefe9;padding:16px;border-radius:6px;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:stretch;justify-content:center;gap:8px;">
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#1e1f23;border-radius:6px;border:1px solid #23251d;">
|
||||
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;"><span leaf="">{{左侧标题}}</span></p>
|
||||
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;"><span leaf="">{{左侧标题}}</span></p>
|
||||
<p style="font-size:10px;color:rgba(255,255,255,0.75);margin:0;line-height:1.5;"><span leaf="">{{左侧说明}}</span></p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:center;color:#bfc1b7;font-size:14px;padding:0 4px;"><span leaf="">vs</span></section>
|
||||
<section style="display:flex;align-items:center;color:#bfc1b7;font-size:15px;padding:0 4px;"><span leaf="">vs</span></section>
|
||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;">
|
||||
<p style="font-size:13px;font-weight:800;color:#23251d;margin:0 0 3px;"><span leaf="">{{右侧标题}}</span></p>
|
||||
<p style="font-size:14px;font-weight:800;color:#23251d;margin:0 0 3px;"><span leaf="">{{右侧标题}}</span></p>
|
||||
<p style="font-size:10px;color:#65675e;margin:0;line-height:1.5;"><span leaf="">{{右侧说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
@@ -528,19 +510,19 @@
|
||||
<section style="margin-top:24px;">
|
||||
<section style="border-radius:6px;overflow:hidden;border:1px solid #bfc1b7;background:#fdfdf8;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;background:#eeefe9;border-bottom:1px solid #bfc1b7;">
|
||||
<section style="width:35%;padding:10px 12px;font-size:12px;font-weight:800;color:#23251d;"><span leaf="">{{维度列名}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:12px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案A名}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:12px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案B名}}</span></section>
|
||||
<section style="width:35%;padding:10px 12px;font-size:13px;font-weight:800;color:#23251d;"><span leaf="">{{维度列名}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案A名}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案B名}}</span></section>
|
||||
</section>
|
||||
<section style="display:flex;border-bottom:1px solid #bfc1b7;">
|
||||
<section style="width:35%;padding:10px 12px;font-size:13px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
|
||||
<section style="width:35%;padding:10px 12px;font-size:14px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
|
||||
</section>
|
||||
<section style="display:flex;">
|
||||
<section style="width:35%;padding:10px 12px;font-size:13px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
|
||||
<section style="width:35%;padding:10px 12px;font-size:14px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
|
||||
<section style="width:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -558,9 +540,9 @@
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#eeefe9;border-radius:6px;padding:22px 18px;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="background:#eeefe9;border-radius:6px;padding:20px 12px;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="font-size:10px;color:#65675e;margin:0 0 4px;text-transform:uppercase;letter-spacing:2px;font-weight:600;"><span leaf="">{{FLOW标签}}</span></p>
|
||||
<p style="font-size:13px;color:#23251d;font-weight:600;margin:0 0 8px;"><span leaf="">{{流程说明}}</span></p>
|
||||
<p style="font-size:14px;color:#23251d;font-weight:600;margin:0 0 8px;"><span leaf="">{{流程说明}}</span></p>
|
||||
<svg viewBox="0 0 400 82" style="width:100%;height:auto;" role="img" aria-label="流程示意">
|
||||
<rect x="2" y="14" width="58" height="48" rx="4" fill="#fdfdf8" stroke="#4d4f46" stroke-width="1.5"></rect>
|
||||
<text x="31" y="34" font-size="9" fill="#23251d" text-anchor="middle" font-weight="700" font-family="IBM Plex Sans,sans-serif"><tspan leaf="">节点一</tspan></text>
|
||||
@@ -601,11 +583,11 @@
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="margin-bottom:14px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;font-size:13px;font-weight:700;color:#23251d;background:#e5e7e0;padding:3px 10px;border-radius:999px;border:1px solid #bfc1b7;">
|
||||
<span style="display:inline-block;font-size:14px;font-weight:700;color:#23251d;background:#e5e7e0;padding:3px 10px;border-radius:999px;border:1px solid #bfc1b7;">
|
||||
<span style="display:inline-block;width:6px;height:6px;background:#ed7b2f;border-radius:50%;margin-right:5px;vertical-align:middle;overflow:hidden;font-size:0;line-height:0;"><span leaf=""> </span></span><span leaf=""> {{条目标题}} </span>
|
||||
</span>
|
||||
</p>
|
||||
<p style="font-size:13px;color:#4d4f46;margin:0;line-height:1.7;text-align:justify;"><span leaf="">{{条目说明}}</span></p>
|
||||
<p style="font-size:14px;color:#4d4f46;margin:0;line-height:1.7;text-align:justify;"><span leaf="">{{条目说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -624,10 +606,10 @@
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;padding:18px;box-sizing:border-box;border-radius:6px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0 0 12px;font-size:10px;line-height:1.6;color:#9ea096;letter-spacing:3px;font-weight:800;"><span leaf="">{{FAQ标签}}</span></p>
|
||||
<section style="padding:10px 0;border-top:1px solid #bfc1b7;">
|
||||
<p style="margin:0;font-size:15px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">01 / {{问题}}</span></p>
|
||||
<p style="margin:0;font-size:16px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">01 / {{问题}}</span></p>
|
||||
</section>
|
||||
<section style="padding:10px 0;border-top:1px solid #bfc1b7;border-bottom:1px solid #bfc1b7;">
|
||||
<p style="margin:0;font-size:15px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">02 / {{问题}}</span></p>
|
||||
<p style="margin:0;font-size:16px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">02 / {{问题}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -654,14 +636,14 @@
|
||||
<section style="flex:1;padding-bottom:12px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
|
||||
<span style="display:inline-block;background:#1e1f23;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;"><span leaf="">CASE</span></span>
|
||||
<h4 style="font-size:15px;font-weight:800;color:#23251d;margin:0;"><span leaf="">{{案例标题}}</span></h4>
|
||||
<h4 style="font-size:16px;font-weight:800;color:#23251d;margin:0;"><span leaf="">{{案例标题}}</span></h4>
|
||||
</section>
|
||||
<p style="font-size:11px;font-weight:600;color:#65675e;letter-spacing:1px;margin:0 0 12px;"><span leaf="">{{行业规模}}</span></p>
|
||||
<p style="font-size:14px;margin:0 0 14px;color:#4d4f46;line-height:1.7;text-align:justify;"><span leaf="">{{案例描述}}</span></p>
|
||||
<p style="font-size:15px;margin:0 0 14px;color:#4d4f46;line-height:1.7;text-align:justify;"><span leaf="">{{案例描述}}</span></p>
|
||||
<section style="text-align:center;margin-bottom:4px;">
|
||||
<span leaf=""><img src="{{图片URL}}" alt="案例配图" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:6px;border:1px solid #bfc1b7;"></span>
|
||||
</section>
|
||||
<p style="font-size:14px;margin:12px 0 0;color:#4d4f46;line-height:1.7;text-align:justify;"><strong style="color:#23251d;"><span leaf="">{{结果总结}}</span></strong></p>
|
||||
<p style="font-size:15px;margin:12px 0 0;color:#4d4f46;line-height:1.7;text-align:justify;"><strong style="color:#23251d;"><span leaf="">{{结果总结}}</span></strong></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -682,7 +664,7 @@
|
||||
<section style="margin-top:24px;">
|
||||
<section style="padding:18px;border-radius:6px;background:#fdfdf8;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;">
|
||||
<p style="margin:0;font-size:12px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{标签}}</span></p>
|
||||
<p style="margin:0;font-size:13px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{标签}}</span></p>
|
||||
<span style="font-size:11px;color:#9ea096;"><span leaf="">{{分组说明}}</span></span>
|
||||
</section>
|
||||
<section style="display:flex;flex-wrap:wrap;gap:10px;">
|
||||
@@ -706,8 +688,8 @@
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:22px 16px;text-align:center;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="font-size:13px;font-weight:700;color:#23251d;line-height:1.6;margin:0 0 14px;"><span leaf="">{{文末互动引导}}</span></p>
|
||||
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:20px 12px;text-align:center;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="font-size:14px;font-weight:700;color:#23251d;line-height:1.6;margin:0 0 14px;"><span leaf="">{{文末互动引导}}</span></p>
|
||||
<section style="display:flex;justify-content:center;gap:18px;margin-bottom:14px;flex-wrap:wrap;">
|
||||
<section style="text-align:center;color:#4d4f46;">
|
||||
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#eeefe9;border-radius:6px;border:1px solid #bfc1b7;">
|
||||
@@ -746,10 +728,10 @@
|
||||
<section style="padding:18px;border-radius:6px;background:#fdfdf8;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<p style="margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:2px;color:#65675e;"><span leaf="">{{标签}}</span></p>
|
||||
<section style="display:flex;flex-wrap:wrap;gap:8px;">
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#e5e7e0;border:1px solid #bfc1b7;font-size:12px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#eeefe9;border:1px solid #bfc1b7;font-size:12px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#d4c9b8;border:1px solid #b17816;font-size:12px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·进行中}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#1e1f23;border:1px solid #23251d;font-size:12px;font-weight:700;color:#ffffff;"><span leaf="">{{阶段名·终态}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#e5e7e0;border:1px solid #bfc1b7;font-size:13px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#eeefe9;border:1px solid #bfc1b7;font-size:13px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#d4c9b8;border:1px solid #b17816;font-size:13px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·进行中}}</span></span>
|
||||
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#1e1f23;border:1px solid #23251d;font-size:13px;font-weight:700;color:#ffffff;"><span leaf="">{{阶段名·终态}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -766,13 +748,13 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="border-radius:6px;overflow:hidden;border:1px solid #23251d;background:#1e1f23;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:stretch;">
|
||||
<section style="flex:1;padding:18px 18px 20px;border-right:1px solid rgba(255,255,255,0.08);">
|
||||
<section style="flex:1;padding:18px 12px 20px;border-right:1px solid rgba(255,255,255,0.08);">
|
||||
<p style="margin:0 0 8px;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.55);font-weight:700;"><span leaf="">{{SUMMARY标签}}</span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:rgba(255,255,255,0.92);"><span leaf="">{{左侧结论}}</span></p>
|
||||
<p style="margin:0;font-size:16px;line-height:1.9;color:rgba(255,255,255,0.92);"><span leaf="">{{左侧结论}}</span></p>
|
||||
</section>
|
||||
<section style="width:34%;min-width:120px;padding:18px;background:#23251d;display:flex;flex-direction:column;justify-content:center;gap:10px;">
|
||||
<span style="display:inline-block;padding:4px 8px;background:#eeefe9;color:#23251d;border-radius:4px;font-size:10px;font-weight:800;align-self:flex-start;"><span leaf="">{{NEXT标签}}</span></span>
|
||||
<p style="margin:0;font-size:13px;line-height:1.8;color:rgba(255,255,255,0.76);"><span leaf="">{{右侧说明}}</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:rgba(255,255,255,0.76);"><span leaf="">{{右侧说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -788,10 +770,10 @@
|
||||
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#1e1f23;border:1px solid #23251d;padding:8px;box-sizing:border-box;border-radius:6px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="border:1px solid rgba(255,255,255,0.16);border-radius:4px;padding:20px 22px;">
|
||||
<section style="background:#1e1f23;border:1px solid #23251d;padding:4px;box-sizing:border-box;border-radius:6px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="border:1px solid rgba(255,255,255,0.16);border-radius:4px;padding:20px 14px;">
|
||||
<p style="margin:0 0 8px;font-size:10px;line-height:1.6;color:#a3a3a3;letter-spacing:4px;font-weight:800;"><span leaf="">{{CLOSING标签}}</span></p>
|
||||
<p style="margin:0;font-size:16px;line-height:1.9;color:#fafafa;font-weight:700;"><span leaf="">{{结尾金句}}</span></p>
|
||||
<p style="margin:0;font-size:17px;line-height:1.9;color:#fafafa;font-weight:700;"><span leaf="">{{结尾金句}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -810,8 +792,8 @@
|
||||
```html
|
||||
<section style="margin-top:24px;">
|
||||
<section style="background:#eeefe9;border:1px solid #bfc1b7;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
|
||||
<p style="margin:0;font-size:13px;line-height:1.7;color:#23251d;font-weight:700;"><span leaf="">{{摘要文字}}</span></p>
|
||||
<section style="padding:12px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.7;color:#23251d;font-weight:700;"><span leaf="">{{摘要文字}}</span></p>
|
||||
<span style="font-size:10px;color:#65675e;font-weight:800;letter-spacing:2px;"><span leaf="">{{标签}}</span></span>
|
||||
</section>
|
||||
</section>
|
||||
@@ -831,7 +813,7 @@
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<span style="display:inline-flex;align-items:center;gap:10px;padding:8px 12px;background:#eeefe9;border:1px solid #bfc1b7;border-radius:999px;">
|
||||
<span style="width:22px;height:22px;border-radius:50%;background:#1e1f23;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;"><span leaf="">{{头像字}}</span></span>
|
||||
<span style="font-size:12px;color:#23251d;font-weight:700;"><span leaf="">{{签名文字}}</span></span>
|
||||
<span style="font-size:13px;color:#23251d;font-weight:700;"><span leaf="">{{签名文字}}</span></span>
|
||||
</span>
|
||||
</section>
|
||||
</section>
|
||||
@@ -850,19 +832,19 @@
|
||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||
<section style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
|
||||
<section style="text-align:center;flex-shrink:0;">
|
||||
<p style="margin:0;font-size:24px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">///</span></p>
|
||||
<p style="margin:0;font-size:25px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">///</span></p>
|
||||
<p style="margin:0;font-size:8px;font-weight:700;color:#9ea096;letter-spacing:2px;"><span leaf="">END</span></p>
|
||||
</section>
|
||||
<span style="width:1px;height:36px;background:#bfc1b7;flex-shrink:0;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf=""> </span></span>
|
||||
<section>
|
||||
<p style="margin:0 0 1px;font-size:17px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{结尾标题}}</span></p>
|
||||
<p style="margin:0 0 1px;font-size:18px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{结尾标题}}</span></p>
|
||||
<p style="margin:0;font-size:11px;font-weight:600;color:#65675e;letter-spacing:1.2px;"><span leaf="">{{结尾说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
<p style="margin:0 0 14px;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落1}}</span></p>
|
||||
<p style="margin:0 0 14px;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落2}}</span></p>
|
||||
<section style="background:#eeefe9;border-radius:6px;padding:16px 18px;border:1px solid #bfc1b7;text-align:center;">
|
||||
<p style="font-size:15px;color:#23251d;margin:0;line-height:1.6;"><strong style="border-bottom:3px solid #ed7b2f;"><span leaf="">{{最后总结}}</span></strong></p>
|
||||
<p style="margin:0 0 14px;font-size:15px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落1}}</span></p>
|
||||
<p style="margin:0 0 14px;font-size:15px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落2}}</span></p>
|
||||
<section style="background:#eeefe9;border-radius:6px;padding:16px 12px;border:1px solid #bfc1b7;text-align:center;">
|
||||
<p style="font-size:16px;color:#23251d;margin:0;line-height:1.6;"><strong style="border-bottom:3px solid #ed7b2f;"><span leaf="">{{最后总结}}</span></strong></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -879,7 +861,7 @@
|
||||
## 完整文章模板骨架
|
||||
|
||||
```html
|
||||
<section style="max-width:677px;margin:0 auto;padding:8px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
|
||||
<section style="max-width:677px;margin:0 auto;padding:4px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
|
||||
|
||||
<!-- 1. 头图卡（组件2 hero-card，唯一一处，不设 margin-top） -->
|
||||
|
||||
|
||||
@@ -30,11 +30,11 @@
|
||||
辅助文字色： #9CA3AF（中灰）
|
||||
分割线色： #E5E7EB
|
||||
灰竖条： #D6D3D1（灰底引用左竖条）
|
||||
正文字号： 15px（不可改）
|
||||
正文字号： 16px（不可改）
|
||||
行高： 1.8
|
||||
字间距： 0.5px
|
||||
最大宽度： 677px
|
||||
内容区边距： 0 10px（左右各 10px）
|
||||
内容区边距： 0 4px（左右各 4px，卡片侧边 10~14px）
|
||||
```
|
||||
|
||||
字体栈：`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||||
@@ -62,17 +62,17 @@
|
||||
> - 红底白字标签仅在本卡片内使用（视觉焦点），正文中的关键词标签一律用浅红底深红字（组件 7b）
|
||||
|
||||
```html
|
||||
<section style="margin:10px 10px 32px;background:#ffffff;border-radius:12px;box-shadow:0 4px 24px -4px rgba(220,38,38,0.15);padding:28px 24px 22px;overflow:hidden;">
|
||||
<p style="font-size:42px;color:#DC2626;font-weight:900;margin:0;line-height:0.6;">
|
||||
<section style="margin:10px 4px 32px;background:#ffffff;border-radius:12px;box-shadow:0 4px 24px -4px rgba(220,38,38,0.15);padding:24px 14px 18px;overflow:hidden;">
|
||||
<p style="font-size:43px;color:#DC2626;font-weight:900;margin:0;line-height:0.6;">
|
||||
<span leaf="">"</span>
|
||||
</p>
|
||||
<p style="font-size:16px;font-weight:800;color:#1C1917;margin:12px 0 8px;line-height:1.75;padding-left:4px;">
|
||||
<p style="font-size:17px;font-weight:800;color:#1C1917;margin:12px 0 8px;line-height:1.75;padding-left:4px;">
|
||||
<span style="background:#DC2626;color:#FFFFFF;padding:2px 8px;border-radius:4px;"><span leaf="">{{高亮关键词}}</span></span>
|
||||
<span leaf="">{{金句中段}}</span>
|
||||
<span style="background:#DC2626;color:#FFFFFF;padding:2px 8px;border-radius:4px;"><span leaf="">{{高亮关键词}}</span></span>
|
||||
<span leaf="">{{金句收尾}}</span>
|
||||
</p>
|
||||
<p style="text-align:right;font-size:12px;color:#9CA3AF;margin:8px 0 0;letter-spacing:1px;">
|
||||
<p style="text-align:right;font-size:13px;color:#9CA3AF;margin:8px 0 0;letter-spacing:1px;">
|
||||
<span leaf="">—— {{作者名，未知则删整行}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -85,22 +85,22 @@
|
||||
> 3 个及以上章节时生成。红底白字编号 + 深色标题；展示**精选 3 个核心看点**，不是全量章节列表。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px 32px;">
|
||||
<p style="font-size:14px;color:#9CA3AF;margin:0 0 14px;letter-spacing:1px;">
|
||||
<section style="padding:0 8px 32px;">
|
||||
<p style="font-size:15px;color:#9CA3AF;margin:0 0 14px;letter-spacing:1px;">
|
||||
<span leaf="">📌 本文看点</span>
|
||||
</p>
|
||||
<section style="display:flex;justify-content:space-between;">
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">01</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点一}}</span></p>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:13px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">01</span></p>
|
||||
<p style="font-size:14px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点一}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">02</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点二}}</span></p>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:13px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">02</span></p>
|
||||
<p style="font-size:14px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点二}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">03</span></p>
|
||||
<p style="font-size:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点三}}</span></p>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:13px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">03</span></p>
|
||||
<p style="font-size:14px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点三}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -111,7 +111,7 @@
|
||||
## 组件 4 章节分割线（红色渐变）
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="padding:0 8px;">
|
||||
<section style="height:1px;background:linear-gradient(to right,transparent,#FCA5A5,#DC2626,#FCA5A5,transparent);margin:0;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
@@ -125,15 +125,15 @@
|
||||
> 红色实底编号标签 + 英文小标签 + 中文大标题，底部红色实线。第一章 `margin-top:16px`，后续章节 `margin-top:48px`。
|
||||
|
||||
```html
|
||||
<section style="margin-top:48px;margin-bottom:28px;padding:0 10px;">
|
||||
<section style="margin-top:48px;margin-bottom:28px;padding:0 8px;">
|
||||
<section style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:3px solid #DC2626;">
|
||||
<section style="display:flex;align-items:center;">
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:18px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">01</span></span>
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:19px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">01</span></span>
|
||||
<section>
|
||||
<p style="font-size:10px;color:#DC2626;font-weight:700;letter-spacing:3px;margin:0 0 2px;text-transform:uppercase;">
|
||||
<span leaf="">{{ENGLISH TAG}}</span>
|
||||
</p>
|
||||
<h3 style="font-size:18px;font-weight:800;color:#1C1917;margin:0;letter-spacing:0.5px;">
|
||||
<h3 style="font-size:19px;font-weight:800;color:#1C1917;margin:0;letter-spacing:0.5px;">
|
||||
<span leaf="">{{中文章节标题}}</span>
|
||||
</h3>
|
||||
</section>
|
||||
@@ -148,7 +148,7 @@
|
||||
**结语章节变体**（编号用 `∞` 替代数字，英文标签用 `THE END` / `EPILOGUE`）：
|
||||
|
||||
```html
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:18px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">∞</span></span>
|
||||
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:19px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">∞</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
@@ -160,7 +160,7 @@
|
||||
**基础段落**：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
|
||||
<p style="margin-bottom:20px;font-size:16px;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">{{正文内容}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -168,7 +168,7 @@
|
||||
**带关键词下划线标记的段落**（推荐默认）：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
|
||||
<p style="margin-bottom:20px;font-size:16px;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">{{前半句}}</span>
|
||||
<span style="border-bottom:2px solid #FECACA;font-weight:600;"><span leaf="">{{需要强调的关键短语}}</span></span>
|
||||
<span leaf="">{{后半句}}</span>
|
||||
@@ -184,7 +184,7 @@
|
||||
> `###` 子标题用红色左竖条 + 深色标题，**不套用组件 5 的编号章节样式**（编号章节只给 `##`）。
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;font-weight:800;color:#1C1917;margin:28px 0 14px;padding-left:10px;border-left:3px solid #DC2626;line-height:1.4;">
|
||||
<p style="font-size:16px;font-weight:800;color:#1C1917;margin:28px 0 14px;padding-left:10px;border-left:3px solid #DC2626;line-height:1.4;">
|
||||
<span leaf="">{{子标题}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -238,7 +238,7 @@
|
||||
### 7f. 行内代码
|
||||
|
||||
```html
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">code</span></span>
|
||||
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:15px;font-weight:600;"><span leaf="">code</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
@@ -248,8 +248,8 @@
|
||||
### 8a. 粉底左竖条金句引用（视觉焦点最强，核心金句）
|
||||
|
||||
```html
|
||||
<section style="background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:18px 22px;margin-bottom:24px;">
|
||||
<p style="font-size:16px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
|
||||
<section style="background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:18px 14px;margin-bottom:24px;">
|
||||
<p style="font-size:17px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
|
||||
<span leaf="">「{{核心观点或关键金句}}」</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -258,8 +258,8 @@
|
||||
### 8b. 浅红背景引用块（Prompt / 引用内容）
|
||||
|
||||
```html
|
||||
<section style="background:#FEF2F2;border-radius:10px;padding:18px 20px;margin-bottom:24px;border:1px solid #FECACA;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
||||
<section style="background:#FEF2F2;border-radius:10px;padding:18px 14px;margin-bottom:24px;border:1px solid #FECACA;">
|
||||
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
||||
{{引用内容，可含 7d 下划线等内联样式}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -268,8 +268,8 @@
|
||||
### 8c. 灰色左竖条引用（轻量旁注、个人吐槽）
|
||||
|
||||
```html
|
||||
<section style="border-left:4px solid #D6D3D1;padding:14px 20px;margin-bottom:24px;background:#FAFAFA;border-radius:0 8px 8px 0;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
||||
<section style="border-left:4px solid #D6D3D1;padding:14px 14px;margin-bottom:24px;background:#FAFAFA;border-radius:0 8px 8px 0;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">{{轻量旁注内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -278,7 +278,7 @@
|
||||
### 8d. 居中金句分隔（章节间的过渡金句）
|
||||
|
||||
```html
|
||||
<p style="font-size:15px;margin:0 0 24px;text-align:center;color:#DC2626;font-weight:700;letter-spacing:1px;border-top:1px solid #FEE2E2;border-bottom:1px solid #FEE2E2;padding:14px 10px;">
|
||||
<p style="font-size:16px;margin:0 0 24px;text-align:center;color:#DC2626;font-weight:700;letter-spacing:1px;border-top:1px solid #FEE2E2;border-bottom:1px solid #FEE2E2;padding:14px 10px;">
|
||||
<span leaf="">{{居中金句}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -290,8 +290,8 @@
|
||||
### 9a. 红色提示条（重要提醒、核心结论）
|
||||
|
||||
```html
|
||||
<section style="background:#FEF2F2;border-left:4px solid #DC2626;border-radius:0 8px 8px 0;padding:14px 20px;margin-bottom:24px;">
|
||||
<p style="font-size:14px;font-weight:700;color:#991B1B;margin:0;line-height:1.8;">
|
||||
<section style="background:#FEF2F2;border-left:4px solid #DC2626;border-radius:0 8px 8px 0;padding:14px 14px;margin-bottom:24px;">
|
||||
<p style="font-size:15px;font-weight:700;color:#991B1B;margin:0;line-height:1.8;">
|
||||
<span leaf="">💡 {{重要提示或核心结论}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -301,10 +301,10 @@
|
||||
|
||||
```html
|
||||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
||||
<p style="margin-bottom:6px;font-size:12px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<p style="margin-bottom:6px;font-size:13px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
|
||||
<span style="color:#DC2626;"><span leaf="">！踩坑提示 🕳</span></span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.7;">
|
||||
<span leaf="">{{提示内容}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -322,9 +322,9 @@
|
||||
<section style="margin-bottom:22px;">
|
||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
||||
<span style="display:inline-block;background:#DC2626;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;"><span leaf="">STEP 01</span></span>
|
||||
<span style="font-size:15px;font-weight:800;color:#1C1917;"><span leaf="">{{步骤标题}}</span></span>
|
||||
<span style="font-size:16px;font-weight:800;color:#1C1917;"><span leaf="">{{步骤标题}}</span></span>
|
||||
</section>
|
||||
<p style="font-size:15px;margin:0 0 16px;color:#374151;line-height:1.8;text-align:justify;">
|
||||
<p style="font-size:16px;margin:0 0 16px;color:#374151;line-height:1.8;text-align:justify;">
|
||||
{{步骤内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -335,8 +335,8 @@
|
||||
### 10b. tool-card（工具/条目说明卡）
|
||||
|
||||
```html
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 4px 16px rgba(220,38,38,0.10);margin-bottom:24px;">
|
||||
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
|
||||
<section style="background:#fff;border-radius:12px;padding:16px 14px;box-shadow:0 4px 16px rgba(220,38,38,0.10);margin-bottom:24px;">
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;">
|
||||
{{条目说明内容}}
|
||||
</p>
|
||||
</section>
|
||||
@@ -351,16 +351,16 @@
|
||||
```html
|
||||
<section style="margin-bottom:24px;">
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
|
||||
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
|
||||
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
</section>
|
||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
|
||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
|
||||
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -370,9 +370,9 @@
|
||||
```html
|
||||
<section style="margin-bottom:14px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;font-size:14px;font-weight:700;color:#991B1B;background:#FEE2E2;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#DC2626;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{要点标题}}</span></span>
|
||||
<span style="display:inline-block;font-size:15px;font-weight:700;color:#991B1B;background:#FEE2E2;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#DC2626;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{要点标题}}</span></span>
|
||||
</p>
|
||||
<p style="font-size:14px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
|
||||
<p style="font-size:15px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
|
||||
<span leaf="">{{要点说明}}</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -387,8 +387,8 @@
|
||||
<section style="width:2px;background:#FEE2E2;flex:1;margin-top:4px;min-height:44px;"><span leaf=""><br></span></section>
|
||||
</section>
|
||||
<section style="flex:1;padding-bottom:12px;">
|
||||
<p style="margin:0 0 6px;font-size:15px;font-weight:800;color:#1C1917;"><span leaf="">{{节点标题}}</span></p>
|
||||
<p style="font-size:15px;margin:0;color:#374151;line-height:1.8;text-align:justify;">{{节点内容}}</p>
|
||||
<p style="margin:0 0 6px;font-size:16px;font-weight:800;color:#1C1917;"><span leaf="">{{节点标题}}</span></p>
|
||||
<p style="font-size:16px;margin:0;color:#374151;line-height:1.8;text-align:justify;">{{节点内容}}</p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -403,13 +403,13 @@
|
||||
|
||||
```html
|
||||
<section style="display:flex;margin-bottom:24px;padding:0;">
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 16px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:28px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:12px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 12px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:29px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 16px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:28px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:12px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 12px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:29px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:13px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -419,15 +419,15 @@
|
||||
```html
|
||||
<section style="display:flex;margin-bottom:24px;padding:0;">
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:24px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:25px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:24px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:25px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;text-align:center;border:1px solid #FEE2E2;">
|
||||
<p style="font-size:24px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:25px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
||||
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||
</section>
|
||||
</section>
|
||||
@@ -437,7 +437,7 @@
|
||||
|
||||
```html
|
||||
<section style="margin-bottom:24px;overflow-x:auto;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:15px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="background:#DC2626;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
||||
@@ -465,13 +465,13 @@
|
||||
浅红底深红字（默认）：
|
||||
|
||||
```html
|
||||
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;font-size:12px;font-weight:700;padding:2px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
|
||||
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;font-size:13px;font-weight:700;padding:2px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
|
||||
```
|
||||
|
||||
红色描边（轻量）：
|
||||
|
||||
```html
|
||||
<span style="display:inline-block;border:1px solid #DC2626;color:#DC2626;font-size:12px;font-weight:600;padding:1px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
|
||||
<span style="display:inline-block;border:1px solid #DC2626;color:#DC2626;font-size:13px;font-weight:600;padding:1px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
|
||||
```
|
||||
|
||||
---
|
||||
@@ -489,7 +489,7 @@
|
||||
带说明文字时，图片 `margin-bottom` 改 `8px`，其后加：
|
||||
|
||||
```html
|
||||
<p style="font-size:12px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
|
||||
<p style="font-size:13px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
|
||||
<span leaf="">— {{图片说明}}</span>
|
||||
</p>
|
||||
```
|
||||
@@ -501,7 +501,7 @@
|
||||
## 组件 15 END 结尾分割线
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="padding:0 8px;">
|
||||
<section style="text-align:center;margin:0 0 32px;">
|
||||
<section style="display:flex;align-items:center;justify-content:center;">
|
||||
<span style="height:2px;width:60px;background:linear-gradient(to right,transparent,#DC2626);margin-right:12px;"><span leaf=""><br></span></span>
|
||||
@@ -519,14 +519,14 @@
|
||||
> 固定签名文案以正文段落形式呈现；有个人名片/引导图素材才放图，无素材整块删。
|
||||
|
||||
```html
|
||||
<section style="padding:0 10px;">
|
||||
<section style="padding:0 8px;">
|
||||
<section style="text-align:center;margin-bottom:10px;border-radius:12px;overflow:hidden;">
|
||||
<span leaf=""><img src="{{个人名片或引导图URL，无则删本 section}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||
</section>
|
||||
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
|
||||
<p style="margin-bottom:20px;font-size:16px;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">我是 {{作者名}}，{{一句话简介，如：热衷于分享 AI 观察与干货}}。</span>
|
||||
</p>
|
||||
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
|
||||
<p style="margin-bottom:20px;font-size:16px;line-height:1.8;text-align:justify;">
|
||||
<span leaf="">如果你觉得今天这篇有收获，欢迎</span>
|
||||
<strong style="color:#DC2626;"><span leaf="">点赞、在看、转发</span></strong>
|
||||
<span leaf="">三连，我们下篇见。</span>
|
||||
|
||||
@@ -0,0 +1,639 @@
|
||||
# 公众号排版组件库 —— 暖橙风
|
||||
|
||||
> **使用说明**：本组件库为「暖橙风」主题（主题 ID：`theme-warm-orange`，由 `assets/theme-previews/theme-warm-orange.html` 区块库转换而来），所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
|
||||
>
|
||||
> **设计风格**：温暖疗愈系排版。暖橙主色 + 浅杏衬底 + 大圆角白卡 + 轻柔和阴影，圆点装饰与点状虚线贯穿全文，像冬日午后的一杯热橙茶。适合品牌发布、产品介绍、心理陪伴、生活方式类文章。
|
||||
>
|
||||
> **公众号平台限制须知**：
|
||||
> - ❌ 不支持 `<style>`/`<script>`、CSS class/id、`position:fixed/absolute/sticky`、`@media`/`@keyframes`、`display:grid`、CSS 变量
|
||||
> - ❌ 禁用 `form`/`button`/`svg`/`iframe`/`video` 等标签；按钮一律用带样式的 `<span>` 模拟
|
||||
> - ✅ 支持内联 `style`、`<section>`/`<p>`/`<span>`/`<figure>`/`<figcaption>`/`<img>`/`<hr>`/`<code>`/`<strong>` 等基础标签
|
||||
>
|
||||
> **WeChat 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
|
||||
> - 所有文字节点必须包 `<span leaf="">文字</span>`；装饰性空元素（圆点、胶带短条）内部必须放 `<span leaf=""><br></span>`，否则微信粘贴会剥掉样式
|
||||
> - 所有字号 ≤24px（封面主标题、CTA 大字也不例外）
|
||||
> - 组件不依赖任何 class/id，全部视觉写在元素自身 `style` 里
|
||||
> - `<table>` 仅用于真实数据表格（字段表/对照表），不做布局骨架
|
||||
|
||||
---
|
||||
|
||||
## 一、设计变量速查表
|
||||
|
||||
```
|
||||
主题名： 暖橙风（theme-warm-orange）
|
||||
主色调： #EE7A2D（暖橙——按钮、圆点、编号、CTA 底色）
|
||||
强调色： #C2541A（深橙棕——标签文字、小注、署名、引导语）
|
||||
装饰色： #F9E3CE（浅杏——衬底、胶囊标签、点状分隔线）
|
||||
背景色： #FDFBF7（暖白微杏——页面底色）
|
||||
正文色： #3D3229（暖深棕——正文、标题）
|
||||
标题色： #3D3229（同正文，靠字重区分层级）
|
||||
正文关键词下划线：#F9C9A3（杏橙，权威值 border-bottom:2px solid #F9C9A3）
|
||||
|
||||
点状分隔线： 2px dotted #F9E3CE（章内）/ 2px dotted #EE7A2D（章间）
|
||||
轻柔和阴影： 0 6px 18px rgba(238,122,45,0.10)（白卡标配）
|
||||
0 4px 12px rgba(238,122,45,0.25)（按钮）
|
||||
0 10px 24px rgba(238,122,45,0.28)（主 CTA）
|
||||
圆角体系： 大圆角 14~24px（卡片）；999px（胶囊/圆徽章/按钮）
|
||||
渐变衬底： linear-gradient(180deg,#F9E3CE,#FDFBF7)（陪伴/邀约卡专用）
|
||||
|
||||
正文字号： 16px（行高 2，两端对齐）
|
||||
小字/标签： 13~14px
|
||||
标题字号： 18~21px（开篇不放大字主标题，见组件 2 导语条）
|
||||
设计技巧 TAG： 暖色卡片化、圆角呼吸感、柔和点缀、浅衬底分层
|
||||
风格特征 TAG： 温暖、亲和、疗愈、积极
|
||||
适用场景 TAG： 品牌发布、产品介绍、心理陪伴、生活方式
|
||||
字体偏好： pingfang
|
||||
```
|
||||
|
||||
字体栈：`'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||||
|
||||
---
|
||||
|
||||
## 二、组件完整 HTML
|
||||
|
||||
按组件族分组，编号全文唯一。共 36 个编号组件（其中 34 个由预览区块转换 + 全局容器 + 行内样式组）。
|
||||
|
||||
### 组件 1 全局容器
|
||||
|
||||
```html
|
||||
<section style="max-width:677px;margin:0 auto;padding:18px 4px 24px;background:#FDFBF7;color:#3D3229;font-size:16px;line-height:1.8;font-family:'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif;overflow-x:hidden;">
|
||||
|
||||
<!-- 所有组件放在这里 -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 A：封面与开篇（hero）
|
||||
|
||||
#### 组件 2 暖阳导语条（开篇轻量形态）
|
||||
|
||||
> **文案策略（先读，比代码重要）**：
|
||||
> - 公众号后台已承担标题、封面图、账号名三样，开篇不再重复——本组件**不放大字主标题、不放头图、不放公司落款**；原头图并入正文首个图位（圆角大图卡 19）
|
||||
> - 导语和外标题是**两层**，视角错开——外标题卖「为什么点开」，导语卖「这篇讲什么、读完得到什么」
|
||||
> - 已知外标题时，导语**禁止原样复述**其核心关键词（产品名/功能名/场景词）；从文章第一段或核心论点提炼一句
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">栏目标签占位</span></span>
|
||||
<p style="margin:12px 0 0;font-size:16px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">开篇导语占位：一句话说清本篇讲什么、读者能带走什么，与外标题错开视角。</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 3 品牌叙事开篇卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#F9E3CE;border-radius:22px;">
|
||||
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"><span leaf=""><br></span></span><span style="display:inline-block;font-size:14px;font-weight:bold;color:#C2541A;vertical-align:middle;"><span leaf="">开篇导语占位</span></span>
|
||||
<p style="margin:12px 0 14px;font-size:16px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">叙事导语占位：这里放两三行品牌故事或情绪铺垫文字，语速放慢、句子放短，让读者先安静下来，再进入正文的说明部分。</span></p>
|
||||
<span style="display:inline-block;padding:9px 26px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);"><span leaf="">按钮文案占位</span></span>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 B：目录与导航（navigation）
|
||||
|
||||
#### 组件 4 圆点目录卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;"><span leaf="">目录标题占位</span></p>
|
||||
<p style="margin:0 0 12px;font-size:13px;color:#C2541A;"><span leaf="">目录说明占位：本篇包含的小节导航</span></p>
|
||||
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">01</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位一</span></span></p>
|
||||
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">02</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位二</span></span></p>
|
||||
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">03</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位三</span></span></p>
|
||||
<p style="margin:0;padding:10px 2px 0;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">04</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位四</span></span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 5 标签索引带
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 12px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">索引说明占位：本篇关键词索引</span></p>
|
||||
<p style="margin:0 0 10px;font-size:14px;line-height:2.2;">
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;"><span leaf="">标签占位一</span></span>
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位二</span></span>
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位三</span></span>
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位四</span></span>
|
||||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位五</span></span>
|
||||
</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 C：标题与分隔（title）
|
||||
|
||||
#### 组件 6 圆点章节标题
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:6px 2px;">
|
||||
<p style="margin:0 0 8px;font-size:21px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#EE7A2D;margin-right:12px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位：正文从这里开始</span></span></p>
|
||||
<p style="margin:0;padding-bottom:10px;border-bottom:2px dotted #F9E3CE;font-size:14px;color:#C2541A;"><span leaf="">章节引导语占位：一句话说明本章内容</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 7 暖章编号标题
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;margin-right:12px;font-size:25px;font-weight:bold;color:#EE7A2D;vertical-align:middle;"><span leaf="">01</span></span>
|
||||
<span style="display:inline-block;font-size:20px;font-weight:bold;color:#3D3229;vertical-align:middle;"><span leaf="">章节标题占位一</span></span>
|
||||
</p>
|
||||
<p style="margin:0;padding-top:8px;border-top:2px dotted #F9E3CE;font-size:14px;color:#C2541A;"><span leaf="">章节摘要占位：编号章节的一句摘要</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 8 暖点分隔线
|
||||
|
||||
```html
|
||||
<hr style="border:none;border-top:2px dotted #EE7A2D;margin:10px 30px;">
|
||||
```
|
||||
|
||||
### 组件族 D：正文段落（paragraph）
|
||||
|
||||
#### 组件 9 呼吸正文段落
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:4px 6px;">
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">正文段落占位：这里是放松呼吸的正文区域，行距放宽、句子放短。占位文字用来展示段落节奏与留白比例，两到三行为一组，读起来不赶时间。</span></p>
|
||||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">正文段落占位：第二段承接第一段的话题继续展开，保持同样的字重与行高，让整页像一杯慢慢降温的热茶，信息清晰但没有压迫感。</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 10 暖点引导段落
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:4px 6px;">
|
||||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span style="background:#F9E3CE;color:#C2541A;font-weight:bold;padding:2px 8px;border-radius:6px;margin-right:6px;"><span leaf="">引导短语占位</span></span><span leaf="">正文占位：开头用一枚浅杏色的高亮短语轻轻拉住视线，后面的文字自然展开，用来说明这一段的重点句式与节奏。</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 11 浅杏底纹强调段
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:18px;border-left:6px solid #EE7A2D;">
|
||||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">重点段落占位：需要读者慢下来多看一眼的内容放在这里。浅杏衬底加左侧暖橙竖线，强调而不喊叫，适合放核心观点或安抚性的说明。</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 12 行内暖色样式（4 种 + 使用原则）
|
||||
|
||||
### 12a. 杏橙下划线（正文关键词默认标记，theme-index 权威值）
|
||||
|
||||
```html
|
||||
<span style="border-bottom:2px solid #F9C9A3;font-weight:600;"><span leaf="">下划线标记的关键词</span></span>
|
||||
```
|
||||
|
||||
### 12b. 暖橙加粗（核心概念、品牌名、关键结论）
|
||||
|
||||
```html
|
||||
<strong style="color:#EE7A2D;"><span leaf="">暖橙加粗强调</span></strong>
|
||||
```
|
||||
|
||||
### 12c. 浅杏底标签（段内锚点短语，每段 ≤1 处）
|
||||
|
||||
```html
|
||||
<span style="background:#F9E3CE;color:#C2541A;font-weight:bold;padding:2px 8px;border-radius:6px;"><span leaf="">关键词标签</span></span>
|
||||
```
|
||||
|
||||
### 12d. 行内代码（配置项、命令）
|
||||
|
||||
```html
|
||||
<code style="font-family:Menlo,Consolas,monospace;font-size:14px;color:#C2541A;background:#F9E3CE;padding:2px 8px;border-radius:6px;"><span leaf="">配置项占位</span></code>
|
||||
```
|
||||
|
||||
**使用原则**：
|
||||
1. 正文关键词逐段标记用 12a 下划线（每段 1~3 处，词组 4~15 字）
|
||||
2. 12b 暖橙加粗只给核心概念/品牌名，全文 ≤5 处
|
||||
3. 12c 浅杏底标签是段落锚点，每段最多 1 处
|
||||
4. 一段文字内不同时使用超过 2 种行内样式
|
||||
|
||||
### 组件族 E：引用与提示（quote / notice）
|
||||
|
||||
#### 组件 13 热茶引语卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 8px;font-size:25px;line-height:1;color:#EE7A2D;font-weight:bold;"><span leaf="">“</span></p>
|
||||
<p style="margin:0 0 14px;font-size:17px;line-height:1.9;color:#3D3229;"><span leaf="">引用内容占位：一段值得慢慢读的话放在这里，像热茶冒着的一缕气，轻轻落在页面中间。</span></p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||||
<p style="margin:0;font-size:14px;color:#C2541A;text-align:right;"><span leaf="">—— 引用署名占位</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 14 暖心提示卡（信息提示）
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border:2px solid #F9E3CE;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.08);">
|
||||
<p style="margin:0 0 8px;"><span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">提示标签占位</span></span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">提示说明占位：温和的信息提示放在这里，例如阅读建议、氛围说明或背景补充，语气保持轻柔。</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 15 温和提醒卡（注意提醒）
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border:2px dashed #EE7A2D;border-radius:18px;">
|
||||
<p style="margin:0 0 6px;font-size:15px;font-weight:bold;color:#C2541A;"><span leaf="">注意标签占位</span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">提醒说明占位：需要读者留意但不必紧张的内容，用虚线暖框表达，提醒而不吓人。</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 16 陪伴留声卡（心理陪伴语）
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:linear-gradient(180deg,#F9E3CE,#FDFBF7);border-radius:22px;">
|
||||
<p style="margin:0 0 8px;font-size:14px;color:#C2541A;"><span leaf="">陪伴小语占位 ♡</span></p>
|
||||
<p style="margin:0 0 12px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">陪伴语句占位：写给此刻正在阅读的人的一句话，承认情绪、给出陪伴，不做评判。</span></p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;text-align:right;"><span leaf="">落款占位 · 留声说明占位</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 F：列表（list）
|
||||
|
||||
#### 组件 17 圆点清单卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">清单标题占位</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位一：短句说明</span></span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位二：短句说明</span></span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位三：短句说明</span></span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位四：短句说明</span></span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 18 心愿任务清单
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">任务清单标题占位</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">✓</span></span><span style="vertical-align:middle;"><span leaf="">任务条目占位一（已完成占位）</span></span></p>
|
||||
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">✓</span></span><span style="vertical-align:middle;"><span leaf="">任务条目占位二（已完成占位）</span></span></p>
|
||||
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:15px;border-radius:50%;border:2px solid #EE7A2D;background:#FDFBF7;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">任务条目占位三（待完成占位）</span></span></p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;"><span leaf="">完成度说明占位：示例数字 2 / 3</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 G：媒体（media）
|
||||
|
||||
#### 组件 19 圆角大图卡
|
||||
|
||||
```html
|
||||
<figure style="margin:0;padding:14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<img src="https://placehold.orence.net/640x400/EE7A2D/FDFBF7?text=Photo+Placeholder" alt="正文配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
|
||||
<figcaption style="margin:12px 6px 2px;padding-top:10px;border-top:2px dotted #F9E3CE;font-size:14px;color:#C2541A;text-align:center;"><span leaf="">图片说明占位：图注文字放这里</span></figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
#### 组件 20 拍立得图文卡（生活方式向）
|
||||
|
||||
```html
|
||||
<figure style="margin:0;padding:16px;background:#FFFFFF;border-radius:18px;box-shadow:0 8px 20px rgba(238,122,45,0.12);">
|
||||
<span style="display:block;width:72px;height:14px;margin:0 auto 12px;border-radius:999px;background:#F9E3CE;"><span leaf=""><br></span></span>
|
||||
<img src="https://placehold.orence.net/520x340/C2541A/F9E3CE?text=Life+Moment" alt="生活方式配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:12px;">
|
||||
<figcaption style="margin:12px 4px 0;">
|
||||
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;"><span leaf="">图注标题占位</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">图注说明占位：写一句和图片心情一致的话。</span></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### 组件族 H：代码（code）
|
||||
|
||||
#### 组件 21 浅杏代码块
|
||||
|
||||
```html
|
||||
<section style="margin:0;background:#F9E3CE;border-radius:18px;overflow:hidden;">
|
||||
<p style="margin:0;padding:10px 18px;font-size:13px;color:#C2541A;"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">代码说明占位 · 代码块标题占位</span></span></p>
|
||||
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border-radius:0 0 18px 18px;">
|
||||
<code style="font-family:Menlo,Consolas,monospace;font-size:14px;line-height:1.9;color:#3D3229;"><span style="color:#C2541A;"><span leaf="">// 说明注释占位</span></span><br><span leaf="">const warmConfig = {</span><br><span leaf="> fieldA: </span><span style="color:#EE7A2D;"><span leaf="">"字段占位一"</span></span><span leaf="">,</span><br><span leaf="> fieldB: </span><span style="color:#EE7A2D;"><span leaf="">"字段占位二"</span></span><br><span leaf="">};</span></code>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 I：数据（data）
|
||||
|
||||
#### 组件 22 轻盈指标条
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:4px;">
|
||||
<section style="margin:0 0 10px;padding:12px 12px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;"><span leaf="">82%</span></span><span style="vertical-align:middle;"><span leaf="">指标名称占位一 · 指标说明占位</span></span></p>
|
||||
</section>
|
||||
<section style="margin:0 0 10px;padding:12px 12px;background:#FFFFFF;border-radius:14px;box-shadow:0 4px 12px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;"><span leaf="">1200+</span></span><span style="vertical-align:middle;"><span leaf="">指标名称占位二 · 指标说明占位</span></span></p>
|
||||
</section>
|
||||
<section style="margin:0;padding:12px 12px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;"><span leaf="">4.8</span></span><span style="vertical-align:middle;"><span leaf="">指标名称占位三 · 指标说明占位</span></span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 23 字段数据表（真实表格语义专用）
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">表格标题占位</span></p>
|
||||
<p style="margin:0 0 14px;font-size:13px;color:#C2541A;"><span leaf="">表格说明占位：字段与示例数据的对照</span></p>
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;color:#3D3229;">
|
||||
<tr>
|
||||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;"><span leaf="">字段占位一</span></td>
|
||||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;"><span leaf="">字段占位二</span></td>
|
||||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;"><span leaf="">字段占位三</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 01</span></td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 02</span></td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 03</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 04</span></td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 05</span></td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 06</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 07</span></td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 08</span></td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 09</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 J：对比（compare）
|
||||
|
||||
#### 组件 24 前后对照卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 12px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">对照标题占位</span></p>
|
||||
<section style="margin:0 0 10px;padding:14px 12px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0 0 4px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">对照项标签占位：调整前占位</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">对照说明占位：描述原来的状态或做法。</span></p>
|
||||
</section>
|
||||
<p style="margin:0 0 10px;text-align:center;font-size:17px;color:#EE7A2D;font-weight:bold;"><span leaf="">↓</span></p>
|
||||
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0 0 4px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">对照项标签占位：调整后占位</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">对照说明占位：描述变化之后的状态或感受。</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 25 轻重对照清单
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 12px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">对照清单标题占位</span></p>
|
||||
<section style="margin:0 0 14px;padding:14px 12px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0 0 8px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">优势组标签占位</span></p>
|
||||
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">✓</span></span><span leaf="">优势条目占位一</span></p>
|
||||
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">✓</span></span><span leaf="">优势条目占位二</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">✓</span></span><span leaf="">优势条目占位三</span></p>
|
||||
</section>
|
||||
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border:2px dashed #EE7A2D;border-radius:14px;">
|
||||
<p style="margin:0 0 8px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">留意组标签占位</span></p>
|
||||
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#C2541A;font-weight:bold;margin-right:8px;"><span leaf="">—</span></span><span leaf="">注意条目占位一</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#C2541A;font-weight:bold;margin-right:8px;"><span leaf="">—</span></span><span leaf="">注意条目占位二</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 K：流程（process）
|
||||
|
||||
#### 组件 26 三步流程圆点卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 16px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">流程标题占位</span></p>
|
||||
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">1</span></span><span style="vertical-align:middle;"><span leaf="">步骤标题占位一</span></span></p>
|
||||
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;"><span leaf="">流程说明占位：第一步先做这件事。</span></p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||||
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">2</span></span><span style="vertical-align:middle;"><span leaf="">步骤标题占位二</span></span></p>
|
||||
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;"><span leaf="">流程说明占位：第二步接着做这件事。</span></p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||||
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">3</span></span><span style="vertical-align:middle;"><span leaf="">步骤标题占位三</span></span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;"><span leaf="">流程说明占位：第三步收尾并确认。</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 27 暖色时间线
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">时间线标题占位</span></p>
|
||||
<section style="margin:0;padding:2px 0 2px 16px;border-left:2px dotted #EE7A2D;">
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span style="font-weight:bold;"><span leaf="">时间节点占位一</span></span></p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">节点说明占位：这一阶段发生了什么。</span></p>
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span style="font-weight:bold;"><span leaf="">时间节点占位二</span></span></p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">节点说明占位：这一阶段的心情或变化。</span></p>
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span style="font-weight:bold;"><span leaf="">时间节点占位三</span></span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">节点说明占位：时间线在这里收束。</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 L：问答（faq）
|
||||
|
||||
#### 组件 28 问答呼吸卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 16px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">常见问答标题占位</span></p>
|
||||
<p style="margin:0 0 8px;font-size:15px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;"><span leaf="">问</span></span><span style="vertical-align:middle;"><span leaf="">常见问题占位一</span></span></p>
|
||||
<section style="margin:0 0 18px;padding:12px 16px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">答案说明占位：用平稳的语气回答第一个问题。</span></p>
|
||||
</section>
|
||||
<p style="margin:0 0 8px;font-size:15px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;"><span leaf="">问</span></span><span style="vertical-align:middle;"><span leaf="">常见问题占位二</span></span></p>
|
||||
<section style="margin:0;padding:12px 16px;background:#F9E3CE;border-radius:14px;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">答案说明占位：第二个问题的回答同样保持柔和。</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 M：资源（resource）
|
||||
|
||||
#### 组件 29 延伸阅读暖卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">延伸阅读标题占位</span></p>
|
||||
<p style="margin:0 0 12px;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span leaf="">延伸标题占位一</span><span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;"><span leaf="">分类占位 · 阅读量占位</span></span></p>
|
||||
<p style="margin:0 0 12px;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span leaf="">延伸标题占位二</span><span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;"><span leaf="">分类占位 · 阅读量占位</span></span></p>
|
||||
<p style="margin:0;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span leaf="">延伸标题占位三</span><span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;"><span leaf="">分类占位 · 阅读量占位</span></span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 30 资料引导条
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:22px;">
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:34px;height:34px;line-height:34px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:16px;font-weight:bold;text-align:center;margin-right:12px;vertical-align:middle;"><span leaf="">↓</span></span><span style="vertical-align:middle;"><span leaf="">资料说明占位：配套资料与获取方式说明。</span></span></p>
|
||||
<p style="margin:0;"><span style="display:inline-block;padding:9px 26px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:15px;font-weight:bold;"><span leaf="">获取方式占位</span></span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 N：作者（author）
|
||||
|
||||
#### 组件 31 作者暖名卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:20px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
|
||||
<img src="https://placehold.orence.net/140x140/F9E3CE/EE7A2D?text=Avatar" alt="作者头像占位" style="max-width:100%;height:auto;display:block;margin:0 auto;width:84px;border-radius:50%;border:3px solid #F9E3CE;">
|
||||
<p style="margin:12px 0 2px;font-size:19px;font-weight:bold;color:#3D3229;"><span leaf="">作者名占位</span></p>
|
||||
<p style="margin:0 0 10px;font-size:13px;color:#C2541A;"><span leaf="">作者身份占位 · 领域占位</span></p>
|
||||
<p style="margin:0 0 14px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">作者简介占位：一句话介绍作者的兴趣与写作方向。</span></p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 14px;">
|
||||
<span style="display:inline-block;padding:8px 28px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);"><span leaf="">关注按钮占位</span></span>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 32 联系方式卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">联系标题占位</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">渠道占位一：联系信息占位一</span></span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">渠道占位二：联系信息占位二</span></span></p>
|
||||
<p style="margin:0;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">渠道占位三：联系信息占位三</span></span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 O：行动号召（cta）
|
||||
|
||||
#### 组件 33 暖橙主行动卡
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:24px 14px;background:#EE7A2D;border-radius:24px;box-shadow:0 10px 24px rgba(238,122,45,0.28);text-align:center;">
|
||||
<p style="margin:0 0 8px;font-size:23px;line-height:1.5;font-weight:bold;color:#FFFFFF;"><span leaf="">行动主标题占位</span></p>
|
||||
<p style="margin:0 0 18px;font-size:14px;line-height:1.8;color:#FDFBF7;"><span leaf="">行动说明占位：一句话说清楚下一步做什么，语气积极。</span></p>
|
||||
<span style="display:inline-block;padding:11px 34px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:16px;font-weight:bold;box-shadow:0 4px 12px rgba(61,50,41,0.15);"><span leaf="">按钮文案占位</span></span>
|
||||
<p style="margin:12px 0 0;font-size:13px;color:#F9E3CE;"><span leaf="">行动备注占位：补充说明一行</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
### 组件族 P：结尾（ending）
|
||||
|
||||
#### 组件 34 温暖收束卡（结语总结）
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:20px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;"><span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">结语标签占位</span></span></p>
|
||||
<p style="margin:0 0 14px;font-size:20px;font-weight:bold;color:#3D3229;"><span leaf="">收束标题占位</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">收束要点占位一</span></span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">收束要点占位二</span></span></p>
|
||||
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">收束要点占位三</span></span></p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 12px;">
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#C2541A;"><span leaf="">结语文字占位：一句收尾的温暖话，像把杯子轻轻放回桌上。</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 35 互动留言区
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:20px 14px;background:#F9E3CE;border-radius:22px;text-align:center;">
|
||||
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;"><span leaf="">互动问题占位</span></p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">互动引导占位：把问题抛给读者，邀请他们在留言区聊聊。</span></p>
|
||||
<p style="margin:0 0 14px;">
|
||||
<span style="display:inline-block;padding:7px 22px;margin:0 6px 8px 0;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:14px;font-weight:bold;"><span leaf="">选项占位一</span></span>
|
||||
<span style="display:inline-block;padding:7px 22px;margin:0 0 8px 6px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:14px;font-weight:bold;"><span leaf="">选项占位二</span></span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;"><span leaf="">留言引导占位：点赞占位 · 在看占位 · 分享占位</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### 组件 36 再会祝福尾签（全文最后一块）
|
||||
|
||||
```html
|
||||
<section style="margin:0;padding:22px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
|
||||
<p style="margin:0 0 8px;font-size:13px;color:#EE7A2D;letter-spacing:6px;"><span leaf="">· · ·</span></p>
|
||||
<p style="margin:0 0 6px;font-size:17px;line-height:1.8;font-weight:bold;color:#3D3229;"><span leaf="">祝福语占位：愿你今天也被温柔对待</span></p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;"><span leaf="">结尾落款占位 · 下期预告占位</span></p>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三、完整文章模板骨架
|
||||
|
||||
```html
|
||||
<section style="max-width:677px;margin:0 auto;padding:18px 4px 24px;background:#FDFBF7;color:#3D3229;font-size:16px;line-height:1.8;font-family:'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif;overflow-x:hidden;">
|
||||
|
||||
<!-- 1. 开篇：暖阳导语条（组件 2）——全文第一块；标签 + 一句话导语，不放大字主标题/头图/落款 -->
|
||||
|
||||
<!-- 2. 目录：圆点目录卡（组件 4）——【位置铁律】必须紧跟导语条之下、开篇叙事之前，读者先拿到全文地图；章节多时可加 标签索引带（组件 5）做关键词导航 -->
|
||||
|
||||
<!-- 3. 开篇叙事：品牌叙事开篇卡（组件 3）——情绪铺垫 + 行动按钮；生活叙事类可改用 热茶引语卡（组件 13）开场 -->
|
||||
|
||||
<!-- 4. 第一章：暖章编号标题（组件 7，重点章）或 圆点章节标题（组件 6，轻量章） -->
|
||||
<!-- 章内装配：呼吸正文段落 9（每段标 1~3 处行内下划线 12a）+ 浅杏底纹强调段 11 -->
|
||||
<!-- 按内容插入：引用 13 / 提示 14~16 / 清单 17~18 / 媒体 19~20 / 代码 21 / 数据 22~23 / 对比 24~25 / 流程 26~27 / FAQ 28 -->
|
||||
|
||||
<!-- 5. 第 2~N 章：编号递增；章与章之间用 暖点分隔线（组件 8）轻分隔，保持呼吸感 -->
|
||||
|
||||
<!-- 6. 资源位（可选）：延伸阅读暖卡 29 / 资料引导条 30——放结语之前 -->
|
||||
|
||||
<!-- 7. 结语：温暖收束卡（组件 34）——收束要点 + 温暖收尾 -->
|
||||
|
||||
<!-- 8. 行动号召：暖橙主行动卡（组件 33）——品牌发布/产品介绍必放；生活叙事可省 -->
|
||||
|
||||
<!-- 9. 互动：互动留言区（组件 35）——抛出互动问题 -->
|
||||
|
||||
<!-- 10. 作者：作者暖名卡（组件 31），需要时补 联系方式卡（组件 32） -->
|
||||
|
||||
<!-- 11. 尾签：再会祝福尾签（组件 36）——全文最后一块，轻轻收笔 -->
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
**骨架顺序铁律**：圆点目录卡（组件 4）**必须紧跟暖阳导语条之下**，在开篇叙事和任何正文之前；暖橙主题整体是「情绪开篇优先、章节弱分隔、结尾三层收束（收束卡 → 互动 → 祝福尾签）」的低压迫节奏，章节之间靠留白与暖点分隔线过渡，不堆重色块。
|
||||
|
||||
---
|
||||
|
||||
## 四、文章类型 → 组件组合配方表
|
||||
|
||||
| 文章类型 | 核心组件组合 | 点缀组件 |
|
||||
|---|---|---|
|
||||
| 新闻简报 | 导语条 2 + 目录 4 + 圆点清单卡 17 + 轻盈指标条 22 + 前后对照卡 24 + 温暖收束卡 34 | 标签索引带 5、暖点分隔线 8 |
|
||||
| 产品测评 | 导语条 2 + 目录 4 + 拍立得图文卡 20 + 轻重对照清单 25 + 字段数据表 23 + 问答呼吸卡 28 | 轻盈指标条 22、前后对照卡 24、暖橙主行动卡 33 |
|
||||
| 实践复盘 | 导语条 2 + 目录 4 + 品牌叙事开篇卡 3 + 暖色时间线 27 + 前后对照卡 24 + 心愿任务清单 18 + 温暖收束卡 34 | 陪伴留声卡 16、浅杏底纹强调段 11 |
|
||||
| 技术教程 | 导语条 2 + 目录 4 + 暖章编号标题 7 + 三步流程圆点卡 26 + 浅杏代码块 21 + 行内代码 12d + 资料引导条 30 | 暖心提示卡 14、温和提醒卡 15、延伸阅读暖卡 29 |
|
||||
| 生活叙事 | 导语条 2 + 品牌叙事开篇卡 3 + 拍立得图文卡 20 + 热茶引语卡 13 + 呼吸正文段落 9 + 互动留言区 35 + 再会祝福尾签 36 | 圆点清单卡 17、陪伴留声卡 16 |
|
||||
|
||||
所有类型共用固定结构：全局容器 1 + 导语条 2 + 目录 4（紧跟封面）+ 章节标题 6/7 + 结尾三件套 34/35/36 中至少收束卡 34 与尾签 36。一篇文章点缀组件种类 ≤3，保持暖而不闹。
|
||||
|
||||
---
|
||||
|
||||
## 五、Markdown → 暖橙风排版 映射规则表
|
||||
|
||||
| Markdown 元素 | 对应组件 | 说明 |
|
||||
|---|---|---|
|
||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；开篇导语（组件 2）从中提炼一句，视角与外标题错开，不复述关键词 |
|
||||
| 文章开头 `> 引言` | 品牌叙事开篇卡 3（叙事向）/ 热茶引语卡 13（金句向） | 情绪铺垫 |
|
||||
| `## 章节标题` | 暖章编号标题 7（重点章）/ 圆点章节标题 6（轻量章） | 编号 01/02/03 递增 |
|
||||
| `### 小节标题` | 圆点章节标题 6 复用 | 引导语一行点明小节 |
|
||||
| 普通段落 | 呼吸正文段落 9 | 每段主动标 1~3 处下划线（12a） |
|
||||
| 段首引导短语 | 暖点引导段落 10 | 浅杏高亮短语开头 |
|
||||
| 核心观点段 | 浅杏底纹强调段 11 | 浅杏衬底 + 暖橙左竖线 |
|
||||
| `**加粗文字**` | 行内 12b 暖橙加粗 | 核心概念/品牌名，全文 ≤5 处 |
|
||||
| `==高亮文字==` | 行内 12c 浅杏底标签 | 每段 ≤1 处 |
|
||||
| `<u>下划线</u>` / `++文字++` | 行内 12a 杏橙下划线 | `border-bottom:2px solid #F9C9A3`，正文关键词默认标记 |
|
||||
| `> 引用段落`（金句） | 热茶引语卡 13 | 大引号 + 点线 + 署名 |
|
||||
| 提示/注意/陪伴语 | 暖心提示卡 14 / 温和提醒卡 15 / 陪伴留声卡 16 | 信息/注意/心理陪伴三档 |
|
||||
| `- 无序列表` | 圆点清单卡 17 | 暖橙圆点 |
|
||||
| `1. 2. 3. 有序列表` | 三步流程圆点卡 26（步骤型） | 圆徽章编号 |
|
||||
| 任务/打卡清单 | 心愿任务清单 18 | ✓ 已完成 / 空心待完成 |
|
||||
| ` ``` 多行代码块 ``` ` | 浅杏代码块 21 | 每行 `<br>` 分隔，行文字包 leaf，缩进用 ` ` |
|
||||
| 行内 `` `code` `` | 行内 12d 行内代码 | 浅杏底圆角 |
|
||||
| Markdown 表格 | 字段数据表 23 | 仅真实表格语义；表头浅杏底 |
|
||||
| 数据/指标 | 轻盈指标条 22 | 大数字 + 名称 + 说明 |
|
||||
| 前后变化对比 | 前后对照卡 24 | 调整前 → 调整后 |
|
||||
| 优劣/留意对比 | 轻重对照清单 25 | 优势组 ✓ / 留意组 — |
|
||||
| 流程（3 步） | 三步流程圆点卡 26 | 点线分隔步骤 |
|
||||
| 递进/时间脉络 | 暖色时间线 27 | 暖橙点状竖线 |
|
||||
| FAQ 问答 | 问答呼吸卡 28 | 「问」徽章 + 浅杏答案块 |
|
||||
| `` | 圆角大图卡 19 / 拍立得图文卡 20（生活感） | 原图代码保留，占位图按语义配 alt |
|
||||
| 延伸阅读 | 延伸阅读暖卡 29 | 暖点 + 分类小注 |
|
||||
| 资料/获取方式 | 资料引导条 30 | ↓ 圆徽章 + 白底按钮 |
|
||||
| `---` 分隔线 | 暖点分隔线 8 | 章间暖橙点线 |
|
||||
| 文末 | 温暖收束卡 34 + 暖橙主行动卡 33 + 互动留言区 35 + 再会祝福尾签 36 | 按骨架顺序装配，尾签必放最后 |
|
||||
@@ -31,12 +31,12 @@
|
||||
标签底色： #EEF3F0（极浅墨绿底，胶囊标签用）
|
||||
标签文字色： #3D5046（深墨绿，胶囊标签文字）
|
||||
|
||||
正文字号： 15px
|
||||
正文字号： 16px
|
||||
行高： 1.9
|
||||
字间距： 0.3px
|
||||
段落间距： 26px+
|
||||
章节上下留白： 64px+
|
||||
内容区边距： 0 16px（左右各 16px，比红白系更宽）
|
||||
内容区边距： 0 10px（左右各 10px，留白气质靠行距与上下间距保持）
|
||||
|
||||
标题字体： 'Noto Serif SC', Georgia, 'Times New Roman', serif（衬线）
|
||||
正文字体： -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
|
||||
@@ -61,11 +61,11 @@
|
||||
> 纯白底，上下各一条 1px 细线（`#E8E8E8`），衬线字体大字金句居中，右下署名。无边框、无阴影、无色块——完全靠留白和细线传递气质。
|
||||
|
||||
```html
|
||||
<section style="margin: 32px 16px 48px;padding: 40px 24px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 19px;font-weight: 600;color: #2B2B2B;margin: 0 0 28px;line-height: 1.85;letter-spacing: 0.8px;">
|
||||
<section style="margin: 32px 10px 48px;padding: 28px 14px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:20px;font-weight: 600;color: #2B2B2B;margin: 0 0 28px;line-height: 1.85;letter-spacing: 0.8px;">
|
||||
<span leaf="">这里放开篇金句，衬线字体自带书卷气，</span><span leaf="">留白让文字自己呼吸。</span>
|
||||
</p>
|
||||
<p style="font-size: 12px;color: #A3A3A3;margin: 0;letter-spacing: 1.5px;">
|
||||
<p style="font-size:13px;color: #A3A3A3;margin: 0;letter-spacing: 1.5px;">
|
||||
<span leaf="">—— 作者名（按文章作者/主题而定）</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -80,7 +80,7 @@
|
||||
> 无色块目录，用细线分隔，数字编号低调呈现。三列等宽，纯文字 + 细线底边。
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px 48px;">
|
||||
<section style="padding: 0 10px 48px;">
|
||||
<p style="font-size: 11px;color: #A3A3A3;margin: 0 0 20px;letter-spacing: 2px;text-transform: uppercase;">
|
||||
<span leaf="">本文脉络</span>
|
||||
</p>
|
||||
@@ -88,15 +88,15 @@
|
||||
<section style="display: flex;">
|
||||
<section style="flex: 1;padding: 18px 12px 18px 0;border-bottom: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8;margin-right: 16px;">
|
||||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;margin: 0 0 6px;letter-spacing: 1px;"><span leaf="">01</span></p>
|
||||
<p style="font-size: 13px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第一个要点</span></p>
|
||||
<p style="font-size:14px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第一个要点</span></p>
|
||||
</section>
|
||||
<section style="flex: 1;padding: 18px 12px 18px 0;border-bottom: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8;margin-right: 16px;">
|
||||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;margin: 0 0 6px;letter-spacing: 1px;"><span leaf="">02</span></p>
|
||||
<p style="font-size: 13px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第二个要点</span></p>
|
||||
<p style="font-size:14px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第二个要点</span></p>
|
||||
</section>
|
||||
<section style="flex: 1;padding: 18px 0 18px 0;border-bottom: 1px solid #E8E8E8;">
|
||||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;margin: 0 0 6px;letter-spacing: 1px;"><span leaf="">03</span></p>
|
||||
<p style="font-size: 13px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第三个要点</span></p>
|
||||
<p style="font-size:14px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第三个要点</span></p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -110,7 +110,7 @@
|
||||
> 极细线 + 超大上下 margin，靠留白分层，不依赖视觉装饰。
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px;">
|
||||
<section style="padding: 0 10px;">
|
||||
<section style="height: 1px;background: #E8E8E8;margin: 64px 0 0;">
|
||||
<span leaf=""><br></span>
|
||||
</section>
|
||||
@@ -124,11 +124,11 @@
|
||||
> 英文小标签（极小号，墨绿，大字间距）+ 衬线中文大标题 + 标题下方一条短细线（40px 宽，墨绿）。编号低调嵌入英文标签前。无色块，无粗边框。
|
||||
|
||||
```html
|
||||
<section style="margin-top: 64px;margin-bottom: 32px;padding: 0 16px;">
|
||||
<section style="margin-top: 64px;margin-bottom: 32px;padding: 0 10px;">
|
||||
<p style="font-size: 10px;color: #4A5D52;font-weight: 600;letter-spacing: 4px;margin: 0 0 10px;text-transform: uppercase;">
|
||||
<span leaf="">01 · CHAPTER ONE</span>
|
||||
</p>
|
||||
<h3 style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 22px;font-weight: 700;color: #2B2B2B;margin: 0 0 16px;letter-spacing: 0.5px;line-height: 1.4;">
|
||||
<h3 style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:23px;font-weight: 700;color: #2B2B2B;margin: 0 0 16px;letter-spacing: 0.5px;line-height: 1.4;">
|
||||
<span leaf="">中文章节大标题</span>
|
||||
</h3>
|
||||
<section style="width: 40px;height: 2px;background: #4A5D52;">
|
||||
@@ -157,7 +157,7 @@
|
||||
**基础段落**：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
|
||||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 10px;">
|
||||
<span leaf="">正文内容，15px 字号，1.9 倍行高，两端对齐。段落间距 26px+，字里行间充满呼吸感。</span>
|
||||
</p>
|
||||
```
|
||||
@@ -165,7 +165,7 @@
|
||||
**带关键词下划线标记的段落**（推荐默认使用）：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
|
||||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 10px;">
|
||||
<span leaf="">正文内容的前半部分，引出核心概念，</span>
|
||||
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">这是需要强调的关键语句</span></span>
|
||||
<span leaf="">，后半部分继续阐述。</span>
|
||||
@@ -209,7 +209,7 @@
|
||||
> 极浅墨绿底 + 深墨绿字，低调不刺眼。用于核心概念（每篇 2~4 个）。
|
||||
|
||||
```html
|
||||
<span style="background: #EEF3F0;color: #3D5046;padding: 2px 6px;border-radius: 2px;font-weight: 600;font-size: 14px;"><span leaf="">关键词标签</span></span>
|
||||
<span style="background: #EEF3F0;color: #3D5046;padding: 2px 6px;border-radius: 2px;font-weight: 600;font-size:15px;"><span leaf="">关键词标签</span></span>
|
||||
```
|
||||
|
||||
### 7c. 留空（本风格不设此变体，保持克制）
|
||||
@@ -227,7 +227,7 @@
|
||||
**在段落中的实际效果**：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
|
||||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 10px;">
|
||||
<span leaf="">这个时代的竞争，拼的不是速度，而是</span>
|
||||
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">深度思考的能力</span></span>
|
||||
<span leaf="">。真正的高手，往往在别人仰望风口时，已经悄悄</span>
|
||||
@@ -253,8 +253,8 @@
|
||||
> 纯白底，上下各一条 1px 细线，衬线字体居中，大留白。这是禅意风最具特色的引用形式——不用色块，靠留白和字体传递力量。
|
||||
|
||||
```html
|
||||
<section style="margin: 40px 16px;padding: 36px 20px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 17px;font-weight: 600;color: #2B2B2B;margin: 0;line-height: 1.9;letter-spacing: 0.8px;">
|
||||
<section style="margin: 40px 10px;padding: 32px 14px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:18px;font-weight: 600;color: #2B2B2B;margin: 0;line-height: 1.9;letter-spacing: 0.8px;">
|
||||
<span leaf="">「这里是核心金句，衬线字体 + 大留白 + 细线框定。」</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -265,8 +265,8 @@
|
||||
> 极细左竖条（`#4A5D52`，2px），无底色，大 padding，适合旁注和补充说明。
|
||||
|
||||
```html
|
||||
<section style="border-left: 2px solid #4A5D52;padding: 10px 20px 10px 20px;margin: 0 16px 30px;background: #FFFFFF;">
|
||||
<p style="font-size: 14px;color: #525252;margin: 0;line-height: 1.9;text-align: justify;">
|
||||
<section style="border-left: 2px solid #4A5D52;padding: 10px 14px 10px 14px;margin: 0 10px 30px;background: #FFFFFF;">
|
||||
<p style="font-size:15px;color: #525252;margin: 0;line-height: 1.9;text-align: justify;">
|
||||
<span leaf="">旁注或补充说明内容，左侧细竖线划定边界，无色块，保持呼吸感。</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -277,8 +277,8 @@
|
||||
> 仅左侧 1px 浅灰线，字号稍小，颜色略淡，用于最轻量的旁注或个人感想。
|
||||
|
||||
```html
|
||||
<section style="border-left: 1px solid #E8E8E8;padding: 8px 16px;margin: 0 16px 28px;">
|
||||
<p style="font-size: 13px;color: #A3A3A3;margin: 0;line-height: 1.9;text-align: justify;font-style: italic;">
|
||||
<section style="border-left: 1px solid #E8E8E8;padding: 8px 10px;margin: 0 10px 28px;">
|
||||
<p style="font-size:14px;color: #A3A3A3;margin: 0;line-height: 1.9;text-align: justify;font-style: italic;">
|
||||
<span leaf="">极轻量旁注，颜色浅、字号小，几乎不打扰主文节奏。</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -291,11 +291,11 @@
|
||||
> 用墨绿左竖条 + 「提示」小标签区分，无色块底色。保持留白气质，不用醒目色块警示。
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 32px;padding: 18px 20px;border-left: 2px solid #4A5D52;">
|
||||
<section style="margin: 0 10px 32px;padding: 18px 14px;border-left: 2px solid #4A5D52;">
|
||||
<p style="font-size: 10px;color: #4A5D52;font-weight: 600;letter-spacing: 2px;margin: 0 0 8px;text-transform: uppercase;">
|
||||
<span leaf="">NOTE</span>
|
||||
</p>
|
||||
<p style="font-size: 14px;color: #525252;margin: 0;line-height: 1.9;">
|
||||
<p style="font-size:15px;color: #525252;margin: 0;line-height: 1.9;">
|
||||
<span leaf="">这里是重要提示或核心结论，用小标签「NOTE」区分，不用色块。</span>
|
||||
</p>
|
||||
</section>
|
||||
@@ -306,7 +306,7 @@
|
||||
## 组件 10 图片容器
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 10px;border: 1px solid #E8E8E8;">
|
||||
<section style="margin: 0 10px 10px;border: 1px solid #E8E8E8;">
|
||||
<section style="margin: 0;overflow: hidden;">
|
||||
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
|
||||
</section>
|
||||
@@ -316,12 +316,12 @@
|
||||
图片 + 说明文字配合（说明文字用辅助色，居中，大留白）：
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 8px;border: 1px solid #E8E8E8;">
|
||||
<section style="margin: 0 10px 8px;border: 1px solid #E8E8E8;">
|
||||
<section style="margin: 0;overflow: hidden;">
|
||||
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
|
||||
</section>
|
||||
</section>
|
||||
<p style="font-size: 12px;color: #A3A3A3;text-align: center;margin: 8px 16px 32px;letter-spacing: 0.5px;">
|
||||
<p style="font-size:13px;color: #A3A3A3;text-align: center;margin: 8px 10px 32px;letter-spacing: 0.5px;">
|
||||
<span leaf="">— 图片说明文字</span>
|
||||
</p>
|
||||
```
|
||||
@@ -331,7 +331,7 @@
|
||||
## 组件 11 加粗结论段落
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 16px;">
|
||||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 10px;">
|
||||
<span leaf="">加粗的结论性短句，字色加深到近黑，靠字重而非色彩传达重量。</span>
|
||||
</p>
|
||||
```
|
||||
@@ -339,7 +339,7 @@
|
||||
结合荧光笔的变体：
|
||||
|
||||
```html
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 16px;">
|
||||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 10px;">
|
||||
<span style="background: linear-gradient(180deg, transparent 60%, #D6E4DC 60%);"><span leaf="">荧光笔标记的结论句，极浅墨绿底，克制温柔。</span></span>
|
||||
</p>
|
||||
```
|
||||
@@ -351,13 +351,13 @@
|
||||
### 两列版（用细线边框替代色块）
|
||||
|
||||
```html
|
||||
<section style="display: flex;margin: 0 16px 32px;">
|
||||
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 24px 16px;margin-right: 12px;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 32px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">14亿</span></p>
|
||||
<section style="display: flex;margin: 0 10px 32px;">
|
||||
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 22px 12px;margin-right: 12px;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:33px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">14亿</span></p>
|
||||
<p style="font-size: 11px;color: #A3A3A3;margin: 0;letter-spacing: 1px;"><span leaf="">覆盖用户</span></p>
|
||||
</section>
|
||||
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 24px 16px;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 32px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">3步</span></p>
|
||||
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 22px 12px;text-align: center;">
|
||||
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:33px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">3步</span></p>
|
||||
<p style="font-size: 11px;color: #A3A3A3;margin: 0;letter-spacing: 1px;"><span leaf="">快速接入</span></p>
|
||||
</section>
|
||||
</section>
|
||||
@@ -366,18 +366,18 @@
|
||||
### 要点列表版（竖排，细线分隔）
|
||||
|
||||
```html
|
||||
<section style="margin: 0 16px 32px;border-top: 1px solid #E8E8E8;">
|
||||
<section style="margin: 0 10px 32px;border-top: 1px solid #E8E8E8;">
|
||||
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 1px solid #E8E8E8;">
|
||||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;letter-spacing: 1px;margin: 0;min-width: 28px;"><span leaf="">01</span></p>
|
||||
<p style="font-size: 14px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点一：简明扼要的核心内容</span></p>
|
||||
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点一：简明扼要的核心内容</span></p>
|
||||
</section>
|
||||
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 1px solid #E8E8E8;">
|
||||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;letter-spacing: 1px;margin: 0;min-width: 28px;"><span leaf="">02</span></p>
|
||||
<p style="font-size: 14px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点二：简明扼要的核心内容</span></p>
|
||||
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点二：简明扼要的核心内容</span></p>
|
||||
</section>
|
||||
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 1px solid #E8E8E8;">
|
||||
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;letter-spacing: 1px;margin: 0;min-width: 28px;"><span leaf="">03</span></p>
|
||||
<p style="font-size: 14px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点三：简明扼要的核心内容</span></p>
|
||||
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点三：简明扼要的核心内容</span></p>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
@@ -405,7 +405,7 @@
|
||||
> 居中极细线 + 「END」字样，低调收尾。墨绿细线 + 小号字母，不用渐变装饰。
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px;">
|
||||
<section style="padding: 0 10px;">
|
||||
<section style="text-align: center;margin: 48px 0 40px;">
|
||||
<section style="display: flex;align-items: center;justify-content: center;">
|
||||
<span style="height: 1px;width: 48px;background: #E8E8E8;margin-right: 16px;"></span>
|
||||
@@ -421,11 +421,11 @@
|
||||
## 组件 15 尾部作者签名区
|
||||
|
||||
```html
|
||||
<section style="padding: 0 16px 40px;">
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;">
|
||||
<section style="padding: 0 10px 40px;">
|
||||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;">
|
||||
<span leaf="">我是 {{作者名}}，{{一句话简介，如：热衷于分享 AI 观察与干货}}。</span>
|
||||
</p>
|
||||
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;">
|
||||
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;">
|
||||
<span leaf="">如果你觉得今天这篇有收获，欢迎</span>
|
||||
<strong style="color: #4A5D52;"><span leaf="">点赞、在看、转发</span></strong>
|
||||
<span leaf="">三连，我们下篇见。</span>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
（每个常写的项目一条：名称、一句话定位、关键链接、当前版本/状态）
|
||||
|
||||
- （待填写，如：MetaSkill —— Leroy 的 Agent Skill 工坊项目，…)
|
||||
- 超级 AI 妈妈 —— 厚德明心（北京）科技有限公司面向妈妈群体的 AI 心理陪伴 App（客户产品，2026-10-23 首篇发布稿）。发布口径：公测预约中；核心卖点「妈妈说一句话，AI 自动生成对应功能」；积极心理学理论底座；功能面含多模态情绪识别（生理数据+文本语音表情）、专业量表对话化评估（筛查辅助定位）、疗愈方案（冥想呼吸引导）、妈妈端+专业端双端。公司背景锚点（公开可查）：2003 年成立、国内最早从事积极心理服务的公司之一、2007 年将哈佛「积极心理学（幸福课）」引入中国、创始人倪子君（2026-10-23 客户口径：清华大学心理学博士、清华大学国际工商管理硕士、清华大学幸福科技实验室（H-lab）产业发展委员会副主任，早年央视《心理访谈》编导；公开资料另见清华幸福科学研究中心副主任等表述）、与清华彭凯平教授合作 AI 心理谈心机器人（媒体报道首年营收千万）、2025-05 发布《养育健康成功的孩子，从做一个幸福妈妈开始》报告。
|
||||
|
||||
## 工具链与环境
|
||||
|
||||
|
||||
@@ -40,6 +40,32 @@
|
||||
- **手绘媒介**：同一篇内统一一种媒介，篇与篇之间轮换，避免整个号只有一种图。媒介池：马克笔白板 / 方格笔记本 / 便签 / 黑板粉笔 / 牛皮纸手绘 / 终端等宽 / 打印稿批注 / 扁平矢量
|
||||
- **实证图**（真实截图/照片）：优先作为证据直接使用，不重绘产品界面当证据；需要标注/放大/对比时才加工
|
||||
|
||||
## 生产路由（每张图先判断走哪条路径，充分发挥各路径长处）
|
||||
|
||||
判断原则：**画面质感、设计感、字效构图优先走 le-gpt-image（它输出的是设计）；精确几何、多元素结构、可编辑性优先走 SVG（它输出的是图形）；实证不生成只加工。**
|
||||
|
||||
| 图位类型 | 路径 | 理由 |
|
||||
|---|---|---|
|
||||
| 实证位（真实截图/照片） | 直接使用，不生成；需标注/高亮/对比时用 le-gpt-image `edit` 加工 | 证据不可代生成，但可以加工 |
|
||||
| 节奏位（概念隐喻、场景氛围，图上无文字） | **le-gpt-image** | 质感、光影、氛围是它的主场；SVG 画氛围图易显工程感 |
|
||||
| 信息位 · 视觉卡片型（少文字概念图、金句卡、海报感信息卡） | **le-gpt-image**（文字排版走其 Gallery 的 layout-and-text 类） | 字效、版式、质感远超 SVG 拼贴；图上中文逐字写入 prompt 并读图复核（见联动协议） |
|
||||
| 信息位 · 精确结构型（多节点流程、数据曲线、层级结构图） | **SVG 自绘** | 元素多、标签密、要求逐字精确与可编辑，SVG 更稳 |
|
||||
| 封面（所有形态） | **le-gpt-image 首选**——layout-and-text 类案例打底出设计感封面，标题 4–7 字逐字写进 prompt 并要求主体居中（1:1 安全区），生成后居中裁到 2.35:1 再缩略验收；两轮不合格回退 SVG 纯色大字形态 | 字效、材质、构图是它的长处；尺寸偏差用裁剪兜底，安全区用验收兜底 |
|
||||
|
||||
走 le-gpt-image 的图篇内风格要统一（同一 Gallery 案例，或首张定稿后作 `--style-image` 生成其余）；SVG 信息图与 AI 图因功能不同可共存，各自内部统一。
|
||||
|
||||
## 与 le-gpt-image 的联动协议（节奏位、卡片型信息位、封面首选）
|
||||
|
||||
前提：本机已装 le-gpt-image 且 Codex 已登录（其 `scripts/gpt_image.py check` 可验）。把 brief 交给它执行时：
|
||||
|
||||
1. **Gallery 优先**：由 le-gpt-image 按其 gallery 索引路由精调案例做底改写，不现写——画面类（照片/插画/场景）走 generation 案例类，**文字排版类（封面、金句卡、信息卡、图表）走 layout-and-text 案例类**；改写只替换主体与文案，保留风格构图框架。
|
||||
2. **图上文字**：要出现的中文**逐字写进 prompt 并用直引号引用**（如 `the text "省 88% Token" centered`，原文直引不转述）；**带文字的图生成后逐字读图复核**（对图识字、与文章原文逐字比对）；错字用 `edit` 修（指令指明改哪个字）或重出一次，仍错回退 SVG 重做该图。带数量的图（「三步」「九张卡」）同样逐个数复核。
|
||||
3. **比例与裁剪**：其通道尺寸是建议值（实测约六成精确）——封面生成后**一律居中裁到 2.35:1**（sips 或 Pillow），prompt 同时要求主体居中（1:1 安全区），裁切与 345px 缩略回看双保险。
|
||||
4. **风格统一**：同一篇的多张 AI 图共用同一 Gallery 案例；或第一张定稿后作 `--style-image` 参考生成其余（风格迁移保篇内统一）。
|
||||
5. **实证加工**：真实截图需标注、高亮、去敏感信息时用 `edit`（指令明确「保留界面内容不变，仅添加/修改标注」），不重绘证据本体。
|
||||
6. **额度纪律**：单张 40–60 秒、消耗 ChatGPT 订阅额度——逐张生成逐张验收；变体只在验收不合格时重出一次，不做探索性批量。
|
||||
7. **失败回退**：凭证失效（401）、配额不足、内容策略拒绝、超时、或文字复核两轮不过——该图**回退 SVG 自绘路径**（节奏位降级为媒介池图形、卡片型信息位改几何卡、封面改纯色大字形态），如实记入交付清单的图片状态（哪张回退、原因），不中断交付流程。
|
||||
|
||||
## 与 ckm-banner-design 的联动协议
|
||||
|
||||
需要直接生成封面图时，把 brief 交给 ckm-banner-design 执行，brief 必须包含：
|
||||
@@ -52,9 +78,9 @@
|
||||
|
||||
产出后按「缩略图回看」验收；不合格改 brief 重生，不改用其他工具绕开。
|
||||
|
||||
## SVG 自绘路径（零依赖替代）
|
||||
## SVG 自绘路径（零依赖，兼失败回退位）
|
||||
|
||||
没有生图管线时，几何类信息图（流程、对比、曲线、分层）用 SVG 手绘完全够用，且比 AI 生图**文字更可靠**（不会出缺字错字）：SVG 源文件放 `imgs/src/`，浏览器打开后按目标尺寸截屏导出 PNG。曲线/管道/卡片类图优先走这条路；只有需要插画质感时才必须用生图。封面同样可 SVG 自绘（文字型封面 = 纯色大字形态，正是最稳的封面形态之一）。
|
||||
没有生图管线时，几何类信息图（流程、对比、曲线、分层）用 SVG 手绘完全够用，且比 AI 生图**文字更可靠**（不会出缺字错字）：SVG 源文件放 `imgs/src/`，浏览器打开后按目标尺寸截屏导出 PNG。曲线/管道/卡片类图优先走这条路；只有需要插画质感时才必须用生图。封面同样可 SVG 自绘（文字型封面 = 纯色大字形态，正是最稳的封面形态之一）。le-gpt-image 失败或文字复核两轮不过时，节奏位图、卡片型信息图与封面也都回退到这条路（见联动协议第 7 条）。
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"skill": "le-wechat-article",
|
||||
"date": "2026-10-05",
|
||||
"date": "2026-11-05",
|
||||
"threshold": 0.3,
|
||||
"prediction_mode": "coverage_fallback",
|
||||
"note": "词面冒烟测试；行为结论需真实对话实测（live_turns 字段手工补记）",
|
||||
@@ -250,14 +250,15 @@
|
||||
"text": "帮我找几个公众号选题",
|
||||
"family": "topic_only",
|
||||
"bucket": "near_neighbor",
|
||||
"coverage": 0.25,
|
||||
"coverage": 0.375,
|
||||
"coverage_hits": [
|
||||
"个公",
|
||||
"众号",
|
||||
"公众"
|
||||
],
|
||||
"families_hit": [],
|
||||
"negative_hit": false,
|
||||
"predicted_trigger": false,
|
||||
"predicted_trigger": true,
|
||||
"expected_trigger": null,
|
||||
"verdict": "boundary"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user