agentsclimarketplace
Sign in

Anthropic design

Skill TbusOS/sky-skills/skills/anthropic-design

Render HTML/CSS in anthropic.com visual aesthetic — warm cream background (#faf9f5), Poppins headings + Lora serif body, orange accent (#d97757) for CTAs and emphasis, rounded filled pill buttons, editorial card grids, abstract SVG illustrations, low-saturation data visualizations (soft blue/gray/teal), hand-drawn SVG architecture diagrams with orange/blue/green node categorization and diamond decision gates. TRIGGER when the user says 'anthropic 风格' / 'anthropic style' / 'claude 官网风格' / 'Anthropic 品牌', or asks for an editorial/long-form page, research article layout, pricing card grid, or a filled-button-with-warmth feel. DO NOT TRIGGER for generic 'beautiful web page' requests (use frontend-design) or Apple aesthetic (use apple-design).From its SKILL.md

Install
npx -y skills add TbusOS/sky-skills --skill anthropic-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

13.3 KB, as published. Nobody here has run it

Anthropic Design — HTML 风格

让 Claude 以 anthropic.com / claude.com 视觉语言输出：暖米白底、Poppins + Lora 字体、橙色主强调、编辑式卡片网格、抽象 SVG 插画、低饱和图表、手工 SVG 架构图。

使用方式

  1. 在 HTML 里引入 <link rel="stylesheet" href="assets/fonts.css"> 与 <link rel="stylesheet" href="assets/anthropic.css">。fonts.css 默认只含拉丁字体（~80 KB）；中文走系统字体回退（PingFang/微软雅黑/Noto CJK），zh 覆盖的 font-family 链首仍写 "Noto Sans SC"/"Noto Serif SC"。仅当必须保证 CJK webfont 时再追加 assets/fonts-cjk.css（+200 KB，CDN 慢时拖慢首屏 2-5 秒）。
  2. 写业务结构时套用 anth-* class 前缀。具体组件用法见 references/components.md。
  3. 新开模板直接从 templates/ 复制。

触发关键词

anthropic 风格 / anthropic style / claude 官网风格 / Anthropic 品牌 / warm cream + orange / 编辑式长文 / Poppins Lora

不要用于

  • 通用"好看页面"（用 frontend-design）
  • Apple 美学（用 apple-design）
  • 零基础图解 / eli5 / picture explainer —— 给完全不懂的人讲一个概念（用 primer-design：大图少字、比喻先行；anthropic 是给读得下长文的人看的）
  • 高饱和 / 霓虹 / 赛博朋克

阅读顺序

  1. references/design-tokens.md — 所有 CSS 变量
  2. references/typography.md — 字体层级（Lora serif 正文是核心差异）
  3. references/layout-patterns.md — 六类版式骨架 + 容器选择表 + 版心与阅读纪律（用户反馈四坑：全页窄列 / 密图迁就对齐 / 文字墙 / 重叠三来源，写任何页面前过一遍） + L1-L10 scenario recipes（dashboard / form / table / tab / accordion / modal / sidebar / changelog / video / empty-state）
  4. references/components.md — 28 组件（含 §28 Inline SVG 插画模板）+ C1-C11 scenario recipes（input / select / check / switch / tab / accordion / toast / dialog / banner / tooltip / skeleton）
  5. references/diagram-craft.md — 手工 SVG 图示工艺（画任何架构/流程/层级/时间线图前 MUST 读）：色彩语义表（颜色做语义不做填充）、嵌套分组、节点卡、连线、编号徽章、布局公式、icon 语法、窗口 mock、图密度合约、反模式
  6. references/sequence-diagrams.md — UML 时序图专文（actor / lifeline / step 编号 / 平文本约束）
  7. references/motion.md — 动画缓动 + M1-M10 scenario recipes（hero / stagger / hover / modal / toast / loading / count-up / route）
  8. references/imagery.md — 抽象 SVG 插画规则
  9. references/data-display.md — 低饱和图表色板
  10. references/responsive.md — 断点与 max-width
  11. references/ux-writing.md — CTA / empty state / error / placeholder 文案模式 + 禁用词清单
  12. references/dos-and-donts.md — 反例 + 发布前 7 项 checklist（MUST）

图密度合约（写任何页面前 MUST — 不只画图时）

尽可能用图表达——这是默认要求，不需要用户提醒。下表任一形态出现就该配视觉化 （图型列是默认起点不是强制规格——结构按实际内容定制、可混搭可自创，硬约束只有 "该有图的地方有图" + 工艺质量检查）：

内容形态必须配内容形态必须配
≥3 步流程 / 启动链 / 数据流流程图或时序图数字对比 / 统计stat callout 或图表
系统结构 / 分层 / 依赖架构图时间演进 / 版本 / 里程碑时间线
产品 / UI 描述窗口 mock连续纯文字 > 2 屏≥ 1 个视觉元素
函数控制流 / 寄存器位域函数流程图 / 位域图SoC 结构 / 信号时序 / 编译链 / 调度对应内核图型(diagram-craft §15)

节奏：每 1.5 屏（≈1300px @1440）≥ 1 个 SVG / figure / stat。机器检查 text-desert 在连续 2600px 无视觉元素时 warn（known-bugs 1.31）。动笔画图前再读 references/diagram-craft.md： §8.1 先算尺寸选容器档（密图必须 1200 wide，看不清 = 没画）、§1 色彩（每图 ≥ 2 语义 hue， 小元素实心主色）。现成图直接抄 templates/diagrams/，案例库见 demos/anthropic-design/diagrams.html。

何时读 scenario recipes（重要）

写一个 page-type 之前先看 §3 / §4 / §5 / §9 末尾的 ## Scenario recipes：

  • canonical 只有 pricing / landing / docs-home / feature-deep / comparison 五类
  • 上面之外的版式（dashboard / form / wiki / accordion / modal / toast / 数据表 / 文案规则）必须读对应 recipe
  • generator 不要凭感觉把 landing 的卡片样式套到 dashboard、把 cream 直链当主 CTA、用 Click here 当 CTA 文案
  • recipe 里给的是量化合约（duration / padding / font-size / token），按表执行

发布前检查(MUST — 交给 design-review skill)

生成前读 canonical + 拿合约

任何 page-type(pricing / landing / docs-home / 其他)开写之前必须:

# 生成 sprint-contract(把 MUST/MUST NOT 交给生成器自己)
~/.claude/skills/design-review/dr-cli --plan --skill=anthropic --page=pricing
# 然后读 ~/.claude/skills/anthropic-design/references/canonical/<page>.html + .md

不读 canonical 就写 = 必然偏掉风格。canonical.md 里的 7-8 条设计 决定 + typography 表就是评分标准。

生成后写 self-diff note(交付前 MUST)

生成器在写完 HTML、跑四道检查之前,必须在 </body> 前 embed 一个 design-review:self-diff v1 HTML 注释块,列出 5-7 条本次生成的关键 设计决策 + 2-3 条 known trade-offs。contract 见 ~/.claude/skills/design-review/references/cross-skill-rules.md §M,示范参考 ~/.claude/skills/anthropic-design/references/canonical/comparison.html 末尾。

没有 self-diff = canonical 不被 verify.py 承认。critic 也无法做实 质评审(没有作者意图的靶子)。HARNESS-ROADMAP Phase 03 的硬规则。

生成后跑四道机械检查 + critic

~/.claude/skills/design-review/dr-cli --critic <path/to/your.html>

四道机械检查依次(检查模型的唯一定义在 design-review/SKILL.md):

  1. verify.py — 结构(placeholders / DOCTYPE / BEM / SVG / class / §G 双语)
  2. visual-audit.mjs — 渲染(contrast / hero 宽 / SVG 字号 / hollow card / brand-presence §K / italic-overuse §J / cross-skill-smell §K)
  3. axe-audit.mjs — 可达性(axe-core,color-contrast 阻断)
  4. screenshot.mjs — 全页 PNG 存 shots/

四道之外,--critic 再跑 LLM taste 评审(输出 JSON + 0-100 分,canonical 自跑 ≥ 90)。 任一 error 整个失败。warn 要判断是否放行。critic 得分 < 75 必修。

规则与已知 bug 全在 ~/.claude/skills/design-review/references/cross-skill-rules.md (A-L)+ known-bugs.md。canonical 文件在 ~/.claude/skills/anthropic-design/references/canonical/(pricing / landing / docs-home 各一对 .html + .md)。

Evaluator 和 generator 分离是刻意的 —— 参考 Anthropic harness design for long-running apps 里的 GAN 式 discriminator:reviewer 不继承 generator 的立场。

anthropic 专属要点

  • .anth-button 橙底必须 color: #ffffff; font-weight: 600;(cream 在橙上是 2.96, fail AA)
  • Hero 段必须 class="anth-container anth-container--wide"(base + modifier 都要)
  • 风格规则详见 references/dos-and-donts.md

审存量页（不是新生成的） — --audit 模式

四道检查只跑刚生成的 HTML。要批量扫存量页面（已有 wiki / 老 memo / 客户给的 HTML），用：

# 扫整个目录（递归）
~/.claude/skills/design-review/dr-cli --audit --skill=anthropic --allow-monolingual <dir>/

# 单文件
~/.claude/skills/design-review/dr-cli --audit --skill=anthropic --allow-monolingual <file>.html

# verify-only，10x 快（适合先看哪些有结构错）
~/.claude/skills/design-review/dr-cli --audit --skill=anthropic --allow-monolingual --no-visual <dir>/

# 限文件数（试跑）
~/.claude/skills/design-review/dr-cli --audit --skill=anthropic --max=5 <dir>/

输出（默认 <repo>/shots/）：

  • audit-report-<ts>.md — 汇总表 + Top failure modes 直方图 + 每页 errors/warnings 详情
  • audit-report-<ts>.json — 同样数据的机器可读版本

退出码：所有文件都 pass → 0；任一文件 errors > 0 → 1；warnings 默认不算 fail，加 --strict 才算。

审外部 HTML（没链 anthropic.css）：先在 <head> 注入 <link rel="stylesheet" href="<...>/anthropic.css"> 再扫，否则 audit 会报 "undefined class" / "no brand-presence" 等大量 false positive。

让 .md / sibling .html 跳转也变好看 — md-mirror / md-rewrite-links / md-pack / cross-link-pack

场景：anthropic 风格 HTML 文档常链到外部 .md（README / 实施步骤 / 原理详解），或链到 sibling 目录里的其他 .html。浏览器原生显示 raw markdown 难看，单独发文档目录时 sibling .html 链接又会 broken。scripts/ 下四件套各管一段，按需用。

1. md-mirror.mjs · 1→1 渲染原语

把 .md 渲成同款 anthropic.css 的自包含 .html（1200px 容器，深色代码块，橙色 callout blockquote，GFM 表格，banner 显示 git 相对源路径）。

node skills/anthropic-design/scripts/md-mirror.mjs <src.md>            # 旁边出 .html
node skills/anthropic-design/scripts/md-mirror.mjs <src.md> <dst.html> # 显式 dst

库模式：import { renderMarkdown } from './md-mirror.mjs' 让上层（md-pack）注入 rewriteHref hook。

2. md-rewrite-links.mjs · href 后缀替换原语

把 HTML 里 href="*.md(?q)(#f)" 直接改成 href="*.html(?q)(#f)"（in-place，跳过 http(s) / 锚点 / 绝对路径）。简单场景：所有 .md 镜像就放在原位置时用它。

node skills/anthropic-design/scripts/md-rewrite-links.mjs <file.html> [...]

3. md-pack.mjs · 把 .md 链接折叠到子目录（推荐用于发包）

发文档目录给同事 / 客户时，主 HTML 跳出去的 .md 散在各处，单发主目录就 broken。md-pack 一次性把所有被链接的 .md 渲染到 <out>/<flat>.html（扁平命名避免冲突），主 HTML 重写指向 _md/...，镜像之间相互跳转也修对。装到 _md/ 后整个主目录 cp 哪都行。

node skills/anthropic-design/scripts/md-pack.mjs \
  --base docs \
  --out  docs/handbook/_md \
  docs/handbook/*.html

行为：

  • 扫主 HTML 的 .md href → 解析到绝对路径
  • 扁平名 = relpath(src, --base).replace(/\//g, '__').replace(/\.md$/, '.html')
  • 调 renderMarkdown 把每个 .md 渲到 <out>/<flat>.html，链接重写按场景分类：
    • Case A：跳到另一个被打包的 .md → 同目录扁平兄弟
    • Case B：跳到主 HTML → 从 _md/ 出来 ../mainHtml.html
    • Case C：跳到 pack 外的资源 → 重算相对路径 + 警告
    • Fallback：源 .md 写错路径（off-by-one ../）→ 按 basename 后缀匹配救回，发 info 提示
  • 主 HTML 的 .md href 全部重写到 _md/<flat>.html
  • 幂等，重跑可补漏（如果你后续在主 HTML 里加了新 .md 链接）

--dry-run 看计划不写文件。

4. cross-link-pack.mjs · 把跨目录 sibling .html 也折叠进来

md-pack 处理 .md，cross-link-pack 处理 .html。当主 HTML 链到同一文档集其他目录里的兄弟 .html（不是镜像），cp 走主目录后这些链就坏。cross-link-pack 把那些 .html 直接拷到 _md/（同款扁平命名），并 rewrite 主 HTML 的 href。

node skills/anthropic-design/scripts/cross-link-pack.mjs \
  --pack-root docs/handbook \
  --base      docs \
  --out       docs/handbook/_md \
  docs/handbook/*.html

注意：被 cp 进来的 sibling .html 内部如果还有相对引用（图片 / 子链接 / CSS），那些引用在新位置可能 broken；脚本会扫并 warn。脚本只管把 sibling .html 拽过来，不试图也把 sibling 的依赖一起拽——遵循 single-responsibility，避免无限递归打包。

推荐工作流

# 1) 主 HTML 跳 .md 都收进来
node md-pack.mjs --base docs --out docs/<pack>/_md docs/<pack>/*.html

# 2) 主 HTML 跳跨目录 .html 也收进来
node cross-link-pack.mjs --pack-root docs/<pack> --base docs --out docs/<pack>/_md docs/<pack>/*.html

# 3) cp 走 docs/<pack>/ 给任何人，链全活

依赖：marked@^15（已在 sky-skills/node_modules）。脚本路径全部相对 import.meta.url 计算，整个 sky-skills 仓 cp 到任何地方都能用。

Keep looking

Skills are one crate of 627,801. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.