标志驱动的网页设计
将产品自身的标志转化为其网站的视觉素材。将插图、动效和布局一起设计，使结果既能解释产品，又能体现其品牌的独特性。
这是一种设计与实现相结合的方法，不是网站模板。必须从实际的标志和产品出发推导结果。不要继承示例网站的品牌、调色板、章节数量、插图主题、排版或滚动模型。
一个简单的网站可以有很少的章节和文案，但其插图依然可以完整且精心绘制。通过内容选择来缩小范围，而不是移除那些使艺术作品可被识别的结构。
理解产品并检查标志
使用提供的产品信息、现有网站、标志和参考资料。确定产品是什么、其主要功能和主要操作。复用已知信息；仅当缺少必要资源或面临真正重要的选择时才提问。
在设计前查看实际标志。检查其轮廓、线条或填充区域、负空间、节奏、比例、颜色和独特的连接。识别哪些元素可以成为有用的视觉材料，以及哪些特征使原始标志可被识别。并非每个标志都应被简化为线条或分成三部分。
当提供了可用的矢量路径时，从这些路径开始工作。通常，对路径的分组/轮廓进行快速视觉检查就足够了；通过像素分析重新测量其几何形状是没有必要的。
阅读 design-and-assets.md 了解标志分析、产品到形式的映射以及资源制作。
开发品牌特定的视觉故事
将标志元素转化为与产品功能相关的构图。一条曲线可能变成工作流，一个开口可能框住图像，或者一个填充形状可能展开成一个工作空间。这些是可能性，不是必需的图案。将完整的标志旋转后放在不相关的卡片上方并不能完成此任务。
对于每个重要的页面部分，定义：
- 访客应该理解什么，表达为一个简短的产品/功能陈述。
- 传达该信息的完整插图，以及源自标志的形式如何参与其中。
- 有意义的对象或视觉关系，它将持续到下一个状态。
- 在桌面和移动设备尺寸下，艺术作品如何与文本和操作共享空间。
规划哪些源自标志的元素会过渡到每个目标状态，然后在调整其插值之前开发目标艺术作品。根据标志的特点，使用变形、展开、绘制、遮罩、部分重新排列或材质变化。在需要展示官方品牌的地方保持原始标志完整。当适合故事时，重组回原始标志可以提供结束感；下载部分或标志结尾并非必需。
一同选择页面和动效模型
选择适合内容和所需体验的布局：带有安静章节的强大动画首屏、连续的滚动链接叙事、紧凑的序列，或其他有充分理由的构图。尊重用户选择的参考资料和交互模式。不要强行将交替的全屏章节应用于每个产品。
对于滚动链接的工作，推荐使用原生文档滚动，除非需求要求其他行为。为读者提供清晰、有组成感的静止状态，并将变换放置在支持阅读顺序的位置。根据实际布局推导时间，而不是施加示例阈值。
使用简洁的文案说明产品是什么以及用户能做什么。让插图和布局承担解释的重任。使字体、间距、控件和装饰与品牌相匹配，而不是用通用的营销模板包围动画。
绘制完整的目标状态，然后编排其变换
阅读 design-and-assets.md 中的插图制作部分，并查看视觉对比图；其可编辑源文件是 illustration-craft.svg。这些示例解释了结构和完成度，而不是规定的风格或页面模板。
将每个重要的目标状态渲染为工作页面中的实际插图或可编辑资源。确定其比例、独特的轮廓、有意义的组件、连接和重叠。在需要的地方添加线条/颜色/材质层级。暂时保持场景静止以判断构图：它应该能够解释其主题，而无需依赖标题来识别一个模糊的形状。这是一个工作步骤，不是要求在每个阶段都提交单独的建议或获得用户批准。
分离动效职责：源自标志的结构可以连续变形；附加的组件跟随该结构；目标特定的内容和完成度可以在其空间存在后展开或出现。这些是角色，不是固定数量的分组。保留丰富的艺术作品，而不强制每个细节都通过相同的插值函数。
让每个被携带的标志元素在每个目标状态中赢得其角色。不要仅仅为了在每个部分中保持它的存在而强行将一个图层变成不相关的产品对象；它可以完成一次变换，然后作为新的场景内容进入。
使源到目标的对应关系在几何或空间交接中可见。淡出整个标志并显示一个不相关的符号并不能展示所需的变换。一旦确定了目标状态和对应关系，就编写过渡姿态并将其与页面同步。
在选定的技术中实现艺术作品
使用现有的项目技术栈。阅读 implementation.md 了解如何选择 SVG/CSS、时间线库、Canvas/3D 或渲染媒体，以及几何、同步和响应式构图。
对于精确的源自标志的形状，优先使用原始矢量几何。有意识地创作中间态艺术作品；当所选的艺术方向实际需要其输出时，才使用图像或动效生成工具。生成的图像应支持相同的品牌语法，而不是用不相关的装饰资源替换所需的变换。
制作一个可工作的页面，而不仅仅是一个动效方案。通过连贯的动画模型协调几何、运动、材质和插图内容。在官方标志的静止状态下，保留可读的字体、有用的控件和精确的源标志。尊重减少动效偏好，提供可理解的构图。
审查和完善渲染后的网站
使用 visual-review.md 首先检查已定稿的插图，然后检查它们的过渡以及桌面/移动端的布局。区分缺少视觉结构与轮廓采样和帧时序问题；增加数值精度并不能添加缺失的产品细节。判断另一个品牌是否可以通过仅更改标志和颜色来获得相同的页面：如果是，则重新审视标志到功能的映射。
检查每个重要过渡的至少一个中间状态。如果它读起来像一个意外的混合体，则纠正元素对应关系或编写更清晰的过渡姿态；交错每个图层或增加轮廓精度无法修复语义错误的变形。改进观察到的问题：重新绘制不美观的中间姿态，调整冲突的过渡路径，或更改时机不佳的揭示。在进行有针对性的更改后，审查受影响的动效和附近的状态，而不是重新运行不相关的套件。
交付可工作的预览、可编辑资源/源代码以及关于实际验证内容的简要说明。如果请求独立的代理验证，则使用真正不同的产品/标志需求进行验证；仅复制源品牌并不能证明通用性。直接报告验证不可用的情况。
可选的工作案例
仅在需要类似的连续 SVG 故事或用户请求该案例时，阅读 tapestry-case-study.md。文件夹 assets/reference-site 包含可运行的 Tapestry 示例及其标志/字体资源。它是一个可选的工作实现，不是默认的起始布局或其他产品的品牌来源。