手写线性网站图标设计#
把网站图标设计成经过整理的手写签名：单色、圆头、有机曲线、轻微不对称，并通过书写动画呈现笔势。除非用户明确要求偏离，否则禁止生成图标库式 outline、规则方框或网格、大面积填充、渐变和通用应用图标。
工作流#
1. 建立上下文#
- 检查用户给出的 URL、本地项目、现有 Logo、品牌文字和截图。
- 从项目中确认背景色、主题模式、实际显示尺寸、资源路径、框架和构建命令。
- 判断当前阶段：研究、出候选、迭代、定稿或接入。未选定方案时不要替换生产资源。
- 优先从已有信息推断；只有会实质改变方向且无法发现时才询问用户。
2. 锁定风格#
设计前必须阅读：
- references/style-anchors.md：长期风格锚点与不可复制边界；
- references/design-rules.md：线条规范、候选分工和硬性淘汰条件。
参考网站只用于提炼笔势、粗细、留白和动画节奏。需要额外调研时，只选择签名式、有机单色线条案例；不要因为目标网站属于技术、生活或商业领域就切换成该行业常见图标。
用简短设计摘要记录：
- 网站表达什么；
- 名称或首字母能否形成连笔；
- 可转译成手写符号的核心语义；
- 背景、颜色和关键尺寸；
- 必须避免的错误联想。
3. 先过静态门槛#
先设计静态轮廓，再添加动画。每个草案必须满足：
- 仅使用 1–4 条视觉连贯的主要路径；
- 至少有一条承担主要轮廓的主笔，其他路径只作为短促辅助笔；
- 使用流畅贝塞尔曲线、圆头和圆角连接；
- 略有不对称，但不添加刻意抖动或铅笔纹理；
- 在 24 px 静态显示时仍可辨认；
- 不依赖动画才能成立。
禁止使用多条等权重平行线、对称放射线或相邻的双回环作为主体；这些结构容易退化成菜单、层级、星芒、无限符号或链环。
实际渲染每个草案，不要只阅读路径和设计说明。为每案写出 3 个最可能的误读；说明文字声称“不是链条”不算证据。出现蛇、无限符号、链条、规则盒子、图标库轮廓或知名品牌联想时，直接淘汰，不向用户展示。
4. 生成固定分工的三案#
默认每轮生成 3 套，全部保持同一种手写线性风格：
- 名称连笔：从网站名称或首字母提炼可识别但非字体直出的签名；
- 语义手写符号：把网站含义转译为一组连续笔势，不画规则 pictogram 外壳；第一眼仍应像签名而不是行业图标；
- 抽象笔势：不依赖文字，通过独特走势和节奏形成品牌记忆；不能退化成放射、层叠、波纹等装饰图案。
三个候选必须能仅凭剪影区分。用 128 px 纯黑剪影并排比较；任意两案在主方向、起收笔方向、回环数量、重心和主要负空间中至少有两项明显不同。如果两案共享相同的主回环、尾部走势或重心，只改变局部含义也要重画。只改变旋转、粗细、内部符号或动画方向不算新方案。
5. 制作动态候选#
每套候选至少提供：
- 一个可独立打开的动态 SVG；
- SVG 内的
<title>和<desc>； - 约 6–8 秒的书写、停留、淡出循环；
prefers-reduced-motion静态降级；- 一句话说明笔势来源、含义和可能的错误联想检查。
需要动效骨架时改造 assets/signature-motion-template.svg，但必须替换全部示例路径。制作前阅读 references/svg-motion.md。
使用预览脚本展示深浅背景和 24、32、48 px 静态完整轮廓；小尺寸样本不能停留在动画空白首帧：
python <skill-dir>/scripts/build_preview.py --input <candidate-dir> --output <candidate-dir>/preview.html --title "手写线性图标候选" --dark-background "#050505" --light-background "#fafafa"
向用户展示三案并等待选择。用户认为“像蛇”“太通用”或“不像手写”时，必须重做外轮廓和笔势，不要用增加细节掩盖问题。
6. 制作生产资源#
用户选定方案后再制作：
logo.svg：保留内部 CSS 书写动画，作为外链图片时独立运行；favicon.svg：沿用同一笔势的静态简化版，允许加粗和减少路径，但不能换成另一套几何符号；- 可选静态 Logo：仅用于不支持 SVG 动画的平台。
favicon 可从 assets/signature-favicon-template.svg 改造，但必须替换全部示例路径。默认使用单色透明背景；只有用户明确要求时才加入一个辅助色。
7. 验证#
运行带手写线性约束的 SVG 检查：
python <skill-dir>/scripts/validate_svg.py <logo.svg> <favicon.svg>
再完成：
- 检查 16、24、28、32、48 和 128 px；favicon 重点检查 16 和 32 px。
- 检查浅色、深色背景和浏览器标签页。
- 观察首帧、书写、完整停留、淡出、循环衔接和 reduced-motion。
- 检查 Logo 的基线、留白和点击区域。
- 重新执行硬性淘汰条件，尤其检查蛇、无限符号、链条和通用图标联想。
- 运行项目已有的格式、类型、测试和构建命令。
- 能使用浏览器时完成截图和控制台检查；无法执行时明确说明限制。
8. 接入与交付#
只有用户要求接入或已经确认候选时才修改站点。遵循项目现有资源路径和组件写法；页面已有可访问名称时，把装饰性 Logo 的替代文本留空。
交付时列出采用的概念、动态 Logo、favicon、预览文件、验证结果、人工检查限制，以及候选文件是否保留。
