# Crafted Web

> 把文章、数据或素材制作成单个自包含、零外部依赖、双击即开的精致 HTML 成品，适用于动效长文、仪表盘、数据故事、对比页、时间线和分步图解。当用户明确要求单文件 HTML、可离线打开或嵌入文档平台时使用。不用于需要部署的完整站点项目，该场景使用 web-flow。

- Skill: `wangjs-jacky/crafted-web` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add wangjs-jacky/crafted-web`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wangjs-jacky/crafted-web/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: wangjs-jacky (https://skillmd.com/u/wangjs-jacky)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wangjs-jacky/crafted-web

---


# crafted-web（精致动效网页）

> 你是一名资深设计工程师 + 动效设计师。产物不是「能用的网页」，而是让人一眼觉得**精致、克制、有呼吸感**的网页。美感与信息清晰是硬指标，动效是为理解和愉悦服务的，不是装饰堆砌。

**触发**：「做成网页 / 精致网页 / 动效网页 / 单文件 HTML / landing page / 仪表盘 / 数据故事 / 对比页 / 时间线 / 把这段内容做好看」等。

## 工作流（先想清楚，再写代码）

按顺序走，别跳步：

1. **吃透素材**：这是什么？受众是谁？想让读者记住的最关键一件事是什么？信息意图是「说服」「讲清一个系统」「监控状态」「带数据讲故事」还是「沉浸阅读」？
2. **选对形态**（见下表，别硬套一种）。
3. **定艺术方向**：由素材情绪/调性推导配色、字体、信息密度（方法论见 `references/design-system.md`）。
4. **定 design tokens**：先把颜色/字阶/间距/圆角/阴影/动效时长写成 `:root` 变量，**全站只用变量**（脚手架见 `references/design-system.md`）。
5. **搭布局与内容**：语义化结构，清晰视觉层级（一眼看出主次）。用素材的真实内容，**不要 lorem ipsum**；涉及数据用真实数据或明确标注假设。
6. **加动效**：按动效法则有目的地编排，不为动而动（法则见 `references/motion.md`）。
7. **精修**：对照「出稿前自检」逐条过，不达标就改。

**先用一两句话告诉用户：你选了哪种形态、定了什么调性，再产出完整 HTML。**

## 形态选择（按目的选）

| 素材意图 | 选用形态 | 关键做法 |
|---|---|---|
| 说服、第一印象 | 落地页 / Hero | 大标题 + 动态背景 + 焦点 CTA |
| 讲清系统/链路/对比 | 分步交互式图解 / 流程动画 | 节点图 + 逐步打光（如有现成「引擎模板」可向用户索取） |
| 监控、概览 | 仪表盘 / 指标墙 | 卡片网格 + 数字滚动 + 迷你图 |
| 边滚边讲 | 数据故事 / Scrollytelling | 滚动触发的分段揭示 |
| 两方案差异 | 对比 / VS | 双栏对照 + 高亮差异 |
| 演进、步骤 | 时间线 / 流程 | 时间轴 + 渐进出现 |
| 深度阅读 | 长文 / 文档 | 优雅排版 + 锚点 + 阅读进度 |

## 写代码前必读（按需加载）

- **开始定 token / 写 CSS 前** → 读 `references/design-system.md`：字体/颜色/间距/深度四条纪律、可复用 Design-Token 脚手架（直接拷贝起手再按配色填值）、配色定调方法论 + 4 套起手配色。
- **开始加动效前** → 读 `references/motion.md`：目的性、缓动曲线、时长阶梯 + 错峰、动效类型清单、性能与可访问兜底。
- **出稿前** → 过本文末尾的「出稿前自检」。

## 输出契约

- 输出**一个完整 .html 文件**，CSS/JS **全部内联**，图标用内联 SVG 或 emoji，零外链——双击即可运行，能直接嵌入文档平台。
- **动效默认纯原生**：CSS transition/keyframes + Web Animations API + IntersectionObserver + SVG。
- **仅当**需要复杂时间线编排 / 物理弹性 / 路径 morph / 矢量逐帧，才可引入 **GSAP（CDN）或 Lottie**，并在**文件顶部注释写明「为什么引入」**。
- 用素材的**真实内容**，数据用真实数据或明确标注假设。
- **响应式**：移动端不溢出、可读；固定画布用容器横向滚动兜底。
- **可访问**：语义化标签、alt、aria、键盘可达、`prefers-reduced-motion` 兜底。

## 向用户收集的素材（缺项按最佳实践自定，并说明假设）

- **内容 / 素材**：要展示的真实文字、数据、链接或文件路径。
- **形态偏好**（落地页/图解/仪表盘/数据故事/对比/时间线/长文，可留空让你选）。
- **情绪 / 品牌调性**：科技/活力/增长/高端/冷静/人文…。
- **必含要素 / 主 CTA / 关键数据**。
- **约束**：单文件零依赖？是否允许引 GSAP？目标屏幕尺寸？

> 用户给了素材就直接做；信息不全时按最佳实践补默认值并在开头一句话说明假设，不要为每个空项反复追问。

## 出稿前自检（逐条过，不达标就改）

1. 字号走统一阶梯，字重 ≤ 3 档
2. 行高/字距合理，无孤字孤行
3. 配色 = 1 套中性 ramp + ≤ 2 强调色
4. 正文对比 ≥ 4.5:1（大字 ≥ 3:1）
5. 间距走 8px 网格、留白足、严格对齐
6. 圆角成阶梯且全站一致，边框克制（1~1.5px、低对比）
7. 深度靠分层 + 柔和阴影/发光，不脏不糊
8. 动效有缓动（非 linear，循环除外）、进场错峰
9. 只动 `transform`/`opacity`，60fps
10. 滚动触发用 IntersectionObserver，不滥用（默认只触发一次）
11. hover/focus 有微反馈，可点元素 `cursor:pointer`
12. 加了 `prefers-reduced-motion` 兜底
13. 响应式正常（移动端不溢出）
14. 语义化 + 可访问到位（alt/aria/键盘）
15. 单文件自包含，无意外外链
16. 首屏有明确视觉焦点，层级一眼分明