Compare commits
16
Commits
3b1ee9f997
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b47dcf2ff2 | ||
|
|
4ec81e253f | ||
|
|
f2723b8c5d | ||
|
|
f1ea057eb4 | ||
|
|
44a2215940 | ||
|
|
a473075f4d | ||
|
|
fdc54547f5 | ||
|
|
94fa94baef | ||
|
|
bc66afda33 | ||
|
|
9ec5bf1c52 | ||
|
|
0ad31c7a52 | ||
|
|
243bbf1db1 | ||
|
|
f7b7740829 | ||
|
|
08c615d9fd | ||
|
|
ddea4df127 | ||
|
|
ceb9f119f3 |
@@ -3,6 +3,7 @@
|
|||||||
|
|
||||||
# 本地 runtime 发现入口(软链到 skills/le-meta-skill,属于个人环境配置)
|
# 本地 runtime 发现入口(软链到 skills/le-meta-skill,属于个人环境配置)
|
||||||
.agents/
|
.agents/
|
||||||
|
.zcode/
|
||||||
|
|
||||||
# macOS
|
# macOS
|
||||||
.DS_Store
|
.DS_Store
|
||||||
@@ -20,3 +21,10 @@ __pycache__/
|
|||||||
# 环境与密钥(skill 零密钥底线)
|
# 环境与密钥(skill 零密钥底线)
|
||||||
.env
|
.env
|
||||||
.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。」*
|
> *「把重复出现的方法,变成可触发、可验证、可维护的 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 篇:五类型路由·排版规则·审读手册(含合规)·视觉生产·作者画像·常用事实卡
|
│ ├── references/ # 6 篇:五类型路由·排版规则·审读手册(含合规)·视觉生产·作者画像·常用事实卡
|
||||||
│ ├── scripts/ # check_article(硬规则自检)/ md2wechat(3 骨架×4 色板转微信 HTML)/ publish_draft(草稿箱同步,零依赖)
|
│ ├── scripts/ # check_article(硬规则自检)/ md2wechat(3 骨架×4 色板转微信 HTML)/ publish_draft(草稿箱同步,零依赖)
|
||||||
│ └── evals/ reports/
|
│ └── evals/ reports/
|
||||||
└── le-gpt-image/ # 无 Key GPT Image 生图工坊
|
├── le-gpt-image/ # 无 Key GPT Image 生图工坊
|
||||||
├── SKILL.md # 工作流:接单→停点确认→生成交付;能力边界 / 尺寸质量速查 / 故障排查
|
│ ├── SKILL.md # 工作流:接单→停点确认→生成交付;能力边界 / 尺寸质量速查 / 故障排查
|
||||||
├── references/ # prompt-craft:结构公式·文字渲染·摄影/插画/信息图·中文东方风格·改图指令·反模式
|
│ ├── references/ # prompt-craft:结构公式·文字渲染·摄影/插画/信息图·中文东方风格·改图指令·反模式
|
||||||
└── scripts/ # gpt_image.py(零依赖:Codex 凭证直连内部图像通道,token 自动刷新)
|
│ └── 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 工坊
|
## le-meta-skill —— Skill 工坊
|
||||||
@@ -85,6 +90,21 @@ skills/
|
|||||||
|
|
||||||
安全边界:凭证只读不打印不外发;内部接口无稳定性契约(native 失效可切 responses 备用通道);内容政策拒绝即停,不换措辞绕过。
|
安全边界:凭证只读不打印不外发;内部接口无稳定性契约(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 软链到对应位置即可:
|
三个 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
|
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
|
## 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` 预览计划)。
|
可选收尾:经官方 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 步:交付
|
### 第 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
|
```bash
|
||||||
python3 scripts/validate_gzh_html.py <文章目录>/article.html
|
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
|
- 代码/命令/Prompt → common-components 1a/1b 代码块(**必须**,塞普通段落会丢缩进);行内 code → 1c
|
||||||
- 图片 → 2a(只有 `` 真有说明文字才加说明行,不编造);**融合**:本地 `imgs/*.png` 路径原样保留,草稿箱同步时由 publish_draft.py 替换为微信域名
|
- 图片 → 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 标题层级,不用 `##`);末章为结语/总结时用主题库指定的结语编号变体(如 `∞`)。
|
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:#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:#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="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>
|
||||||
<section style="padding:11px 14px;">
|
<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: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: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: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: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="">print(make_skill("gzh-design"))</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -37,10 +37,10 @@
|
|||||||
```html
|
```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="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;">
|
<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>
|
||||||
<section style="padding:11px 14px;">
|
<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>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
### 1c. 行内代码(正文中的 `code` 短片段)
|
### 1c. 行内代码(正文中的 `code` 短片段)
|
||||||
|
|
||||||
```html
|
```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` 换主题主色;底色保持中性浅灰。)
|
(文字色 `#DC2626` 换主题主色;底色保持中性浅灰。)
|
||||||
@@ -69,7 +69,7 @@
|
|||||||
<span leaf=""><img src="图片URL" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
<span leaf=""><img src="图片URL" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||||
</section>
|
</section>
|
||||||
</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>
|
<span leaf="">— 图片说明文字</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -88,7 +88,7 @@
|
|||||||
</section>
|
</section>
|
||||||
<p style="text-align:center;margin:0 0 24px;">
|
<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="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>
|
</p>
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -102,9 +102,9 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin:0 0 24px;padding:30px 20px;border:1.5px dashed #DAD7D2;border-radius:14px;background:#FAFAF8;text-align:center;">
|
<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 0 10px;font-size:27px;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:0;font-size:15px;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:8px 0 0;font-size:14px;color:#B8B5B0;line-height:1.7;"><span leaf="">此处插入:创建 skill 的录屏演示</span></p>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -129,7 +129,7 @@
|
|||||||
### 3a. 左竖条小标题(最推荐,干净)
|
### 3a. 左竖条小标题(最推荐,干净)
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">小标题文字</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -138,14 +138,14 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<p style="margin:28px 0 14px;">
|
<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>
|
</p>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 3c. 序号药丸 + 标题(清单/步骤)
|
### 3c. 序号药丸 + 标题(清单/步骤)
|
||||||
|
|
||||||
```html
|
```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 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>
|
<span leaf="">要点标题</span>
|
||||||
</p>
|
</p>
|
||||||
@@ -155,7 +155,7 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin:0 0 24px;background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:16px 20px;">
|
<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>
|
<span leaf="">「这里是核心观点或关键金句」</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -168,7 +168,7 @@
|
|||||||
<p style="margin:0 0 6px;">
|
<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>
|
<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>
|
||||||
<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>
|
<span leaf="">提示或旁注的正文内容</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -207,7 +207,7 @@
|
|||||||
也就是说,需要覆盖文章排版常见场景,但"覆盖全面"不等于"固定骨架";你必须根据主题结构模型决定哪些类别更重、哪些类别更轻、哪些类别需要细分出更多变体。
|
也就是说,需要覆盖文章排版常见场景,但"覆盖全面"不等于"固定骨架";你必须根据主题结构模型决定哪些类别更重、哪些类别更轻、哪些类别需要细分出更多变体。
|
||||||
至少包含以下大类 Block:
|
至少包含以下大类 Block:
|
||||||
|
|
||||||
- 头图 / Hero / 封面
|
- 头图 / Hero / 封面(开篇组件必须是 ENGINE「版式基线」的轻量导语条形态:栏目标签 + 一句话导语,无大字主标题/头图/落款;正文字号 ≥15px、卡片侧边 padding ≤14px、容器/模块侧边 ≤6px(HTML 每侧合计 ≤16px))
|
||||||
- 章节标题 / 小节标题 / 标签标题
|
- 章节标题 / 小节标题 / 标签标题
|
||||||
- 正文段落 / 强调段落 / 行内代码段落
|
- 正文段落 / 强调段落 / 行内代码段落
|
||||||
- 引用块 / 提示卡 / 警示卡 / 成功卡 / 信息卡
|
- 引用块 / 提示卡 / 警示卡 / 成功卡 / 信息卡
|
||||||
|
|||||||
@@ -30,11 +30,11 @@
|
|||||||
极浅灰底: #FAFAFA(引用块 / 目录卡 / 提示块,正文底保持纯白)
|
极浅灰底: #FAFAFA(引用块 / 目录卡 / 提示块,正文底保持纯白)
|
||||||
纯白底: #FFFFFF
|
纯白底: #FFFFFF
|
||||||
强调色(暖橙): #F97316(全篇 ≤3 处,仅用于锚点点睛)
|
强调色(暖橙): #F97316(全篇 ≤3 处,仅用于锚点点睛)
|
||||||
正文字号: 15px(不可改)
|
正文字号: 16px(不可改)
|
||||||
行高: 1.8
|
行高: 1.8
|
||||||
字间距: 0.3px
|
字间距: 0.3px
|
||||||
最大宽度: 677px
|
最大宽度: 677px
|
||||||
内容区边距: 0 10px(左右各 10px)
|
内容区边距: 0 4px(模块边距,卡片侧边 10~12px)
|
||||||
章节间距: 56px(后续章节 margin-top)
|
章节间距: 56px(后续章节 margin-top)
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -63,16 +63,16 @@
|
|||||||
> - 纯白底 + 上下各 1px 石墨极细线框定 + 大号金句,无色块、无阴影、无圆角,完全依靠细线与留白产生质感
|
> - 纯白底 + 上下各 1px 石墨极细线框定 + 大号金句,无色块、无阴影、无圆角,完全依靠细线与留白产生质感
|
||||||
|
|
||||||
```html
|
```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;">
|
<p style="font-size:11px;color:#A1A1AA;letter-spacing:2px;margin:0 0 18px;font-weight:400;">
|
||||||
<span leaf="">QUOTE</span>
|
<span leaf="">QUOTE</span>
|
||||||
</p>
|
</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 leaf="">{{金句前段}}</span>
|
||||||
<span style="border-bottom:2px solid #52525B;"><span leaf="">{{石墨下划线关键词}}</span></span>
|
<span style="border-bottom:2px solid #52525B;"><span leaf="">{{石墨下划线关键词}}</span></span>
|
||||||
<span leaf="">{{金句收尾}}</span>
|
<span leaf="">{{金句收尾}}</span>
|
||||||
</p>
|
</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>
|
<span leaf="">—— {{作者名,未知则删整行}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -87,22 +87,22 @@
|
|||||||
> 3 个及以上章节时生成。上方极细线 + 极浅灰底,石墨灰编号 + 深炭标题,纯灰阶无橙色,大留白。展示**精选 3 个核心看点**,不是全量章节列表。
|
> 3 个及以上章节时生成。上方极细线 + 极浅灰底,石墨灰编号 + 深炭标题,纯灰阶无橙色,大留白。展示**精选 3 个核心看点**,不是全量章节列表。
|
||||||
|
|
||||||
```html
|
```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;">
|
<p style="font-size:11px;color:#A1A1AA;margin:0 0 16px;letter-spacing:2px;">
|
||||||
<span leaf="">本文看点</span>
|
<span leaf="">本文看点</span>
|
||||||
</p>
|
</p>
|
||||||
<section style="display:flex;justify-content:space-between;">
|
<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: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>
|
||||||
<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: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>
|
||||||
<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: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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -115,7 +115,7 @@
|
|||||||
> 无渐变、无颜色变化,单纯 1px 横向石墨极细线,两侧超大留白,呼吸感即来自此。
|
> 无渐变、无颜色变化,单纯 1px 横向石墨极细线,两侧超大留白,呼吸感即来自此。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding:0 10px;">
|
<section style="padding:0 8px;">
|
||||||
<section style="height:1px;background:#E4E4E7;margin:0;">
|
<section style="height:1px;background:#E4E4E7;margin:0;">
|
||||||
<span leaf=""><br></span>
|
<span leaf=""><br></span>
|
||||||
</section>
|
</section>
|
||||||
@@ -129,16 +129,16 @@
|
|||||||
> 核心特征:极大号石墨灰水印数字(作为背景层视觉锚)+ 英文小标签 + 深炭标题 + 底部 1px 细线。编号大字非常"现代极简"。第一章 `margin-top:16px`,后续章节 `margin-top:56px`。
|
> 核心特征:极大号石墨灰水印数字(作为背景层视觉锚)+ 英文小标签 + 深炭标题 + 底部 1px 细线。编号大字非常"现代极简"。第一章 `margin-top:16px`,后续章节 `margin-top:56px`。
|
||||||
|
|
||||||
```html
|
```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;">
|
<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>
|
<span leaf="">01</span>
|
||||||
</p>
|
</p>
|
||||||
<section style="margin-top:-8px;">
|
<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;">
|
<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>
|
<span leaf="">{{ENGLISH TAG}}</span>
|
||||||
</p>
|
</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>
|
<span leaf="">{{中文章节标题}}</span>
|
||||||
</h3>
|
</h3>
|
||||||
</section>
|
</section>
|
||||||
@@ -152,7 +152,7 @@
|
|||||||
**结语章节变体**(编号用 `∞` 替代数字,契合极简的无限循环意象,英文标签用 `THE END` / `EPILOGUE`):
|
**结语章节变体**(编号用 `∞` 替代数字,契合极简的无限循环意象,英文标签用 `THE END` / `EPILOGUE`):
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">∞</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -168,7 +168,7 @@
|
|||||||
**基础段落**:
|
**基础段落**:
|
||||||
|
|
||||||
```html
|
```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 leaf="">{{正文内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -176,7 +176,7 @@
|
|||||||
**带关键词下划线标记的段落**(推荐默认):
|
**带关键词下划线标记的段落**(推荐默认):
|
||||||
|
|
||||||
```html
|
```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 leaf="">{{前半句}}</span>
|
||||||
<span style="border-bottom:2px solid #52525B;font-weight:600;color:#27272A;"><span leaf="">{{需要强调的关键短语}}</span></span>
|
<span style="border-bottom:2px solid #52525B;font-weight:600;color:#27272A;"><span leaf="">{{需要强调的关键短语}}</span></span>
|
||||||
<span leaf="">{{后半句}}</span>
|
<span leaf="">{{后半句}}</span>
|
||||||
@@ -192,7 +192,7 @@
|
|||||||
> `###` 子标题用石墨左竖条 + 深炭标题,**不套用组件 5 的水印编号章节样式**(水印编号只给 `##`)。竖条 3px 石墨灰,贴合极简气质。
|
> `###` 子标题用石墨左竖条 + 深炭标题,**不套用组件 5 的水印编号章节样式**(水印编号只给 `##`)。竖条 3px 石墨灰,贴合极简气质。
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">{{子标题}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -222,7 +222,7 @@
|
|||||||
### 7b. 极浅灰底深炭字标签(核心概念,每篇 2~4 个)
|
### 7b. 极浅灰底深炭字标签(核心概念,每篇 2~4 个)
|
||||||
|
|
||||||
```html
|
```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. 极浅灰背景高亮(次要关键词)
|
### 7c. 极浅灰背景高亮(次要关键词)
|
||||||
@@ -252,7 +252,7 @@
|
|||||||
### 7g. 行内代码
|
### 7g. 行内代码
|
||||||
|
|
||||||
```html
|
```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 石墨灰竖条 + 大留白 + 深炭字,无底色,靠竖条与缩进建立层级,呼吸感极强。
|
> 左侧 3px 石墨灰竖条 + 大留白 + 深炭字,无底色,靠竖条与缩进建立层级,呼吸感极强。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="border-left:3px solid #52525B;padding:16px 0 16px 24px;margin:0 10px 28px;">
|
<section style="border-left:3px solid #52525B;padding:16px 0 16px 24px;margin:0 4px 28px;">
|
||||||
<p style="font-size:16px;font-weight:700;color:#27272A;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
<p style="font-size:17px;font-weight:700;color:#27272A;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
||||||
<span leaf="">「{{核心观点或关键金句}}」</span>
|
<span leaf="">「{{核心观点或关键金句}}」</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -276,11 +276,11 @@
|
|||||||
> 极浅灰底 + 1px 细线边框,用于展示 Prompt、引用内容、示例等较长内容。
|
> 极浅灰底 + 1px 细线边框,用于展示 Prompt、引用内容、示例等较长内容。
|
||||||
|
|
||||||
```html
|
```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;">
|
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:2px;font-weight:500;">
|
||||||
<span leaf="">REFERENCE</span>
|
<span leaf="">REFERENCE</span>
|
||||||
</p>
|
</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 石墨下划线等内联样式}}
|
{{引用内容,可含 7d 石墨下划线等内联样式}}
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -291,8 +291,8 @@
|
|||||||
> 极细辅助灰竖条 + 小号文字,用于轻量旁注、作者旁白,不抢主文视觉。
|
> 极细辅助灰竖条 + 小号文字,用于轻量旁注、作者旁白,不抢主文视觉。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="border-left:2px solid #E4E4E7;padding:12px 0 12px 20px;margin:0 10px 24px;">
|
<section style="border-left:2px solid #E4E4E7;padding:12px 0 12px 20px;margin:0 4px 24px;">
|
||||||
<p style="font-size:13px;color:#A1A1AA;margin:0;line-height:1.8;text-align:justify;">
|
<p style="font-size:14px;color:#A1A1AA;margin:0;line-height:1.8;text-align:justify;">
|
||||||
<span leaf="">{{轻量旁注内容}}</span>
|
<span leaf="">{{轻量旁注内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -303,7 +303,7 @@
|
|||||||
> 上下 1px 细线 + 居中深炭字,用于章节之间的过渡金句。
|
> 上下 1px 细线 + 居中深炭字,用于章节之间的过渡金句。
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">{{居中金句}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -317,8 +317,8 @@
|
|||||||
> 石墨竖条 + 深炭文字,无背景色,极简提醒。
|
> 石墨竖条 + 深炭文字,无背景色,极简提醒。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="border-left:3px solid #27272A;padding:14px 0 14px 22px;margin:0 10px 24px;">
|
<section style="border-left:3px solid #27272A;padding:14px 0 14px 22px;margin:0 4px 24px;">
|
||||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
<p style="font-size:15px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
||||||
<span leaf="">{{重要提示或核心结论}}</span>
|
<span leaf="">{{重要提示或核心结论}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -329,8 +329,8 @@
|
|||||||
> 橙色竖条 + 深炭文字,无背景色,是橙色在正文中最自然的出现方式。
|
> 橙色竖条 + 深炭文字,无背景色,是橙色在正文中最自然的出现方式。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="border-left:3px solid #F97316;padding:14px 0 14px 22px;margin:0 10px 24px;">
|
<section style="border-left:3px solid #F97316;padding:14px 0 14px 22px;margin:0 4px 24px;">
|
||||||
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
<p style="font-size:15px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
|
||||||
<span leaf="">{{最需要引起注意的内容}}</span>
|
<span leaf="">{{最需要引起注意的内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -341,11 +341,11 @@
|
|||||||
> 极浅灰底 + 顶部深炭细线 + 多行内容,适合提示内容较多时。
|
> 极浅灰底 + 顶部深炭细线 + 多行内容,适合提示内容较多时。
|
||||||
|
|
||||||
```html
|
```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;">
|
<p style="font-size:11px;color:#A1A1AA;margin:0 0 10px;letter-spacing:2px;font-weight:500;">
|
||||||
<span leaf="">NOTE</span>
|
<span leaf="">NOTE</span>
|
||||||
</p>
|
</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>
|
<span leaf="">{{较多的提示内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -363,9 +363,9 @@
|
|||||||
<section style="margin-bottom:22px;">
|
<section style="margin-bottom:22px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
<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="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>
|
</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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -379,7 +379,7 @@
|
|||||||
<section style="margin-bottom:22px;">
|
<section style="margin-bottom:22px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
<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="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>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -389,8 +389,8 @@
|
|||||||
### 10c. tool-card(工具 / 条目说明卡,极简线框版)
|
### 10c. tool-card(工具 / 条目说明卡,极简线框版)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="border:1px solid #E4E4E7;padding:16px 20px;margin:0 10px 24px;">
|
<section style="border:1px solid #E4E4E7;padding:16px 14px;margin:0 4px 24px;">
|
||||||
<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;">
|
||||||
{{条目说明内容}}
|
{{条目说明内容}}
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -405,16 +405,16 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-bottom:24px;">
|
<section style="margin-bottom:24px;">
|
||||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
<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>
|
<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:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
<p style="font-size:16px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
<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>
|
<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:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
<p style="font-size:16px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
<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>
|
<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:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
<p style="font-size:16px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -424,9 +424,9 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-bottom:14px;">
|
<section style="margin-bottom:14px;">
|
||||||
<p style="margin:0 0 6px;">
|
<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>
|
||||||
<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>
|
<span leaf="">{{要点说明}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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 style="width:2px;background:#E4E4E7;flex:1;margin-top:4px;min-height:44px;"><span leaf=""><br></span></section>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;padding-bottom:12px;">
|
<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="margin:0 0 6px;font-size:16px;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="font-size:16px;margin:0;color:#52525B;line-height:1.8;text-align:justify;">{{节点内容}}</p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -456,13 +456,13 @@
|
|||||||
### 两列数据卡(极简线框版)
|
### 两列数据卡(极简线框版)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="display:flex;margin:0 10px 28px;">
|
<section style="display:flex;margin:0 4px 28px;">
|
||||||
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 16px;margin-right:8px;text-align:center;">
|
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 12px;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>
|
<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>
|
<p style="font-size:11px;color:#A1A1AA;margin:0;letter-spacing:1px;"><span leaf="">{{说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 16px;text-align:center;">
|
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 12px;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>
|
<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>
|
<p style="font-size:11px;color:#A1A1AA;margin:0;letter-spacing:1px;"><span leaf="">{{说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -471,21 +471,21 @@
|
|||||||
### 三列要点卡(顶部细线版)
|
### 三列要点卡(顶部细线版)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="display:flex;margin:0 10px 28px;">
|
<section style="display:flex;margin:0 4px 28px;">
|
||||||
<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="">01</span></p>
|
<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:14px;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:13px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||||
</section>
|
</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: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:14px;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:13px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||||
</section>
|
</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: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:14px;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:13px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -493,8 +493,8 @@
|
|||||||
### 表格(真实数据表用)
|
### 表格(真实数据表用)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin:0 10px 24px;overflow-x:auto;">
|
<section style="margin:0 4px 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>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="background:#27272A;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
<th style="background:#27272A;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
||||||
@@ -544,7 +544,7 @@
|
|||||||
> 极简线框图片容器,无圆角、无阴影,1px 细线边框延续几何极简语言。
|
> 极简线框图片容器,无圆角、无阴影,1px 细线边框延续几何极简语言。
|
||||||
|
|
||||||
```html
|
```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;">
|
<section style="margin:0;overflow:hidden;">
|
||||||
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||||
</section>
|
</section>
|
||||||
@@ -554,7 +554,7 @@
|
|||||||
带说明文字时,图片容器 `margin-bottom` 改 `8px`,其后加:
|
带说明文字时,图片容器 `margin-bottom` 改 `8px`,其后加:
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">— {{图片说明}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -568,7 +568,7 @@ GIF 动图角标改极简描边胶囊:边框与字色用石墨主色 `#52525B`
|
|||||||
> 纯几何,1px 细线 + 居中 "END" 字样,石墨灰,简洁收尾。
|
> 纯几何,1px 细线 + 居中 "END" 字样,石墨灰,简洁收尾。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding:0 10px;">
|
<section style="padding:0 8px;">
|
||||||
<section style="text-align:center;margin:0 0 36px;">
|
<section style="text-align:center;margin:0 0 36px;">
|
||||||
<section style="display:flex;align-items:center;justify-content:center;">
|
<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>
|
<span style="height:1px;width:48px;background:#E4E4E7;margin-right:16px;"><span leaf=""><br></span></span>
|
||||||
@@ -586,12 +586,12 @@ GIF 动图角标改极简描边胶囊:边框与字色用石墨主色 `#52525B`
|
|||||||
> 固定签名文案以正文段落形式呈现;有个人名片 / 引导图素材才放图,无素材整块删。
|
> 固定签名文案以正文段落形式呈现;有个人名片 / 引导图素材才放图,无素材整块删。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding:0 10px 24px;">
|
<section style="padding:0 8px 24px;">
|
||||||
<section style="border-top:1px solid #E4E4E7;padding-top:28px;">
|
<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>
|
<span leaf="">我是 {{作者名}},{{一句话简介,如:热衷于分享 AI 观察与干货}}。</span>
|
||||||
</p>
|
</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>
|
<span leaf="">如果你觉得今天这篇有收获,欢迎</span>
|
||||||
<strong style="color:#27272A;"><span leaf="">点赞、在看、转发</span></strong>
|
<strong style="color:#27272A;"><span leaf="">点赞、在看、转发</span></strong>
|
||||||
<span leaf="">三连,我们下篇见。</span>
|
<span leaf="">三连,我们下篇见。</span>
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
| 留白禅意风 | `#4A5D52` 墨绿 | 禅意冥想、极简生活、深度随笔、艺术留白(呼吸感最强) | `references/theme-zen-whitespace.md` | `border-bottom:1.5px solid #B5C8BC;font-weight:500;` |
|
| 留白禅意风 | `#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;` |
|
| 摸鱼票据风 | `#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;` |
|
| 橄榄手记 | `#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>` 占位**,否则微信会剥掉样式
|
> - 所有"装饰性空元素"(圆点、渐变分割线、装饰短横、时间线竖线)**必须在内部放 `<span leaf=""><br></span>` 占位**,否则微信会剥掉样式
|
||||||
> - **不要把 `font-size`/`border-bottom` 打在 `<strong>` 上**,也不要在同一个 `<p>` 里混多个不同 `font-size`——微信编辑器会自动"纠正"导致样式被重写。正确做法:拆成多个 `<p>`,每个 `<p>` 只有一个字号;高亮样式统一挂在外层 `<span>` 上
|
> - **不要把 `font-size`/`border-bottom` 打在 `<strong>` 上**,也不要在同一个 `<p>` 里混多个不同 `font-size`——微信编辑器会自动"纠正"导致样式被重写。正确做法:拆成多个 `<p>`,每个 `<p>` 只有一个字号;高亮样式统一挂在外层 `<span>` 上
|
||||||
> - 不用 `position:absolute` 做划线/高亮,删除线用 `text-decoration:line-through`
|
> - 不用 `position:absolute` 做划线/高亮,删除线用 `text-decoration:line-through`
|
||||||
> - 结构化区域(如封面右侧图片槽位)没有内容时**整块删掉**,不留空 section
|
> - 结构化区域(如作者头像、图片说明)没有内容时**整块删掉**,不留空 section
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -39,12 +39,12 @@
|
|||||||
浅边框: #E5E7EB
|
浅边框: #E5E7EB
|
||||||
浅灰背景: #F3F4F6
|
浅灰背景: #F3F4F6
|
||||||
极浅灰: #F9FAFB
|
极浅灰: #F9FAFB
|
||||||
正文字号: 14px(不可改)
|
正文字号: 15px(不可改)
|
||||||
正文行高: 1.9
|
正文行高: 1.9
|
||||||
全局行高: 1.75
|
全局行高: 1.75
|
||||||
字间距: 0.5px
|
字间距: 0.5px
|
||||||
最大宽度: 677px
|
最大宽度: 677px
|
||||||
内容区边距: 0 20px(模块左右各 20px)
|
内容区边距: 0 12px(卡片通栏为主,卡片侧边 12px,封面卡外边距 8px)
|
||||||
```
|
```
|
||||||
|
|
||||||
字体栈:`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
字体栈:`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||||||
@@ -63,93 +63,35 @@
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 组件 2 封面 cover-breaking(杂志快讯封面)
|
## 组件 2 封面 cover-breaking(快讯导语条)
|
||||||
|
|
||||||
> **文案策略(先读,比代码重要)**:
|
> **文案策略(先读,比代码重要)**:
|
||||||
> - 封面标题和公众号外标题是**两层标题**,必须视角错开——外标题卖"为什么点开",封面卖"里面讲什么"
|
> - 公众号后台已承担标题、封面图、账号名,开篇不再重复——本组件**不放大字主标题、不放头图**;开篇导语和外标题是**两层**,视角错开——外标题卖"为什么点开",导语卖"里面讲什么、读完得到什么"
|
||||||
> - 已知外标题时,主标题**禁止原样复述**其核心关键词(产品名/功能名/场景词);未知外标题时从五个视角(**数字反差 / 角色革命 / 案例串 / 方法论 / 情绪钩子**)自选一个直出,不停下来问
|
> - 已知外标题时,导语**禁止原样复述**其核心关键词(产品名/功能名/场景词);未知外标题时从五个视角(**数字反差 / 角色革命 / 案例串 / 方法论 / 情绪钩子**)自选一个直出,不停下来问
|
||||||
> - 产品名/功能名只允许出现在**底部品牌条**或**副标题关键词条**,不出现在大字主标题
|
> - 认知翻转签名保留:划线旧认知在上,导语一句话给出新认知
|
||||||
|
> - 产品名/功能名只允许出现在**底部品牌条**
|
||||||
> - 仅当用户要求"帮我定封面方向"时才列 3-5 个方向让用户选
|
> - 仅当用户要求"帮我定封面方向"时才列 3-5 个方向让用户选
|
||||||
|
|
||||||
**有右侧图片版**:
|
|
||||||
|
|
||||||
```html
|
```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="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="padding:20px 12px 18px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:28px;">
|
<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="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>
|
<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>
|
<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>
|
<span style="font-size:10px;color:#D1D5DB;font-weight:600;"><span leaf="">{{日期}}</span></span>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;align-items:center;gap:20px;">
|
<p style="font-size:16px;color:#D1D5DB;margin:0 0 10px;text-decoration:line-through;letter-spacing:0.5px;">
|
||||||
<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;">
|
|
||||||
<span leaf="">{{划线旧认知}}</span>
|
<span leaf="">{{划线旧认知}}</span>
|
||||||
</p>
|
</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;">
|
<section style="width:48px;height:3px;background:linear-gradient(to right,#059669,#34D399);border-radius:2px;margin-bottom:12px;">
|
||||||
<span leaf=""><br></span>
|
<span leaf=""><br></span></section>
|
||||||
</section>
|
<p style="font-size:14px;color:#6B7280;margin:0;line-height:1.8;letter-spacing:0.5px;">
|
||||||
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.7;letter-spacing:0.5px;">
|
<span leaf="">{{开篇导语}}</span>
|
||||||
<span leaf="">{{副标题关键词}}</span>
|
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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 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;">
|
||||||
</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;">
|
|
||||||
<span leaf="">{{底部左侧文字}}</span>
|
<span leaf="">{{底部左侧文字}}</span>
|
||||||
</p>
|
</p>
|
||||||
<section style="display:flex;gap:4px;">
|
<section style="display:flex;gap:4px;">
|
||||||
@@ -164,10 +106,8 @@
|
|||||||
- `{{顶部标签}}` → 如 `TUTORIAL · 品牌实战`、`AI VIDEO · 实战案例`、`BREAKING`(建议 10-15 字符以内)
|
- `{{顶部标签}}` → 如 `TUTORIAL · 品牌实战`、`AI VIDEO · 实战案例`、`BREAKING`(建议 10-15 字符以内)
|
||||||
- `{{日期}}` → 如 `2026.07`
|
- `{{日期}}` → 如 `2026.07`
|
||||||
- `{{划线旧认知}}` → 被颠覆的旧观念(例:`MV要专业团队?`)
|
- `{{划线旧认知}}` → 被颠覆的旧观念(例:`MV要专业团队?`)
|
||||||
- `{{主标题行1}}` → 标题前半段(黑色);`{{绿色高亮词}}` → 标题中的绿色强调词;`{{主标题行2}}` → 标题第二行(全绿色)
|
- `{{开篇导语}}` → 一句话给出新认知/本篇看点,与外标题错开视角
|
||||||
- `{{副标题关键词}}` → 简短关键词,用 `·` 分隔
|
|
||||||
- `{{底部左侧文字}}` → 产品/品牌名;`{{标签1/2}}` → 底部小标签
|
- `{{底部左侧文字}}` → 产品/品牌名;`{{标签1/2}}` → 底部小标签
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 组件 3 目录 toc-scroll(横向滚动目录)
|
## 组件 3 目录 toc-scroll(横向滚动目录)
|
||||||
@@ -175,7 +115,7 @@
|
|||||||
2 个及以上章节时生成。第一个卡片绿色高亮,最后一个固定为"写在最后"(PART ///)。
|
2 个及以上章节时生成。第一个卡片绿色高亮,最后一个固定为"写在最后"(PART ///)。
|
||||||
|
|
||||||
```html
|
```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;">
|
<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;">
|
<p style="font-size:10px;color:#9CA3AF;margin:0;text-transform:uppercase;letter-spacing:2px;font-weight:600;">
|
||||||
<span leaf="">📦 {{N}} Parts + Conclusion</span>
|
<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;">
|
<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>
|
<span leaf="">PART 01</span>
|
||||||
</p>
|
</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>
|
<span leaf="">{{章节名}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size:10px;color:rgba(255,255,255,0.7);margin:0;">
|
<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;">
|
<p style="font-size:9px;font-weight:700;color:#9CA3AF;letter-spacing:1px;margin:0 0 5px;">
|
||||||
<span leaf="">PART 02</span>
|
<span leaf="">PART 02</span>
|
||||||
</p>
|
</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>
|
<span leaf="">{{章节名}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
<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;">
|
<p style="font-size:9px;font-weight:700;color:#9CA3AF;letter-spacing:1px;margin:0 0 5px;">
|
||||||
<span leaf="">PART ///</span>
|
<span leaf="">PART ///</span>
|
||||||
</p>
|
</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>
|
<span leaf="">写在最后</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
<p style="font-size:10px;color:#9CA3AF;margin:0;">
|
||||||
@@ -232,10 +172,10 @@
|
|||||||
第一个章节用 `margin-top:16px`,后续章节用 `margin-top:48px`。最后一章编号用 `///`,PART 改为 `LAST`。
|
第一个章节用 `margin-top:16px`,后续章节用 `margin-top:48px`。最后一章编号用 `///`,PART 改为 `LAST`。
|
||||||
|
|
||||||
```html
|
```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="display:flex;align-items:center;gap:16px;margin-bottom:24px;">
|
||||||
<section style="text-align:center;flex-shrink:0;">
|
<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>
|
<span leaf="">{{01}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="margin:0;font-size:8px;font-weight:700;color:#D1D5DB;letter-spacing:2px;">
|
<p style="margin:0;font-size:8px;font-weight:700;color:#D1D5DB;letter-spacing:2px;">
|
||||||
@@ -244,7 +184,7 @@
|
|||||||
</section>
|
</section>
|
||||||
<span style="width:1px;height:36px;background:#E5E7EB;flex-shrink:0;"><span leaf=""><br></span></span>
|
<span style="width:1px;height:36px;background:#E5E7EB;flex-shrink:0;"><span leaf=""><br></span></span>
|
||||||
<section>
|
<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>
|
<span leaf="">{{中文标题}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="margin:0;font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1.5px;">
|
<p style="margin:0;font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1.5px;">
|
||||||
@@ -263,7 +203,7 @@
|
|||||||
## 组件 5 正文段落 paragraph
|
## 组件 5 正文段落 paragraph
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">{{正文内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -313,19 +253,19 @@
|
|||||||
### 6g. 代码标签(行内代码)
|
### 6g. 代码标签(行内代码)
|
||||||
|
|
||||||
```html
|
```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. 获取方式标签(黄色背景)
|
### 6h. 获取方式标签(黄色背景)
|
||||||
|
|
||||||
```html
|
```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. 删除线灰色(旧的/被淘汰的概念)
|
### 6i. 删除线灰色(旧的/被淘汰的概念)
|
||||||
|
|
||||||
```html
|
```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="margin-bottom:24px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
<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>
|
<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>
|
<span leaf="">{{步骤标题}}</span>
|
||||||
</h4>
|
</h4>
|
||||||
</section>
|
</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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -362,7 +302,7 @@
|
|||||||
<section style="margin-bottom:28px;">
|
<section style="margin-bottom:28px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
<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>
|
<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>
|
<span leaf="">{{案例标题}}</span>
|
||||||
</h4>
|
</h4>
|
||||||
</section>
|
</section>
|
||||||
@@ -376,7 +316,7 @@
|
|||||||
<section style="margin-bottom:28px;">
|
<section style="margin-bottom:28px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
<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>
|
<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>
|
<span leaf="">{{名称}}</span>
|
||||||
</h4>
|
</h4>
|
||||||
</section>
|
</section>
|
||||||
@@ -392,18 +332,18 @@
|
|||||||
### 8a. prompt-block(PROMPT 展示块)
|
### 8a. prompt-block(PROMPT 展示块)
|
||||||
|
|
||||||
```html
|
```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="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>
|
</p>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 8b. cmd-block(CMD 单行命令块)
|
### 8b. cmd-block(CMD 单行命令块)
|
||||||
|
|
||||||
```html
|
```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="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>
|
</p>
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -420,8 +360,8 @@
|
|||||||
所有引用、补充说明的**默认组件**(虚线框是本主题的风格特征,仅此组件与 9b 保留 dashed):
|
所有引用、补充说明的**默认组件**(虚线框是本主题的风格特征,仅此组件与 9b 保留 dashed):
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="background:#F9FAFB;border:1px dashed #D1D5DB;border-radius:8px;padding:12px 16px;margin-bottom:24px;text-align:justify;">
|
<section style="background:#F9FAFB;border:1px dashed #D1D5DB;border-radius:8px;padding:12px 12px;margin-bottom:24px;text-align:justify;">
|
||||||
<p style="font-size:13px;color:#374151;margin:0;line-height:1.6;">
|
<p style="font-size:14px;color:#374151;margin:0;line-height:1.6;">
|
||||||
{{引用内容,可嵌入绿色加粗等内联样式}}
|
{{引用内容,可嵌入绿色加粗等内联样式}}
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -434,9 +374,9 @@
|
|||||||
单行版(只有主金句):
|
单行版(只有主金句):
|
||||||
|
|
||||||
```html
|
```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;">
|
<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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -444,12 +384,12 @@
|
|||||||
带前缀引导语版(两段式):
|
带前缀引导语版(两段式):
|
||||||
|
|
||||||
```html
|
```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="font-size:12px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
<p style="font-size:13px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||||
<span leaf="">{{引导语}}</span>
|
<span leaf="">{{引导语}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="margin:0;line-height:1.6;">
|
<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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -457,11 +397,11 @@
|
|||||||
带下方补充说明版:
|
带下方补充说明版:
|
||||||
|
|
||||||
```html
|
```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;">
|
<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>
|
||||||
<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>
|
<span leaf="">{{补充说明}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -470,7 +410,7 @@
|
|||||||
### 9c. subtitle-highlight(小节黄色下划线标题)
|
### 9c. subtitle-highlight(小节黄色下划线标题)
|
||||||
|
|
||||||
```html
|
```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>
|
<span style="background:linear-gradient(180deg,transparent 65%,#FDE68A 65%);padding:0 4px;"><span leaf="">{{小节标题}}</span></span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -480,7 +420,7 @@
|
|||||||
### 9d. center-divider(居中金句分隔)
|
### 9d. center-divider(居中金句分隔)
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">{{居中金句}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -493,10 +433,10 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
<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>
|
<span style="color:rgb(255,76,0);"><span leaf="">!踩坑提示 🕳</span></span>
|
||||||
</p>
|
</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>
|
<span style="color:rgb(136,136,136);font-weight:bold;"><span leaf="">{{提示内容}}</span></span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -508,10 +448,10 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
<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>
|
<span style="color:#059669;"><span leaf="">✦ {{提示标题}}</span></span>
|
||||||
</p>
|
</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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -520,8 +460,8 @@
|
|||||||
### 10c. yellow-warning(黄色警告框)
|
### 10c. yellow-warning(黄色警告框)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:12px 16px;margin-bottom:20px;">
|
<section style="background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:12px 12px;margin-bottom:20px;">
|
||||||
<p style="font-size:13px;color:#92400E;margin:0;font-weight:700;">
|
<p style="font-size:14px;color:#92400E;margin:0;font-weight:700;">
|
||||||
<span leaf="">{{警告内容}}</span>
|
<span leaf="">{{警告内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -530,8 +470,8 @@
|
|||||||
### 10d. green-info(绿色信息框)
|
### 10d. green-info(绿色信息框)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="background:#F0FDF4;padding:12px 16px;border-radius:8px;border:1px solid #BBF7D0;margin-bottom:20px;">
|
<section style="background:#F0FDF4;padding:12px 12px;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;">
|
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;text-align:justify;">
|
||||||
{{信息内容}}
|
{{信息内容}}
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -548,7 +488,7 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-bottom:14px;">
|
<section style="margin-bottom:14px;">
|
||||||
<p style="margin:0 0 6px;">
|
<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>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -558,9 +498,9 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-bottom:14px;">
|
<section style="margin-bottom:14px;">
|
||||||
<p style="margin:0 0 6px;">
|
<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>
|
||||||
<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>
|
<span leaf="">{{描述内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -572,29 +512,29 @@
|
|||||||
<section style="background:#F9FAFB;padding:16px;border-radius:12px;border:1px solid #F3F4F6;margin-bottom:24px;">
|
<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="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;">
|
<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>
|
<span leaf="">{{步骤1标题}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
|
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
|
||||||
<span leaf="">{{步骤1描述}}</span>
|
<span leaf="">{{步骤1描述}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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>
|
<span leaf="">→</span>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
<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>
|
<span leaf="">{{步骤2标题}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||||
<span leaf="">{{步骤2描述}}</span>
|
<span leaf="">{{步骤2描述}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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>
|
<span leaf="">→</span>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #A7F3D0;border-radius:8px;">
|
<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>
|
<span leaf="">{{步骤3标题}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||||
@@ -602,7 +542,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</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>
|
<span leaf="">{{底部说明文字}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -616,7 +556,7 @@
|
|||||||
<section style="background:#F9FAFB;padding:16px;border-radius:12px;border:1px solid #F3F4F6;margin-bottom:28px;">
|
<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="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;">
|
<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>
|
<span leaf="">{{卡片1标题}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
|
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
|
||||||
@@ -624,7 +564,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
<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>
|
<span leaf="">{{卡片2标题}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
||||||
@@ -632,7 +572,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
|
<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>
|
<span leaf="">{{卡片3标题}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
|
<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="flex:1;padding-bottom:12px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
|
<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>
|
<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>
|
<span leaf="">{{标题}}</span>
|
||||||
</h4>
|
</h4>
|
||||||
</section>
|
</section>
|
||||||
<p style="font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1px;margin:0 0 12px;">
|
<p style="font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1px;margin:0 0 12px;">
|
||||||
<span leaf="">{{英文副标题}}</span>
|
<span leaf="">{{英文副标题}}</span>
|
||||||
</p>
|
</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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -679,8 +619,8 @@
|
|||||||
基本版:
|
基本版:
|
||||||
|
|
||||||
```html
|
```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;">
|
<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:13px;color:#374151;margin:0;line-height:1.8;">
|
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
|
||||||
{{说明内容}}
|
{{说明内容}}
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -689,12 +629,12 @@
|
|||||||
居中高亮版(同 oneliner-card 规则:拆多个 `<p>`,不要 `<strong>` 带 font-size/border-bottom):
|
居中高亮版(同 oneliner-card 规则:拆多个 `<p>`,不要 `<strong>` 带 font-size/border-bottom):
|
||||||
|
|
||||||
```html
|
```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;">
|
<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:13px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
<p style="font-size:14px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
|
||||||
<span leaf="">{{小字}}</span>
|
<span leaf="">{{小字}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="margin:0;line-height:1.6;">
|
<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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -705,7 +645,7 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-bottom:24px;overflow-x:auto;">
|
<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>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="background:#059669;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题1}}</span></th>
|
<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="margin-bottom:24px;">
|
||||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
<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>
|
<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>
|
<span leaf="">{{列表项内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
<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>
|
<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>
|
<span leaf="">{{列表项内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
<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>
|
<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>
|
<span leaf="">{{列表项内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -793,8 +733,8 @@
|
|||||||
固定文案照写;SVG 图标微信支持,原样保留。
|
固定文案照写;SVG 图标微信支持,原样保留。
|
||||||
|
|
||||||
```html
|
```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;">
|
<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:13px;font-weight:bold;color:#111827;margin-bottom:20px;line-height:1.6;">
|
<p style="font-size:14px;font-weight:bold;color:#111827;margin-bottom:20px;line-height:1.6;">
|
||||||
<span leaf="">既然看到这里了,如果觉得有用,随手点个赞、在看、转发三连吧。</span>
|
<span leaf="">既然看到这里了,如果觉得有用,随手点个赞、在看、转发三连吧。</span>
|
||||||
</p>
|
</p>
|
||||||
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
|
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
|
||||||
@@ -842,7 +782,7 @@
|
|||||||
```html
|
```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;">
|
<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+ 章节时生成,紧跟封面之下) -->
|
<!-- 2. 目录(组件3 toc-scroll,2+ 章节时生成,紧跟封面之下) -->
|
||||||
|
|
||||||
@@ -905,7 +845,7 @@
|
|||||||
|
|
||||||
| Markdown 元素 | 对应组件 | 说明 |
|
| Markdown 元素 | 对应组件 | 说明 |
|
||||||
|---|---|---|
|
|---|---|---|
|
||||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置;封面主标题从中提炼(视角错开) |
|
| `# 标题` | 不使用 | 公众号文章标题在平台设置;开篇导语(组件 2)从中提炼一句(视角错开,不复述关键词) |
|
||||||
| 文章开头 `> 引言` | 组件 9b oneliner-card 或并入封面副标题 | 开头金句 |
|
| 文章开头 `> 引言` | 组件 9b oneliner-card 或并入封面副标题 | 开头金句 |
|
||||||
| `## 章节标题` | 组件 4 chapter-title | PART 01/02/03…,末章 /// + LAST |
|
| `## 章节标题` | 组件 4 chapter-title | PART 01/02/03…,末章 /// + LAST |
|
||||||
| `### 子标题` | 组件 9c subtitle-highlight | 黄色下划线小节标题 |
|
| `### 子标题` | 组件 9c subtitle-highlight | 黄色下划线小节标题 |
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
>
|
>
|
||||||
> **WeChat 兼容铁律**(本主题组件全部已按此写好,改动时必须遵守):
|
> **WeChat 兼容铁律**(本主题组件全部已按此写好,改动时必须遵守):
|
||||||
> - 所有"装饰性空元素"(撕票虚线、头像占位框)**没有真实内容时整块删掉**,不留空 section
|
> - 所有"装饰性空元素"(撕票虚线、头像占位框)**没有真实内容时整块删掉**,不留空 section
|
||||||
> - 正文字号固定 `14px`、行高 `1.9`——这是本主题的排版铁律,不与其它主题共用字号
|
> - 正文字号固定 `15px`、行高 `1.9`——这是本主题的排版铁律,不与其它主题共用字号
|
||||||
> - 不要把 `font-size`/`border-bottom` 打在 `<strong>` 上,高亮样式统一挂在外层 `<span>` 上
|
> - 不要把 `font-size`/`border-bottom` 打在 `<strong>` 上,高亮样式统一挂在外层 `<span>` 上
|
||||||
> - `writing-mode:vertical-rl`(票据侧边竖排字)在个别老旧客户端可能渲染异常,如遇异常可退化为横排小字,不影响其余结构
|
> - `writing-mode:vertical-rl`(票据侧边竖排字)在个别老旧客户端可能渲染异常,如遇异常可退化为横排小字,不影响其余结构
|
||||||
|
|
||||||
@@ -30,12 +30,12 @@
|
|||||||
代码背景: #F3F4F6
|
代码背景: #F3F4F6
|
||||||
代码字色: #1F2937
|
代码字色: #1F2937
|
||||||
品牌紫色(AI 品牌专用,如 Claude/Obsidian/Gemini):#7C3AED
|
品牌紫色(AI 品牌专用,如 Claude/Obsidian/Gemini):#7C3AED
|
||||||
正文字号: 14px(本主题铁律,不可改)
|
正文字号: 15px(本主题铁律,不可改)
|
||||||
正文行高: 1.9
|
正文行高: 1.9
|
||||||
全局行高: 1.75
|
全局行高: 1.75
|
||||||
字间距: 0.5px
|
字间距: 0.5px
|
||||||
最大宽度: 677px
|
最大宽度: 677px
|
||||||
内容区边距: 0 20px(正文区块左右各 20px)
|
内容区边距: 0 10px(正文区块左右各 10px)
|
||||||
章节间距: margin-bottom: 32px
|
章节间距: margin-bottom: 32px
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -57,12 +57,13 @@
|
|||||||
|
|
||||||
## 组件 2 票据封面 ticket-cover
|
## 组件 2 票据封面 ticket-cover
|
||||||
|
|
||||||
**用途**:文章开头,适合测评/对比/创意类文章。星级评分 + 编号 + 竖排小字,营造"一张门票/凭证"的仪式感。
|
**用途**:文章开头,适合测评/对比/创意类文章。星级评分 + 编号 + 竖排小字,营造"一张门票/凭证"的仪式感。开篇轻量形态:不放大字主标题、不放头图,导语职能由副标题 + 简介段落承担。
|
||||||
|
|
||||||
|
> **文案策略(先读,比代码重要)**:公众号后台已承担标题、封面图、账号名,开篇不再重复。副标题与简介段落合起来是开篇导语,和外标题**两层错开**——外标题卖"为什么点开",导语卖"里面讲什么";已知外标题时**禁止原样复述**其核心关键词。
|
||||||
|
|
||||||
**可替换字段**:
|
**可替换字段**:
|
||||||
- `{{头部标签}}` → 如 `AI DESIGN TOOLS`
|
- `{{头部标签}}` → 如 `AI DESIGN TOOLS`
|
||||||
- `{{大标题}}` → 如 `STITCH vs PENCIL`
|
- `{{副标题}}` → 开篇导语上半句,如 `两款免费 AI 设计工具深度对比`
|
||||||
- `{{副标题}}` → 如 `两款免费 AI 设计工具深度对比`
|
|
||||||
- `{{作者名}}` / `{{作者身份}}`
|
- `{{作者名}}` / `{{作者身份}}`
|
||||||
- `{{简介段落}}` → 支持内嵌组件 6 的行内强调样式
|
- `{{简介段落}}` → 支持内嵌组件 6 的行内强调样式
|
||||||
- `{{#标签1/2/3}}`
|
- `{{#标签1/2/3}}`
|
||||||
@@ -72,24 +73,23 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;margin-bottom:32px;">
|
<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:4px;font-weight:600;"><span leaf="">{{头部标签}}</span></section>
|
||||||
<section style="color:#fffef8;font-size:11px;letter-spacing:2px;"><span leaf="">★★★★★</span></section>
|
<section style="color:#fffef8;font-size:11px;letter-spacing:2px;"><span leaf="">★★★★★</span></section>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;">
|
<section style="display:flex;">
|
||||||
<section style="flex:1;padding:24px 20px;border-right:2px dashed #A7F3D0;">
|
<section style="flex:1;padding:18px 12px;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:15px;color:#1a1a1a;letter-spacing:1px;margin-bottom:20px;font-weight:700;"><span leaf="">{{副标题}}</span></section>
|
||||||
<section style="font-size:14px;color:#666;letter-spacing:1px;margin-bottom:20px;"><span leaf="">{{副标题}}</span></section>
|
|
||||||
<section style="border-top:1px dashed #A7F3D0;margin-bottom:16px;"><span leaf=""><br></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;">
|
<section style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
|
||||||
<!-- 有作者头像图时插入 <img> 到下面这个圆框里;无头像时整块删除该 section -->
|
<!-- 有作者头像图时插入 <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 style="width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid #059669;flex-shrink:0;"><span leaf=""><br></span></section>
|
||||||
<section>
|
<section>
|
||||||
<section style="font-size:15px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
|
<section style="font-size:16px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
|
||||||
<section style="font-size:12px;color:#888;"><span leaf="">{{作者身份}}</span></section>
|
<section style="font-size:13px;color:#888;"><span leaf="">{{作者身份}}</span></section>
|
||||||
</section>
|
</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>
|
<span leaf="">{{简介段落}}</span>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;gap:8px;margin-top:16px;">
|
<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="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="text-align:center;">
|
||||||
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">NO.</span></section>
|
<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>
|
||||||
<section style="writing-mode:vertical-rl;font-size:9px;color:#888;letter-spacing:2px;"><span leaf="">{{竖排文字}}</span></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="text-align:center;">
|
||||||
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">GRADE</span></section>
|
<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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -115,7 +115,7 @@
|
|||||||
<section style="padding:0 8px;font-size:10px;color:#A7F3D0;"><span leaf="">✂</span></section>
|
<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 style="flex:1;border-top:2px dashed #A7F3D0;"><span leaf=""><br></span></section>
|
||||||
</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="">VALID FOR ONE READ</span></section>
|
||||||
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">ADMIT ONE 🎫</span></section>
|
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">ADMIT ONE 🎫</span></section>
|
||||||
</section>
|
</section>
|
||||||
@@ -131,11 +131,11 @@
|
|||||||
**可替换字段**:`{{编号}}` `{{标题}}` `{{副标题}}`
|
**可替换字段**:`{{编号}}` `{{标题}}` `{{副标题}}`
|
||||||
|
|
||||||
```html
|
```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="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="background:#059669;color:#fff;font-size:13px;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:19px;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="font-size:13px;color:#888;"><span leaf="">/ {{副标题}}</span></section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 本章节正文内容放在这里 -->
|
<!-- 本章节正文内容放在这里 -->
|
||||||
@@ -152,10 +152,10 @@
|
|||||||
**可替换字段**:`{{小节标题}}`
|
**可替换字段**:`{{小节标题}}`
|
||||||
|
|
||||||
```html
|
```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="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="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>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -169,8 +169,8 @@
|
|||||||
**可替换字段**:`{{正文内容}}`
|
**可替换字段**:`{{正文内容}}`
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-bottom:32px;padding:0 20px;">
|
<section style="margin-bottom:32px;padding:0 10px;">
|
||||||
<p style="font-size:14px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
|
<p style="font-size:15px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
|
||||||
<span leaf="">{{正文内容}}</span>
|
<span leaf="">{{正文内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -203,7 +203,7 @@
|
|||||||
### 6d. 代码标签 —— 技术名词/模型名/命令
|
### 6d. 代码标签 —— 技术名词/模型名/命令
|
||||||
|
|
||||||
```html
|
```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 品牌名专用
|
### 6e. 品牌紫色 —— Claude / Obsidian / Gemini 等 AI 品牌名专用
|
||||||
@@ -223,8 +223,8 @@
|
|||||||
**可替换字段**:`{{case编号}}` `{{案例名称}}`
|
**可替换字段**:`{{case编号}}` `{{案例名称}}`
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-bottom:32px;padding:0 20px;">
|
<section style="margin-bottom:32px;padding:0 10px;">
|
||||||
<p style="font-size:13px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
|
<p style="font-size:14px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
|
||||||
<span leaf="">case{{case编号}}: {{案例名称}}</span>
|
<span leaf="">case{{case编号}}: {{案例名称}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -237,7 +237,7 @@
|
|||||||
**用途**:包裹图片,票据纸感边框(米黄底 + 细灰边)。**规则**:`<img>` 标签及其 `src`/`data-src` 原封不动复制,只套外层容器。
|
**用途**:包裹图片,票据纸感边框(米黄底 + 细灰边)。**规则**:`<img>` 标签及其 `src`/`data-src` 原封不动复制,只套外层容器。
|
||||||
|
|
||||||
```html
|
```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;">
|
<section style="background:#fffef8;border:1px solid #eee;padding:6px;margin-bottom:0;">
|
||||||
<figure style="margin:0;">
|
<figure style="margin:0;">
|
||||||
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||||
@@ -255,9 +255,9 @@
|
|||||||
**可替换字段**:`{{前缀}}` `{{结论内容}}`
|
**可替换字段**:`{{前缀}}` `{{结论内容}}`
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-bottom:32px;padding:0 20px;">
|
<section style="margin-bottom:32px;padding:0 10px;">
|
||||||
<section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 16px;margin-bottom:0;">
|
<section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 12px;margin-bottom:0;">
|
||||||
<p style="font-size:14px;color:#1a1a1a;font-weight:600;line-height:1.7;margin:0;">
|
<p style="font-size:15px;color:#1a1a1a;font-weight:600;line-height:1.7;margin:0;">
|
||||||
<span leaf="">{{前缀}}</span>
|
<span leaf="">{{前缀}}</span>
|
||||||
<span style="color:#059669;"><span leaf="">{{结论内容}}</span></span>
|
<span style="color:#059669;"><span leaf="">{{结论内容}}</span></span>
|
||||||
</p>
|
</p>
|
||||||
@@ -274,11 +274,11 @@
|
|||||||
**可替换字段**:`{{序号}}` `{{小标题}}` `{{描述}}`
|
**可替换字段**:`{{序号}}` `{{小标题}}` `{{描述}}`
|
||||||
|
|
||||||
```html
|
```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="background:#fffef8;border:1px solid #eee;margin-bottom:12px;">
|
||||||
<section style="display:flex;align-items:stretch;">
|
<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="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 16px;font-size:13px;color:#555;line-height:1.7;border-left:1px dashed #A7F3D0;">
|
<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 style="font-weight:600;color:#1a1a1a;"><span leaf="">{{小标题}}</span></span>
|
||||||
<span leaf="">:{{描述}}</span>
|
<span leaf="">:{{描述}}</span>
|
||||||
</section>
|
</section>
|
||||||
@@ -298,21 +298,21 @@
|
|||||||
**可替换字段**:`{{金句前半}}` `{{大数字}}`(可选)`{{金句后半}}` `{{补充说明}}`
|
**可替换字段**:`{{金句前半}}` `{{大数字}}`(可选)`{{金句后半}}` `{{补充说明}}`
|
||||||
|
|
||||||
```html
|
```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;">
|
<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 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>
|
<span leaf="">{{金句后半}}</span>
|
||||||
</p>
|
</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>
|
<span leaf="">{{补充说明}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
|
|
||||||
无大数字时去掉中间那个 `font-size:24px` 的 `<span>`,整句金句合并放第一行 `<p>` 即可。
|
无大数字时去掉中间那个 `font-size:25px` 的 `<span>`,整句金句合并放第一行 `<p>` 即可。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -323,7 +323,7 @@
|
|||||||
**可替换字段**:`{{#标签}}`
|
**可替换字段**:`{{#标签}}`
|
||||||
|
|
||||||
```html
|
```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="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="">{{#标签1}}</span></section>
|
||||||
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签2}}</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
|
```html
|
||||||
<section style="padding:0 0 32px;">
|
<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;">
|
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:22px 14px;text-align:center;">
|
||||||
<p style="font-size:13px;font-weight:700;color:#1a1a1a;margin:0 0 20px;line-height:1.6;">
|
<p style="font-size:14px;font-weight:700;color:#1a1a1a;margin:0 0 20px;line-height:1.6;">
|
||||||
<span leaf="">{{互动文案}}</span>
|
<span leaf="">{{互动文案}}</span>
|
||||||
</p>
|
</p>
|
||||||
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
|
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
|
||||||
@@ -384,7 +384,7 @@
|
|||||||
**用途**:文章最末尾收尾,放在外层容器(组件 1)内最后,footer-cta 之后。
|
**用途**:文章最末尾收尾,放在外层容器(组件 1)内最后,footer-cta 之后。
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">/</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -477,7 +477,7 @@
|
|||||||
|
|
||||||
| Markdown 元素 | 对应组件 | 说明 |
|
| Markdown 元素 | 对应组件 | 说明 |
|
||||||
|---|---|---|
|
|---|---|---|
|
||||||
| `# 标题` | 不使用 | 公众号文章标题在平台设置;票据封面大标题从中提炼 |
|
| `# 标题` | 不使用 | 公众号文章标题在平台设置;开篇导语(副标题+简介段落)从中提炼,视角错开 |
|
||||||
| 文章开头 `> 引言` | 并入封面简介段落 | 票据封面无独立引言卡组件 |
|
| 文章开头 `> 引言` | 并入封面简介段落 | 票据封面无独立引言卡组件 |
|
||||||
| `## 章节标题` | 组件 3 chapter-title | 编号 01/02/03… |
|
| `## 章节标题` | 组件 3 chapter-title | 编号 01/02/03… |
|
||||||
| `### 子标题` | 组件 4 subtitle | 左竖条小标题 |
|
| `### 子标题` | 组件 4 subtitle | 左竖条小标题 |
|
||||||
|
|||||||
@@ -30,26 +30,26 @@
|
|||||||
标签浅底: #e5e7e0
|
标签浅底: #e5e7e0
|
||||||
强调橙(关键词下划线/前导词/CTA): #ed7b2f
|
强调橙(关键词下划线/前导词/CTA): #ed7b2f
|
||||||
陶土棕装饰(进行中/次强调): #d4c9b8(配边框 #b17816)
|
陶土棕装饰(进行中/次强调): #d4c9b8(配边框 #b17816)
|
||||||
正文字号: 14px
|
正文字号: 15px
|
||||||
正文行高: 1.9
|
正文行高: 1.9
|
||||||
全局行高: 1.75
|
全局行高: 1.75
|
||||||
最大宽度: 677px
|
最大宽度: 677px
|
||||||
容器内边距: 8px
|
容器内边距: 8px
|
||||||
区块间距: margin-top: 24px(首块头图卡除外)
|
区块间距: margin-top: 24px(首块头图卡除外)
|
||||||
圆角: 6px(统一小圆角,不用大圆角)
|
圆角: 6px(统一小圆角,不用大圆角)
|
||||||
阴影: 整体几乎无阴影,靠边框 + 色块分层,仅头图卡的插画占位区可有极轻装饰
|
阴影: 整体几乎无阴影,靠边框 + 色块分层
|
||||||
```
|
```
|
||||||
|
|
||||||
字体栈:`'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
字体栈:`'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 全局容器
|
## 组件 1 全局容器
|
||||||
|
|
||||||
```html
|
```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 -->
|
<!-- 所有组件放在这里,第一个子元素是组件 2 头图卡,其余组件均自带 margin-top:24px -->
|
||||||
|
|
||||||
@@ -58,47 +58,31 @@
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 组件 2 头图卡 hero-card
|
## 组件 2 头图卡 hero-card(内刊导语条)
|
||||||
|
|
||||||
**用途**:文章开篇头图区,内刊风格:顶部标签+日期条,主标题+强调词,侧边配一枚手绘风占位插画,底部深色摘要条收尾。整篇文章唯一一处、放在最前面,不设 `margin-top`。
|
**用途**:文章开篇区,内刊风格:顶部标签+日期条,一句话开篇导语,底部深色摘要条收尾。整篇文章唯一一处、放在最前面,不设 `margin-top`。开篇轻量形态:不放大字主标题、不放头图(公众号后台已承担标题与封面图);原头图并入正文首个图位。
|
||||||
|
|
||||||
**可替换字段**:`{{内刊标签}}` `{{日期}}` `{{旧标题占位}}`(可选,删除线小字,无需要时整行删除)`{{主标题}}` `{{强调词}}` `{{副标题说明}}` `{{底部摘要}}` `{{标签1}}` `{{标签2}}`
|
> **文案策略(先读,比代码重要)**:开篇导语和外标题**两层错开**——外标题卖"为什么点开",导语卖"里面讲什么、读完得到什么";已知外标题时**禁止原样复述**其核心关键词,从文章第一段或核心论点提炼一句。
|
||||||
|
|
||||||
|
**可替换字段**:`{{内刊标签}}` `{{日期}}` `{{开篇导语}}` `{{底部摘要}}` `{{标签1}}` `{{标签2}}`
|
||||||
|
|
||||||
```html
|
```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="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="padding:20px 12px 18px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:22px;">
|
<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="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="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="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>
|
<span style="font-size:10px;color:#9ea096;font-weight:500;font-variant-numeric:tabular-nums;"><span leaf="">{{日期}}</span></span>
|
||||||
</section>
|
</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;">
|
<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: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>
|
<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>
|
</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>
|
||||||
<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;">
|
<section style="background:#1e1f23;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
|
||||||
<svg width="72" height="72" viewBox="0 0 64 64" aria-hidden="true" style="display:block;">
|
<p style="font-size:13px;color:rgba(255,255,255,0.92);margin:0;font-weight:600;"><span leaf="">{{底部摘要}}</span></p>
|
||||||
<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="display:flex;gap:6px;flex-wrap:wrap;">
|
<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="">{{标签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>
|
<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>
|
</section>
|
||||||
```
|
```
|
||||||
|
|
||||||
(`{{旧标题占位}}` 那一行没有真实"旧标题"内容时整行 `<p>` 删除,不留占位删除线空行。)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 组件 3 章节标题 section-title
|
## 组件 3 章节标题 section-title
|
||||||
@@ -122,12 +104,12 @@
|
|||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||||
<section style="display:flex;align-items:center;gap:14px;">
|
<section style="display:flex;align-items:center;gap:14px;">
|
||||||
<section style="text-align:center;flex-shrink:0;">
|
<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>
|
<p style="margin:0;font-size:8px;font-weight:700;color:#9ea096;letter-spacing:2px;"><span leaf="">PART</span></p>
|
||||||
</section>
|
</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>
|
<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>
|
<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>
|
<p style="margin:0;font-size:11px;font-weight:600;color:#65675e;letter-spacing:1.2px;"><span leaf="">{{副标题}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -145,7 +127,7 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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>
|
<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;">
|
<section style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||||
<span style="font-size:10px;color:#65675e;font-weight:700;"><span leaf="">{{版本号}}</span></span>
|
<span style="font-size:10px;color:#65675e;font-weight:700;"><span leaf="">{{版本号}}</span></span>
|
||||||
@@ -166,7 +148,7 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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="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;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>
|
<p style="margin:0;font-size:10px;color:rgba(255,255,255,0.68);"><span leaf="">{{说明文字}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
@@ -184,7 +166,7 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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;">
|
<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>
|
<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>
|
<section>
|
||||||
@@ -210,7 +192,7 @@
|
|||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||||
<section style="display:flex;align-items:center;gap:10px;">
|
<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="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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -227,7 +209,7 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<section style="margin-top:24px;">
|
||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<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>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -245,7 +227,7 @@
|
|||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<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;">
|
<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: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>
|
<span style="margin-left:auto;font-size:10px;color:#9ea096;font-variant-numeric:tabular-nums;"><span leaf="">{{进度}}</span></span>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -263,7 +245,7 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<section style="margin-top:24px;">
|
||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<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>
|
<span leaf="">{{正文内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -293,7 +275,7 @@
|
|||||||
**d. 行内代码标签** —— 技术名词/字段名/命令
|
**d. 行内代码标签** —— 技术名词/字段名/命令
|
||||||
|
|
||||||
```html
|
```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)配套,单独用时表示"已废弃/被替代的说法"
|
**e. 删除线旧词** —— 与"新旧对照段落"(组件 12)配套,单独用时表示"已废弃/被替代的说法"
|
||||||
@@ -313,8 +295,8 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<section style="margin-top:24px;">
|
||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||||
<p style="margin:0;font-size:14px;color:#4d4f46;line-height:1.9;">
|
<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:13px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span><span leaf=""> {{正文后半}}</span>
|
<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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -331,8 +313,8 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<section style="margin-top:24px;">
|
||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<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 style="font-size:14px;color:#9ea096;letter-spacing:0.3px;text-decoration:line-through;"><span leaf="">{{旧表述}}</span></span>
|
<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;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>
|
<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>
|
</p>
|
||||||
@@ -352,7 +334,7 @@
|
|||||||
<section style="margin-top:24px;">
|
<section style="margin-top:24px;">
|
||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<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;">
|
<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>
|
<section><span leaf="">{{列表项}}</span></section>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -371,12 +353,12 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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="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>
|
<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>
|
<span style="font-size:10px;color:rgba(255,255,255,0.65);"><span leaf="">{{批注小字}}</span></span>
|
||||||
</section>
|
</section>
|
||||||
<section style="padding:16px 18px 18px;background:#eeefe9;">
|
<section style="padding:16px 12px 18px;background:#eeefe9;">
|
||||||
<p style="margin:0;font-size:14px;line-height:1.9;color:#4d4f46;text-align:justify;"><span leaf="">{{编者按正文}}</span></p>
|
<p style="margin:0;font-size:15px;line-height:1.9;color:#4d4f46;text-align:justify;"><span leaf="">{{编者按正文}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -393,8 +375,8 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<section style="margin-top:24px;">
|
||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<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;">
|
<section style="background:#fdfdf8;border-radius:6px;padding:16px 12px;border:1px solid #bfc1b7;">
|
||||||
<p style="font-size:14px;color:#4d4f46;margin:0;line-height:1.8;text-align:justify;">
|
<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>
|
<strong style="color:#23251d;border-bottom:3px solid #ed7b2f;"><span leaf="">{{重点观点}}</span></strong><span leaf=""> {{补充说明}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -464,7 +446,7 @@
|
|||||||
<section style="border-radius:6px;overflow:hidden;border:1px solid #bfc1b7;display:block;">
|
<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>
|
<span leaf=""><img src="{{图片URL}}" alt="图片" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||||
</section>
|
</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>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -482,9 +464,9 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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;">
|
<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;">
|
<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>
|
</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="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="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;">
|
<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>
|
<p style="font-size:10px;color:rgba(255,255,255,0.75);margin:0;line-height:1.5;"><span leaf="">{{左侧说明}}</span></p>
|
||||||
</section>
|
</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;">
|
<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>
|
<p style="font-size:10px;color:#65675e;margin:0;line-height:1.5;"><span leaf="">{{右侧说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -528,19 +510,19 @@
|
|||||||
<section style="margin-top:24px;">
|
<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="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="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: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: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: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:12px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案B名}}</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>
|
||||||
<section style="display:flex;border-bottom:1px solid #bfc1b7;">
|
<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:35%;padding:10px 12px;font-size:14px;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:14px;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:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;">
|
<section style="display:flex;">
|
||||||
<section style="width:35%;padding:10px 12px;font-size:13px;color:#4d4f46;"><span leaf="">{{行标题}}</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:13px;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="">{{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:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -558,9 +540,9 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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: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="流程示意">
|
<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>
|
<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>
|
<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="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
||||||
<section style="margin-bottom:14px;">
|
<section style="margin-bottom:14px;">
|
||||||
<p style="margin:0 0 6px;">
|
<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 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>
|
</span>
|
||||||
</p>
|
</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>
|
</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;">
|
<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>
|
<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;">
|
<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>
|
||||||
<section style="padding:10px 0;border-top:1px solid #bfc1b7;border-bottom:1px solid #bfc1b7;">
|
<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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -654,14 +636,14 @@
|
|||||||
<section style="flex:1;padding-bottom:12px;">
|
<section style="flex:1;padding-bottom:12px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
|
<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>
|
<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>
|
</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: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;">
|
<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>
|
<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>
|
</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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -682,7 +664,7 @@
|
|||||||
<section style="margin-top:24px;">
|
<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="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;">
|
<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>
|
<span style="font-size:11px;color:#9ea096;"><span leaf="">{{分组说明}}</span></span>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;flex-wrap:wrap;gap:10px;">
|
<section style="display:flex;flex-wrap:wrap;gap:10px;">
|
||||||
@@ -706,8 +688,8 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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;">
|
<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:13px;font-weight:700;color:#23251d;line-height:1.6;margin:0 0 14px;"><span leaf="">{{文末互动引导}}</span></p>
|
<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="display:flex;justify-content:center;gap:18px;margin-bottom:14px;flex-wrap:wrap;">
|
||||||
<section style="text-align:center;color:#4d4f46;">
|
<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;">
|
<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;">
|
<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>
|
<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;">
|
<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:#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: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: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: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: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:12px;font-weight:700;color:#ffffff;"><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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -766,13 +748,13 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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="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 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>
|
||||||
<section style="width:34%;min-width:120px;padding:18px;background:#23251d;display:flex;flex-direction:column;justify-content:center;gap:10px;">
|
<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>
|
<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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -788,10 +770,10 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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="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 22px;">
|
<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 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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -810,8 +792,8 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-top:24px;">
|
<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="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;">
|
<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:13px;line-height:1.7;color:#23251d;font-weight:700;"><span leaf="">{{摘要文字}}</span></p>
|
<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>
|
<span style="font-size:10px;color:#65675e;font-weight:800;letter-spacing:2px;"><span leaf="">{{标签}}</span></span>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -831,7 +813,7 @@
|
|||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<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="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="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>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -850,19 +832,19 @@
|
|||||||
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
|
<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="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
|
||||||
<section style="text-align:center;flex-shrink:0;">
|
<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>
|
<p style="margin:0;font-size:8px;font-weight:700;color:#9ea096;letter-spacing:2px;"><span leaf="">END</span></p>
|
||||||
</section>
|
</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>
|
<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>
|
<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>
|
<p style="margin:0;font-size:11px;font-weight:600;color:#65675e;letter-spacing:1.2px;"><span leaf="">{{结尾说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</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:15px;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>
|
<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 18px;border:1px solid #bfc1b7;text-align:center;">
|
<section style="background:#eeefe9;border-radius:6px;padding:16px 12px;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="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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -879,7 +861,7 @@
|
|||||||
## 完整文章模板骨架
|
## 完整文章模板骨架
|
||||||
|
|
||||||
```html
|
```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) -->
|
<!-- 1. 头图卡(组件2 hero-card,唯一一处,不设 margin-top) -->
|
||||||
|
|
||||||
|
|||||||
@@ -30,11 +30,11 @@
|
|||||||
辅助文字色: #9CA3AF(中灰)
|
辅助文字色: #9CA3AF(中灰)
|
||||||
分割线色: #E5E7EB
|
分割线色: #E5E7EB
|
||||||
灰竖条: #D6D3D1(灰底引用左竖条)
|
灰竖条: #D6D3D1(灰底引用左竖条)
|
||||||
正文字号: 15px(不可改)
|
正文字号: 16px(不可改)
|
||||||
行高: 1.8
|
行高: 1.8
|
||||||
字间距: 0.5px
|
字间距: 0.5px
|
||||||
最大宽度: 677px
|
最大宽度: 677px
|
||||||
内容区边距: 0 10px(左右各 10px)
|
内容区边距: 0 4px(左右各 4px,卡片侧边 10~14px)
|
||||||
```
|
```
|
||||||
|
|
||||||
字体栈:`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
字体栈:`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||||||
@@ -62,17 +62,17 @@
|
|||||||
> - 红底白字标签仅在本卡片内使用(视觉焦点),正文中的关键词标签一律用浅红底深红字(组件 7b)
|
> - 红底白字标签仅在本卡片内使用(视觉焦点),正文中的关键词标签一律用浅红底深红字(组件 7b)
|
||||||
|
|
||||||
```html
|
```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;">
|
<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:42px;color:#DC2626;font-weight:900;margin:0;line-height:0.6;">
|
<p style="font-size:43px;color:#DC2626;font-weight:900;margin:0;line-height:0.6;">
|
||||||
<span leaf="">"</span>
|
<span leaf="">"</span>
|
||||||
</p>
|
</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 style="background:#DC2626;color:#FFFFFF;padding:2px 8px;border-radius:4px;"><span leaf="">{{高亮关键词}}</span></span>
|
||||||
<span leaf="">{{金句中段}}</span>
|
<span leaf="">{{金句中段}}</span>
|
||||||
<span style="background:#DC2626;color:#FFFFFF;padding:2px 8px;border-radius:4px;"><span leaf="">{{高亮关键词}}</span></span>
|
<span style="background:#DC2626;color:#FFFFFF;padding:2px 8px;border-radius:4px;"><span leaf="">{{高亮关键词}}</span></span>
|
||||||
<span leaf="">{{金句收尾}}</span>
|
<span leaf="">{{金句收尾}}</span>
|
||||||
</p>
|
</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>
|
<span leaf="">—— {{作者名,未知则删整行}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -85,22 +85,22 @@
|
|||||||
> 3 个及以上章节时生成。红底白字编号 + 深色标题;展示**精选 3 个核心看点**,不是全量章节列表。
|
> 3 个及以上章节时生成。红底白字编号 + 深色标题;展示**精选 3 个核心看点**,不是全量章节列表。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding:0 10px 32px;">
|
<section style="padding:0 8px 32px;">
|
||||||
<p style="font-size:14px;color:#9CA3AF;margin:0 0 14px;letter-spacing:1px;">
|
<p style="font-size:15px;color:#9CA3AF;margin:0 0 14px;letter-spacing:1px;">
|
||||||
<span leaf="">📌 本文看点</span>
|
<span leaf="">📌 本文看点</span>
|
||||||
</p>
|
</p>
|
||||||
<section style="display:flex;justify-content:space-between;">
|
<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;">
|
<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:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">01</span></p>
|
<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:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点一}}</span></p>
|
<p style="font-size:14px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点一}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
<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:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">02</span></p>
|
<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:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点二}}</span></p>
|
<p style="font-size:14px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点二}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;text-align:center;border:1px solid #FEE2E2;">
|
<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:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">03</span></p>
|
<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:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点三}}</span></p>
|
<p style="font-size:14px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点三}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -111,7 +111,7 @@
|
|||||||
## 组件 4 章节分割线(红色渐变)
|
## 组件 4 章节分割线(红色渐变)
|
||||||
|
|
||||||
```html
|
```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;">
|
<section style="height:1px;background:linear-gradient(to right,transparent,#FCA5A5,#DC2626,#FCA5A5,transparent);margin:0;">
|
||||||
<span leaf=""><br></span>
|
<span leaf=""><br></span>
|
||||||
</section>
|
</section>
|
||||||
@@ -125,15 +125,15 @@
|
|||||||
> 红色实底编号标签 + 英文小标签 + 中文大标题,底部红色实线。第一章 `margin-top:16px`,后续章节 `margin-top:48px`。
|
> 红色实底编号标签 + 英文小标签 + 中文大标题,底部红色实线。第一章 `margin-top:16px`,后续章节 `margin-top:48px`。
|
||||||
|
|
||||||
```html
|
```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;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:3px solid #DC2626;">
|
||||||
<section style="display:flex;align-items:center;">
|
<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>
|
<section>
|
||||||
<p style="font-size:10px;color:#DC2626;font-weight:700;letter-spacing:3px;margin:0 0 2px;text-transform:uppercase;">
|
<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>
|
<span leaf="">{{ENGLISH TAG}}</span>
|
||||||
</p>
|
</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>
|
<span leaf="">{{中文章节标题}}</span>
|
||||||
</h3>
|
</h3>
|
||||||
</section>
|
</section>
|
||||||
@@ -148,7 +148,7 @@
|
|||||||
**结语章节变体**(编号用 `∞` 替代数字,英文标签用 `THE END` / `EPILOGUE`):
|
**结语章节变体**(编号用 `∞` 替代数字,英文标签用 `THE END` / `EPILOGUE`):
|
||||||
|
|
||||||
```html
|
```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
|
```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 leaf="">{{正文内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -168,7 +168,7 @@
|
|||||||
**带关键词下划线标记的段落**(推荐默认):
|
**带关键词下划线标记的段落**(推荐默认):
|
||||||
|
|
||||||
```html
|
```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 leaf="">{{前半句}}</span>
|
||||||
<span style="border-bottom:2px solid #FECACA;font-weight:600;"><span leaf="">{{需要强调的关键短语}}</span></span>
|
<span style="border-bottom:2px solid #FECACA;font-weight:600;"><span leaf="">{{需要强调的关键短语}}</span></span>
|
||||||
<span leaf="">{{后半句}}</span>
|
<span leaf="">{{后半句}}</span>
|
||||||
@@ -184,7 +184,7 @@
|
|||||||
> `###` 子标题用红色左竖条 + 深色标题,**不套用组件 5 的编号章节样式**(编号章节只给 `##`)。
|
> `###` 子标题用红色左竖条 + 深色标题,**不套用组件 5 的编号章节样式**(编号章节只给 `##`)。
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">{{子标题}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -238,7 +238,7 @@
|
|||||||
### 7f. 行内代码
|
### 7f. 行内代码
|
||||||
|
|
||||||
```html
|
```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. 粉底左竖条金句引用(视觉焦点最强,核心金句)
|
### 8a. 粉底左竖条金句引用(视觉焦点最强,核心金句)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:18px 22px;margin-bottom:24px;">
|
<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: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>
|
<span leaf="">「{{核心观点或关键金句}}」</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -258,8 +258,8 @@
|
|||||||
### 8b. 浅红背景引用块(Prompt / 引用内容)
|
### 8b. 浅红背景引用块(Prompt / 引用内容)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="background:#FEF2F2;border-radius:10px;padding:18px 20px;margin-bottom:24px;border:1px solid #FECACA;">
|
<section style="background:#FEF2F2;border-radius:10px;padding:18px 14px;margin-bottom:24px;border:1px solid #FECACA;">
|
||||||
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
||||||
{{引用内容,可含 7d 下划线等内联样式}}
|
{{引用内容,可含 7d 下划线等内联样式}}
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -268,8 +268,8 @@
|
|||||||
### 8c. 灰色左竖条引用(轻量旁注、个人吐槽)
|
### 8c. 灰色左竖条引用(轻量旁注、个人吐槽)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="border-left:4px solid #D6D3D1;padding:14px 20px;margin-bottom:24px;background:#FAFAFA;border-radius:0 8px 8px 0;">
|
<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:14px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
|
||||||
<span leaf="">{{轻量旁注内容}}</span>
|
<span leaf="">{{轻量旁注内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -278,7 +278,7 @@
|
|||||||
### 8d. 居中金句分隔(章节间的过渡金句)
|
### 8d. 居中金句分隔(章节间的过渡金句)
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">{{居中金句}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -290,8 +290,8 @@
|
|||||||
### 9a. 红色提示条(重要提醒、核心结论)
|
### 9a. 红色提示条(重要提醒、核心结论)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="background:#FEF2F2;border-left:4px solid #DC2626;border-radius:0 8px 8px 0;padding:14px 20px;margin-bottom:24px;">
|
<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:14px;font-weight:700;color:#991B1B;margin:0;line-height:1.8;">
|
<p style="font-size:15px;font-weight:700;color:#991B1B;margin:0;line-height:1.8;">
|
||||||
<span leaf="">💡 {{重要提示或核心结论}}</span>
|
<span leaf="">💡 {{重要提示或核心结论}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -301,10 +301,10 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding:6px 0 4px;margin-bottom:16px;">
|
<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>
|
<span style="color:#DC2626;"><span leaf="">!踩坑提示 🕳</span></span>
|
||||||
</p>
|
</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>
|
<span leaf="">{{提示内容}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -322,9 +322,9 @@
|
|||||||
<section style="margin-bottom:22px;">
|
<section style="margin-bottom:22px;">
|
||||||
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
|
<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="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>
|
</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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -335,8 +335,8 @@
|
|||||||
### 10b. tool-card(工具/条目说明卡)
|
### 10b. tool-card(工具/条目说明卡)
|
||||||
|
|
||||||
```html
|
```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;">
|
<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:14px;color:#374151;margin:0;line-height:1.8;">
|
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;">
|
||||||
{{条目说明内容}}
|
{{条目说明内容}}
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -351,16 +351,16 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-bottom:24px;">
|
<section style="margin-bottom:24px;">
|
||||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
<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>
|
<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:15px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
<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>
|
<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:15px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
|
<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>
|
<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:15px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -370,9 +370,9 @@
|
|||||||
```html
|
```html
|
||||||
<section style="margin-bottom:14px;">
|
<section style="margin-bottom:14px;">
|
||||||
<p style="margin:0 0 6px;">
|
<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>
|
||||||
<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>
|
<span leaf="">{{要点说明}}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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 style="width:2px;background:#FEE2E2;flex:1;margin-top:4px;min-height:44px;"><span leaf=""><br></span></section>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;padding-bottom:12px;">
|
<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="margin:0 0 6px;font-size:16px;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="font-size:16px;margin:0;color:#374151;line-height:1.8;text-align:justify;">{{节点内容}}</p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -403,13 +403,13 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="display:flex;margin-bottom:24px;padding:0;">
|
<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;">
|
<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:28px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
|
<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:12px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
<p style="font-size:13px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 16px;text-align:center;border:1px solid #FEE2E2;">
|
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 12px;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:29px;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>
|
<p style="font-size:13px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -419,15 +419,15 @@
|
|||||||
```html
|
```html
|
||||||
<section style="display:flex;margin-bottom:24px;padding:0;">
|
<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;">
|
<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>
|
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
|
<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>
|
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;text-align:center;border:1px solid #FEE2E2;">
|
<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>
|
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -437,7 +437,7 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin-bottom:24px;overflow-x:auto;">
|
<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>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="background:#DC2626;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
<th style="background:#DC2626;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
|
||||||
@@ -465,13 +465,13 @@
|
|||||||
浅红底深红字(默认):
|
浅红底深红字(默认):
|
||||||
|
|
||||||
```html
|
```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
|
```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`,其后加:
|
带说明文字时,图片 `margin-bottom` 改 `8px`,其后加:
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">— {{图片说明}}</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -501,7 +501,7 @@
|
|||||||
## 组件 15 END 结尾分割线
|
## 组件 15 END 结尾分割线
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding:0 10px;">
|
<section style="padding:0 8px;">
|
||||||
<section style="text-align:center;margin:0 0 32px;">
|
<section style="text-align:center;margin:0 0 32px;">
|
||||||
<section style="display:flex;align-items:center;justify-content:center;">
|
<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>
|
<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
|
```html
|
||||||
<section style="padding:0 10px;">
|
<section style="padding:0 8px;">
|
||||||
<section style="text-align:center;margin-bottom:10px;border-radius:12px;overflow:hidden;">
|
<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>
|
<span leaf=""><img src="{{个人名片或引导图URL,无则删本 section}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
|
||||||
</section>
|
</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>
|
<span leaf="">我是 {{作者名}},{{一句话简介,如:热衷于分享 AI 观察与干货}}。</span>
|
||||||
</p>
|
</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>
|
<span leaf="">如果你觉得今天这篇有收获,欢迎</span>
|
||||||
<strong style="color:#DC2626;"><span leaf="">点赞、在看、转发</span></strong>
|
<strong style="color:#DC2626;"><span leaf="">点赞、在看、转发</span></strong>
|
||||||
<span leaf="">三连,我们下篇见。</span>
|
<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(极浅墨绿底,胶囊标签用)
|
标签底色: #EEF3F0(极浅墨绿底,胶囊标签用)
|
||||||
标签文字色: #3D5046(深墨绿,胶囊标签文字)
|
标签文字色: #3D5046(深墨绿,胶囊标签文字)
|
||||||
|
|
||||||
正文字号: 15px
|
正文字号: 16px
|
||||||
行高: 1.9
|
行高: 1.9
|
||||||
字间距: 0.3px
|
字间距: 0.3px
|
||||||
段落间距: 26px+
|
段落间距: 26px+
|
||||||
章节上下留白: 64px+
|
章节上下留白: 64px+
|
||||||
内容区边距: 0 16px(左右各 16px,比红白系更宽)
|
内容区边距: 0 10px(左右各 10px,留白气质靠行距与上下间距保持)
|
||||||
|
|
||||||
标题字体: 'Noto Serif SC', Georgia, 'Times New Roman', serif(衬线)
|
标题字体: 'Noto Serif SC', Georgia, 'Times New Roman', serif(衬线)
|
||||||
正文字体: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
|
正文字体: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
|
||||||
@@ -61,11 +61,11 @@
|
|||||||
> 纯白底,上下各一条 1px 细线(`#E8E8E8`),衬线字体大字金句居中,右下署名。无边框、无阴影、无色块——完全靠留白和细线传递气质。
|
> 纯白底,上下各一条 1px 细线(`#E8E8E8`),衬线字体大字金句居中,右下署名。无边框、无阴影、无色块——完全靠留白和细线传递气质。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin: 32px 16px 48px;padding: 40px 24px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
|
<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: 19px;font-weight: 600;color: #2B2B2B;margin: 0 0 28px;line-height: 1.85;letter-spacing: 0.8px;">
|
<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>
|
<span leaf="">这里放开篇金句,衬线字体自带书卷气,</span><span leaf="">留白让文字自己呼吸。</span>
|
||||||
</p>
|
</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>
|
<span leaf="">—— 作者名(按文章作者/主题而定)</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -80,7 +80,7 @@
|
|||||||
> 无色块目录,用细线分隔,数字编号低调呈现。三列等宽,纯文字 + 细线底边。
|
> 无色块目录,用细线分隔,数字编号低调呈现。三列等宽,纯文字 + 细线底边。
|
||||||
|
|
||||||
```html
|
```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;">
|
<p style="font-size: 11px;color: #A3A3A3;margin: 0 0 20px;letter-spacing: 2px;text-transform: uppercase;">
|
||||||
<span leaf="">本文脉络</span>
|
<span leaf="">本文脉络</span>
|
||||||
</p>
|
</p>
|
||||||
@@ -88,15 +88,15 @@
|
|||||||
<section style="display: flex;">
|
<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;">
|
<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: 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>
|
||||||
<section style="flex: 1;padding: 18px 12px 18px 0;border-bottom: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8;margin-right: 16px;">
|
<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: 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>
|
||||||
<section style="flex: 1;padding: 18px 0 18px 0;border-bottom: 1px solid #E8E8E8;">
|
<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: 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>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
> 极细线 + 超大上下 margin,靠留白分层,不依赖视觉装饰。
|
> 极细线 + 超大上下 margin,靠留白分层,不依赖视觉装饰。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding: 0 16px;">
|
<section style="padding: 0 10px;">
|
||||||
<section style="height: 1px;background: #E8E8E8;margin: 64px 0 0;">
|
<section style="height: 1px;background: #E8E8E8;margin: 64px 0 0;">
|
||||||
<span leaf=""><br></span>
|
<span leaf=""><br></span>
|
||||||
</section>
|
</section>
|
||||||
@@ -124,11 +124,11 @@
|
|||||||
> 英文小标签(极小号,墨绿,大字间距)+ 衬线中文大标题 + 标题下方一条短细线(40px 宽,墨绿)。编号低调嵌入英文标签前。无色块,无粗边框。
|
> 英文小标签(极小号,墨绿,大字间距)+ 衬线中文大标题 + 标题下方一条短细线(40px 宽,墨绿)。编号低调嵌入英文标签前。无色块,无粗边框。
|
||||||
|
|
||||||
```html
|
```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;">
|
<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>
|
<span leaf="">01 · CHAPTER ONE</span>
|
||||||
</p>
|
</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>
|
<span leaf="">中文章节大标题</span>
|
||||||
</h3>
|
</h3>
|
||||||
<section style="width: 40px;height: 2px;background: #4A5D52;">
|
<section style="width: 40px;height: 2px;background: #4A5D52;">
|
||||||
@@ -157,7 +157,7 @@
|
|||||||
**基础段落**:
|
**基础段落**:
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">正文内容,15px 字号,1.9 倍行高,两端对齐。段落间距 26px+,字里行间充满呼吸感。</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -165,7 +165,7 @@
|
|||||||
**带关键词下划线标记的段落**(推荐默认使用):
|
**带关键词下划线标记的段落**(推荐默认使用):
|
||||||
|
|
||||||
```html
|
```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 leaf="">正文内容的前半部分,引出核心概念,</span>
|
||||||
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">这是需要强调的关键语句</span></span>
|
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">这是需要强调的关键语句</span></span>
|
||||||
<span leaf="">,后半部分继续阐述。</span>
|
<span leaf="">,后半部分继续阐述。</span>
|
||||||
@@ -209,7 +209,7 @@
|
|||||||
> 极浅墨绿底 + 深墨绿字,低调不刺眼。用于核心概念(每篇 2~4 个)。
|
> 极浅墨绿底 + 深墨绿字,低调不刺眼。用于核心概念(每篇 2~4 个)。
|
||||||
|
|
||||||
```html
|
```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. 留空(本风格不设此变体,保持克制)
|
### 7c. 留空(本风格不设此变体,保持克制)
|
||||||
@@ -227,7 +227,7 @@
|
|||||||
**在段落中的实际效果**:
|
**在段落中的实际效果**:
|
||||||
|
|
||||||
```html
|
```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 leaf="">这个时代的竞争,拼的不是速度,而是</span>
|
||||||
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">深度思考的能力</span></span>
|
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">深度思考的能力</span></span>
|
||||||
<span leaf="">。真正的高手,往往在别人仰望风口时,已经悄悄</span>
|
<span leaf="">。真正的高手,往往在别人仰望风口时,已经悄悄</span>
|
||||||
@@ -253,8 +253,8 @@
|
|||||||
> 纯白底,上下各一条 1px 细线,衬线字体居中,大留白。这是禅意风最具特色的引用形式——不用色块,靠留白和字体传递力量。
|
> 纯白底,上下各一条 1px 细线,衬线字体居中,大留白。这是禅意风最具特色的引用形式——不用色块,靠留白和字体传递力量。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="margin: 40px 16px;padding: 36px 20px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
|
<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: 17px;font-weight: 600;color: #2B2B2B;margin: 0;line-height: 1.9;letter-spacing: 0.8px;">
|
<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>
|
<span leaf="">「这里是核心金句,衬线字体 + 大留白 + 细线框定。」</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -265,8 +265,8 @@
|
|||||||
> 极细左竖条(`#4A5D52`,2px),无底色,大 padding,适合旁注和补充说明。
|
> 极细左竖条(`#4A5D52`,2px),无底色,大 padding,适合旁注和补充说明。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="border-left: 2px solid #4A5D52;padding: 10px 20px 10px 20px;margin: 0 16px 30px;background: #FFFFFF;">
|
<section style="border-left: 2px solid #4A5D52;padding: 10px 14px 10px 14px;margin: 0 10px 30px;background: #FFFFFF;">
|
||||||
<p style="font-size: 14px;color: #525252;margin: 0;line-height: 1.9;text-align: justify;">
|
<p style="font-size:15px;color: #525252;margin: 0;line-height: 1.9;text-align: justify;">
|
||||||
<span leaf="">旁注或补充说明内容,左侧细竖线划定边界,无色块,保持呼吸感。</span>
|
<span leaf="">旁注或补充说明内容,左侧细竖线划定边界,无色块,保持呼吸感。</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -277,8 +277,8 @@
|
|||||||
> 仅左侧 1px 浅灰线,字号稍小,颜色略淡,用于最轻量的旁注或个人感想。
|
> 仅左侧 1px 浅灰线,字号稍小,颜色略淡,用于最轻量的旁注或个人感想。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="border-left: 1px solid #E8E8E8;padding: 8px 16px;margin: 0 16px 28px;">
|
<section style="border-left: 1px solid #E8E8E8;padding: 8px 10px;margin: 0 10px 28px;">
|
||||||
<p style="font-size: 13px;color: #A3A3A3;margin: 0;line-height: 1.9;text-align: justify;font-style: italic;">
|
<p style="font-size:14px;color: #A3A3A3;margin: 0;line-height: 1.9;text-align: justify;font-style: italic;">
|
||||||
<span leaf="">极轻量旁注,颜色浅、字号小,几乎不打扰主文节奏。</span>
|
<span leaf="">极轻量旁注,颜色浅、字号小,几乎不打扰主文节奏。</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -291,11 +291,11 @@
|
|||||||
> 用墨绿左竖条 + 「提示」小标签区分,无色块底色。保持留白气质,不用醒目色块警示。
|
> 用墨绿左竖条 + 「提示」小标签区分,无色块底色。保持留白气质,不用醒目色块警示。
|
||||||
|
|
||||||
```html
|
```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;">
|
<p style="font-size: 10px;color: #4A5D52;font-weight: 600;letter-spacing: 2px;margin: 0 0 8px;text-transform: uppercase;">
|
||||||
<span leaf="">NOTE</span>
|
<span leaf="">NOTE</span>
|
||||||
</p>
|
</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>
|
<span leaf="">这里是重要提示或核心结论,用小标签「NOTE」区分,不用色块。</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -306,7 +306,7 @@
|
|||||||
## 组件 10 图片容器
|
## 组件 10 图片容器
|
||||||
|
|
||||||
```html
|
```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;">
|
<section style="margin: 0;overflow: hidden;">
|
||||||
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
|
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
|
||||||
</section>
|
</section>
|
||||||
@@ -316,12 +316,12 @@
|
|||||||
图片 + 说明文字配合(说明文字用辅助色,居中,大留白):
|
图片 + 说明文字配合(说明文字用辅助色,居中,大留白):
|
||||||
|
|
||||||
```html
|
```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;">
|
<section style="margin: 0;overflow: hidden;">
|
||||||
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
|
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
|
||||||
</section>
|
</section>
|
||||||
</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>
|
<span leaf="">— 图片说明文字</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -331,7 +331,7 @@
|
|||||||
## 组件 11 加粗结论段落
|
## 组件 11 加粗结论段落
|
||||||
|
|
||||||
```html
|
```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>
|
<span leaf="">加粗的结论性短句,字色加深到近黑,靠字重而非色彩传达重量。</span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -339,7 +339,7 @@
|
|||||||
结合荧光笔的变体:
|
结合荧光笔的变体:
|
||||||
|
|
||||||
```html
|
```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>
|
<span style="background: linear-gradient(180deg, transparent 60%, #D6E4DC 60%);"><span leaf="">荧光笔标记的结论句,极浅墨绿底,克制温柔。</span></span>
|
||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
@@ -351,13 +351,13 @@
|
|||||||
### 两列版(用细线边框替代色块)
|
### 两列版(用细线边框替代色块)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="display: flex;margin: 0 16px 32px;">
|
<section style="display: flex;margin: 0 10px 32px;">
|
||||||
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 24px 16px;margin-right: 12px;text-align: center;">
|
<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: 32px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">14亿</span></p>
|
<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>
|
<p style="font-size: 11px;color: #A3A3A3;margin: 0;letter-spacing: 1px;"><span leaf="">覆盖用户</span></p>
|
||||||
</section>
|
</section>
|
||||||
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 24px 16px;text-align: center;">
|
<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: 32px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">3步</span></p>
|
<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>
|
<p style="font-size: 11px;color: #A3A3A3;margin: 0;letter-spacing: 1px;"><span leaf="">快速接入</span></p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@@ -366,18 +366,18 @@
|
|||||||
### 要点列表版(竖排,细线分隔)
|
### 要点列表版(竖排,细线分隔)
|
||||||
|
|
||||||
```html
|
```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;">
|
<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: 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>
|
||||||
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 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="">02</span></p>
|
<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>
|
||||||
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 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="">03</span></p>
|
<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>
|
||||||
</section>
|
</section>
|
||||||
```
|
```
|
||||||
@@ -405,7 +405,7 @@
|
|||||||
> 居中极细线 + 「END」字样,低调收尾。墨绿细线 + 小号字母,不用渐变装饰。
|
> 居中极细线 + 「END」字样,低调收尾。墨绿细线 + 小号字母,不用渐变装饰。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding: 0 16px;">
|
<section style="padding: 0 10px;">
|
||||||
<section style="text-align: center;margin: 48px 0 40px;">
|
<section style="text-align: center;margin: 48px 0 40px;">
|
||||||
<section style="display: flex;align-items: center;justify-content: center;">
|
<section style="display: flex;align-items: center;justify-content: center;">
|
||||||
<span style="height: 1px;width: 48px;background: #E8E8E8;margin-right: 16px;"></span>
|
<span style="height: 1px;width: 48px;background: #E8E8E8;margin-right: 16px;"></span>
|
||||||
@@ -421,11 +421,11 @@
|
|||||||
## 组件 15 尾部作者签名区
|
## 组件 15 尾部作者签名区
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section style="padding: 0 16px 40px;">
|
<section style="padding: 0 10px 40px;">
|
||||||
<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="">我是 {{作者名}},{{一句话简介,如:热衷于分享 AI 观察与干货}}。</span>
|
<span leaf="">我是 {{作者名}},{{一句话简介,如:热衷于分享 AI 观察与干货}}。</span>
|
||||||
</p>
|
</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>
|
<span leaf="">如果你觉得今天这篇有收获,欢迎</span>
|
||||||
<strong style="color: #4A5D52;"><span leaf="">点赞、在看、转发</span></strong>
|
<strong style="color: #4A5D52;"><span leaf="">点赞、在看、转发</span></strong>
|
||||||
<span leaf="">三连,我们下篇见。</span>
|
<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 的联动协议
|
## 与 ckm-banner-design 的联动协议
|
||||||
|
|
||||||
需要直接生成封面图时,把 brief 交给 ckm-banner-design 执行,brief 必须包含:
|
需要直接生成封面图时,把 brief 交给 ckm-banner-design 执行,brief 必须包含:
|
||||||
@@ -52,9 +78,9 @@
|
|||||||
|
|
||||||
产出后按「缩略图回看」验收;不合格改 brief 重生,不改用其他工具绕开。
|
产出后按「缩略图回看」验收;不合格改 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",
|
"skill": "le-wechat-article",
|
||||||
"date": "2026-10-05",
|
"date": "2026-11-05",
|
||||||
"threshold": 0.3,
|
"threshold": 0.3,
|
||||||
"prediction_mode": "coverage_fallback",
|
"prediction_mode": "coverage_fallback",
|
||||||
"note": "词面冒烟测试;行为结论需真实对话实测(live_turns 字段手工补记)",
|
"note": "词面冒烟测试;行为结论需真实对话实测(live_turns 字段手工补记)",
|
||||||
@@ -250,14 +250,15 @@
|
|||||||
"text": "帮我找几个公众号选题",
|
"text": "帮我找几个公众号选题",
|
||||||
"family": "topic_only",
|
"family": "topic_only",
|
||||||
"bucket": "near_neighbor",
|
"bucket": "near_neighbor",
|
||||||
"coverage": 0.25,
|
"coverage": 0.375,
|
||||||
"coverage_hits": [
|
"coverage_hits": [
|
||||||
|
"个公",
|
||||||
"众号",
|
"众号",
|
||||||
"公众"
|
"公众"
|
||||||
],
|
],
|
||||||
"families_hit": [],
|
"families_hit": [],
|
||||||
"negative_hit": false,
|
"negative_hit": false,
|
||||||
"predicted_trigger": false,
|
"predicted_trigger": true,
|
||||||
"expected_trigger": null,
|
"expected_trigger": null,
|
||||||
"verdict": "boundary"
|
"verdict": "boundary"
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user