web-design

Name: web-design
Author: zstvns

github.com/zstvns设计与 UI3367 次安装2 天前更新

代码仓库

关于 web-design

web-design 是一项用定制代码将既定品牌视觉系统应用到网站并交付实现的设计技能，面向构建或改版网站的团队。它强调先依据现有品牌规范和页面文案，再逐段设计与开发；品牌系统尚未确定时会引导返回前置工作。

主要功能

01应用既定品牌视觉规范
02基于真实页面文案设计
03按项目技术栈编写前端
04逐段规划页面结构
05品牌未定时引导前置流程

适用场景

01将成熟品牌系统用于网站改版
02根据现有文案构建营销网站
03按项目现有框架实现页面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/zstvns/design-skills --skill web-design

安装后在 Claude Code 中输入/web-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

evals/

evals.json

references/

craft-details.md

faithful-replication.md

section-patterns.md

tooling.md

web-slop.md

详细介绍

Web 设计

你要将品牌的既定视觉系统应用到线上网站，并交付代码——用自定义代码一边设计一边构建。这是第一个应用技能：creative-direction 中的色彩角色、字体规则、视觉母题和标志性元素，将围绕真实文案转化为真正的转化页面。

请先阅读 design-principles。这个技能让其中的规则落实到浏览器中：核心任务是建立层级，克制是为了保护信息，强调对比而非竞争，“说明理由，否则采用默认值”。一张经过设计的网站与一张拼装而成的网站之间，大多数差异都体现在这里。

**在流程中的位置：**在 creative-direction（系统）和 logo-design（标志）之后，这是第一个应用技能。它使用品牌形象，但不定义品牌形象。自定义代码是实现媒介——此技能会构建定制的 HTML/CSS（以及项目已有的框架），而不是使用 Webflow 或 Framer。

前期诊断——品牌已定，还是需要重做？

首先，诊断品牌当前的状态。打开 .agents/design.md、.agents/brand.md 和 .agents/product-marketing.md——到这个阶段，**这三个文件都应该已经存在。**然后提出一个问题：

我们是在应用一个已定型的品牌，还是要从头重做？

有四种路径，使用客户常用的直白说法：

优化现有元素（“我们喜欢自己的品牌，只是网站不够好”）→ 优化。继续——这正是此技能的适用场景。
轻度创意指导（“保留名称和标志；更换字体、颜色和图形”）→ 轻度演进。只有当 design.md 已记录这些新选择时才继续；如果没有，变更内容就尚未定义 → 返回 creative-direction，先完成轻度调整。
全面重塑品牌（“全部换新”）→ 革新 → **停止并返回 creative-direction。**系统尚未定义时，不要设计网站。
大幅演进（核心系统确实要改变）→ 同样返回。

即使用户已经带着标志而来，也要返回——只有标志、没有配套系统，还不足以构建风格统一的网站；应引导他们返回。经验法则：只要视觉系统仍在定义或更改，就返回；只有系统定型后才继续。

如果缺少 .agents/design.md，这就意味着应该“返回”——尚无可应用的系统。请转到 creative-direction。如果缺少 .agents/product-marketing.md，或页面没有文案，请先转到营销资料库中的 copywriting / website-copy：网站应围绕文案构建，而不是反过来。

文案优先——系统是舞台，不是演出

最重要的输入就是文字。阅读 .agents/product-marketing.md 中的文案（受众、语气、定位和页面文案本身）。设计师的任务是恰当地突出所表达的内容，并赋予它乐趣与惊喜——而不是先搭好模板，再把文案填进空白处。先从线框图入手，是页面拼装感最明显的信号。如果文案还没写好，就先完成文案。

**页面尺寸应由内容决定，而不是由模板决定。**标题的尺寸应由文案本身决定——如果一句引子需要由第二行补全（例如逐字显示的续句、轮换短语），标题就应该更小，而不是孤零零地放在那里的超大单行标题。主视觉区域只有一句引子、没有后续内容，会显得不完整。围绕现有内容来设计；不要强行塞进固定的主视觉模板。

视觉系统服务于信息。设计服务于信息。网站是舞台；文案才是演出。

引用现有网站时，忠实还原其内容

重新设计一个线上网站，或以某个参考网站为蓝本进行构建？那就看看该网站实际上是什么样子——不要凭记忆大致还原。完整方法见 references/faithful-replication.md。

保留每个板块。 从上到下梳理源网站，并逐一保留每个板块——文案准确，顺序一致。悄悄删掉终端注册、功能介绍板块或环绕式产品视觉的“重新设计”，并不是重新设计，而是做出了另一个网站。
还原网站引导用户采取的操作。 看看网站在鼓励访客做什么，并复现相应的机制，而不只是照搬文字。如果首页主视觉邀请用户输入 URL 并获取免费方案，重新设计后的主视觉就需要这个 URL 输入框和那个按钮——页面的核心就在于这个主要操作。
使用真实素材。 集成服务和合作伙伴的 Logo 都是真实存在且可以获取的（例如 Relume 或品牌素材库、源网站自身的标记，或 simple-icons 这类品牌 SVG 来源）。使用真实 Logo——绝不要用图标加文字的替代方案，也不要使用低对比度的 Logo 条。
传达视觉内容真正表达的意思。 产品插图必须体现产品能做什么——例如，展示写作、优化、发布、研究等工作围绕 Agent 循环运转的轨道，而不是偏离重点的装饰。

你不是在为别人制作设计稿。你通过构建来设计——设计决策本身就是代码。交付真正可用于生产环境的前端：

如果项目已有技术栈，就沿用该技术栈（根据仓库惯例使用 Next.js / Tailwind / shadcn）；否则提供简洁、独立的 HTML/CSS。默认与框架无关。
不要使用 Webflow 或 Framer。 这项技能之所以存在，就是因为工作已转向自定义代码——你可以根据工艺要求尽情打磨专属标记，不受网站构建工具的限制。
生产环境中的间距使用 rem，并通过 clamp() 实现流式调整——不要使用固定 px。水平内边距按百分比设置；板块内边距采用流式设置。参见 references/craft-details.md。
只有在用户明确要求构建平台网站（Webflow/Framer）时，才交叉参考营销资源库中的 website-build-* 技能——这是本技能原本要避免的例外情况。

应用系统

从 .agents/design.md 中获取系统——不要重新推导，也不要在其基础上另行发挥：

放置锁定的 Logo；绝不要重新制作。 从 logo-design 技能生成的规范文件中获取标志——.agents/assets/logo/logo-lockup.svg（导航栏、页脚）、logo-icon.svg（网站图标、狭小空间），以及适用于深色或单色背景的 -inverse / mono 变体。这是一个锁定元素：不要自行排版字标，不要自行选择间距，不要为了匹配强调色而重新着色，不要裁剪或将其放进方框，不要缩放到小于最小尺寸，并且要留出规定的净空。如果界面需要的变体不在文件夹中，请返回 logo-design 处理——不要用 CSS 临时制作。
按角色使用颜色。 背景、文本（主要／次要）、操作／CTA、辅助色。每种颜色设五个色阶，而不是十个。使用定义好的设计令牌。
CTA 颜色应是经过审慎选择且始终如一的单一颜色——并且不能用于文本或图形。 选择一种能传达向前推进的颜色（通常是绿色或蓝色），并在所有地方将其用于主要操作。它必须与承载标题、图标和装饰的颜色在色相上明显不同，否则按钮就不够醒目，反而会融入其中。仅将其用于真正的 CTA——绝不用于标题，也绝不用作装饰性强调色。另设一种品牌强调色来承载反复出现的重点（同样要克制使用）；如果推进色开始出现在标签和图形上，它就不再代表“执行操作”。也绝不要把非交互元素设计成按钮的样子，否则虚假的 CTA 会削弱真正的 CTA。并为 CTA 采用有辨识度的形状——使用胶囊形或圆角形，而不是与所有卡片相同的方角矩形，让人一眼就能看出这是操作入口。
按角色设置字体，形成对比而非争夺注意力。 展示字体、标题字体、正文字体——各司其职。不要默认使用粗体；正文采用常规／书本字重，只在确实需要强调时使用更重的字重。标题行高为 1.1–1.3，正文行高为 1.5–1.6。次要文本应比标题采用更柔和的色调／不透明度——即使使用同一字体，也要建立层级。在整个页面中统一将正文文案改为次要文本颜色，一次性系统地完成，不要逐个区块修改（参见 references/craft-details.md → 系统地处理）。
用图案传递品牌——但在信息必须占据主导时保持克制。 将标志性元素用作纹理、图案或重复出现的细节（这正是独特性必须在实际应用中得以保留的地方——参见 design-principles）。在主视觉区域中要弱化图案： 在标题和主要操作后方使用繁杂图案，是干扰而非品牌识别。让信息和 CTA 引领视线；在后续区块中再更鲜明地融入图案。
谨慎使用眉题。 每个区块都放一个单色／大写的小标题会显得杂乱——这会抹平层级，而非建立层级。只有在区块确实需要标签时才使用眉题；大多数区块应直接以标题开篇。
根据系统意图处理层次、光线和表面过渡——使用多层阴影堆叠（而不是扁平的 shadow-md）、渐进式背景变化，以及自然形成的深浅切换，而非边界生硬的条带式区块。

逐段构建页面——让每个元素各就其位

按顺序构建页面，不要孤立地处理各个区块。每个区块的完整操作指南见 references/section-patterns.md。

明确每个区块唯一的任务，然后为承载该任务的元素留出专属空间，并根据其重要性调整尺度。定位语句要有舞台；信任背书条带要占据全宽区域，而不是挤在主视觉区的一角；主视觉对象要有聚光灯。辅助细节则应退居次要位置。
节奏是一套区块类型，而不是列数。 轮换真正不同的区块类型——每种都是不同的媒介——绝不重复使用同一种：非对称主视觉、全出血人物／视频场景、插画／对比节拍、超大格言、固定滚动叙事序列（标题固定不动，陈述语句在巨大的幽灵数字下方轮番切换——用 motion-design 来编排）、彩色卡片、聚光灯式对象展示、轮播。更换媒介（UI → 视频 → 插画 → 照片 → 卡片），而不只是更换布局。然后用一条贯穿始终的纹理和严格的色彩规范统一各种变化，运用尺度对比（幽灵数字与极小文案），并在醒目的节拍之间留出静区。失败模式是：一件乐器演奏了整首曲子——反复使用相同的卡片／面板样式，只改变列数。完整的类型词汇见 references/section-patterns.md；研究 conversionfactory.co，了解其节奏安排。
为每个文字区块搭配视觉元素。 应该配图的纯文字区块会显得不完整。像优秀的营销网站那样，用层叠、交错的模型图展示产品——设备、卡片、略微倾斜的贴纸，营造真实的纵深感，而不是只放一张平面截图或什么都不放。
整合内容。 三个充实的区块胜过五个单薄的区块。留白是强调手段，不只是呼吸空间。
CTA、徽标和悬停状态都是内容，而非装饰。 在包括悬停在内的所有状态下，主要 CTA 和次要 CTA 都要保持明确区分。合作伙伴／集成徽标应统一放在一个信任背书区域中——使用真实徽标，按视觉感知（而非像素）调整尺寸，保持统一的色彩风格，并确保对比度足够、清晰可读。

动效——延续品牌的动效特征，然后交接

动效是系统的一部分，不是最后才加上的点缀——与色彩和字体一样，其特征应当源自品牌。从 .agents/design.md 中了解动效特征和情感目标：活泼、古怪的品牌适合富有弹性、宽松且频繁的动效；严肃、高端的品牌则适合微妙、克制且少用的动效。“炫酷”并非普遍目标——把活泼品牌的动效处理得过于克制，会让它变得平庸、失去个性。切勿用通用默认风格取代品牌自身的感觉。

然后根据每个动画的作用划分工作——这就是你在这里负责的内容与 motion-design 负责的内容之间的界线：

功能性／UI 动效——在这里实现。 悬停和焦点状态、按压反馈、CTA 的状态、折叠内容和菜单的过渡、区块显现效果。这些动效各有明确用途：提供反馈、帮助定位、呈现因果关系。无论品牌多么活泼，都要保持实用性——快速、不突兀、不碍事。
表现性／叙事性动效——交给 motion-design。 精心编排的页面加载序列、固定滚动叙事节拍、具有标志性的产品视觉效果、主视觉场景，以及任何以营造感受为目的的内容专属创意。品牌个性在这里得以充分发挥，十二条原则也能在此发挥作用。

你可以先做到的基础水平

这些是营销网站最值得关注的 motion-design 规则——直接应用即可；掌握这些，无需了解整个技能：

使用一套命名缓动曲线，并以 ease-out 为主。 使用自定义曲线，而非原始的 linear（最明显的业余表现），也不要所有元素都套用同一种 ease。无论进场还是退场，采用减速至静止的效果都会更自然。
UI 过渡控制在约 300ms 以内。 悬停和按压反馈控制在 100–200ms；更慢的效果必须让人觉得值得等待。根据移动对象的体量匹配时长——小的快，大的慢。
按压反馈。 在 :active 状态下轻微缩小（约为 0.97），让界面显得有所响应。
进场动画应重叠并错开播放，不能排队。 一组元素共用时间安排，通过小幅延迟（约 40–80ms）错开，而不是每个元素都等上一个播放完。这一招就能让效果从“还行”提升到“很有质感”。
只为 transform 和 opacity 添加动画。 为 width/height/top/left/box-shadow 添加动画会触发布局或绘制，导致卡顿——这种卡顿会让作品显得廉价。
分层呈现，而非千篇一律。 所有元素都用同样的向上淡入，是一种典型的俗套做法（参考）——问题在于千篇一律，而不是动画数量。呈现承载信息的内容，其余部分保持静止。
必须支持 prefers-reduced-motion。 为每个非简单动画提供减少动态效果的方案（仅透明度变化或直接显示），并在该模式下彻底停用环境动态效果和视差效果。

当动态效果变得复杂时，选用 GSAP。 CSS transitions 和 @keyframes 适合悬停、聚焦、按压和简单的呈现效果——平台原生就能实现的效果，不必引入库。但对于流畅、复杂、经过编排的动态效果，GSAP 是目前最好的选择，而且现在完全免费（Webflow 接手后，所有插件都包含在内）：ScrollTrigger 用于滚动驱动的序列和固定定位（正好适用于上文提到的固定滚动叙事节奏），SplitText 用于错开呈现单词或行，Flip 用于共享元素或布局过渡。与手动调节 CSS 延迟相比，它的时间轴让控制重叠、错开的动画编排容易得多；在要求较高的序列中，它的插值也明显更加流畅。

完整的技艺指南——十二项原则、技术工具包、缓动和时长标记，以及动态效果俗套做法检查清单——都收录在 motion-design 中。当网站需要富有表现力的动态效果，而不只是达到合格水准时，就用它。

工具与参考资料 — 使用已连接的资源，缺失时灵活切换

使用真实工具能加快构建速度、丰富节奏，但**绝不要因缺少某个工具而停滞；应灵活切换到下一个选项。**先查看 .agents/brand.md → Toolkit，了解操作者拥有的工具（包括页面丰富媒体背后的图像生成器），并将新发现的已连接工具记录回去。图像素材来自 art-direction 库（.agents/assets/imagery/approved/）——使用其中已有的素材；任何新素材都应交由 art-direction 处理，而不是临时寻找。

Relume MCP（已连接时优先使用，可加速工作）——生成站点地图（顶层页面及父子页面）、基于其组件库生成线框图（组件库会变化布局并奠定节奏），以及生成样式指南：其基色会自动扩展为 5 个色阶的色调，并设置唯一始终用于 CTA 的颜色——以上内容都能移植到构建中。按共同格式对页面分组（所有解决方案页面采用同一结构，内容各不相同）。
frontend-design 技能——Relume 不可用时，用于打造独特、达到生产级水准的前端。
Claude Design——可选的画布探索工具，可使用已发布的系统，并将成果交接给 Claude Code；交接成果只是定制构建的起点，并非最终构建。
web-design-guidelines——用于 UX/UI 与无障碍合规检查。
Mobbin / Refero MCP——模式调研：构建某个区块前，先研究优秀网站如何处理它。
参考网站调研——引入客户欣赏的热门网站；明确指出值得借鉴和应当避免的做法。
GSAP（真实动效的首选——免费，包含所有插件）——基于时间轴编排动效，使用 ScrollTrigger（滚动序列与固定定位）、SplitText（错落显示文本）和 Flip（共享元素过渡）。简单状态使用 CSS；序列复杂或需要真正流畅时使用 GSAP。参见上方的 Motion 部分和 motion-design。
three.js / WebGL——仅当品牌确实需要大胆的 3D 效果或交互式纵深时使用（不要只为装饰而用）。

发布前验证

用审计采用的同一套严格标准检查自己的构建——以对手般挑剔的态度，在浏览器中检查渲染后的页面，而不是凭脑海中的代码来判断（参见 design-principles → 按竞争对手的标准评判自己的作品）。渲染页面、截取屏幕截图，并完成以下检查：

对照已确认的竞争对手，按审计类别评分，以对手般苛刻的标准评估创意方向、色彩、字体和布局。能得 4–5 分吗？
运行 web-slop 检查（references/web-slop.md），并列出检查发现的问题——页面上实际存在的陈词滥调（默认加粗、分段式区块、样式统一的图标网格、CTA 颜色到处泛滥、凭感觉设置的嵌套圆角）。“这里没有 slop”只是下意识的说法，不是检查结果；请列出问题，或给出有根据且具体的结论：“没有，因为——。”
**检验遮住 Logo 后品牌是否依然鲜明：**隐藏标志后，构建的页面是否仍能让人认出这是该品牌？如果独特性只体现在 Logo 上，说明设计系统并未在实际应用中延续。
**响应式与无障碍。**检查真实断点（移动端修复应作为增量覆盖，绝不能改动桌面端基础样式）。将界面交由 web-design-guidelines 进行无障碍合规检查。
**动效检查——观看动效，不要只看截图。**静态截图无法审查动效。播放页面：时序和缓动是否符合品牌个性，还是用了通用的缓动效果？是否有任何动画使用 linear、排队执行而非交叠执行，或因布局属性而卡顿？切换 prefers-reduced-motion，确认页面舒适易用。
**文案检查。**布局是否恰当地突出了文案，还是设计埋没了信息？

交付内容

已上线的网站 — 在用户的项目中交付生产级前端代码，共同设计和构建，并应用已批准的设计系统。
在 .agents/design.md 的「Application Notes」部分末尾追加内容（持续更新的记录 — 参见 creative-direction → design-doc-template.md）：记录采用的组件约定、实际使用的设计令牌、设计系统有所调整的地方，以及这些调整是否已成为规范；注明日期，让后续页面和 collateral-design 能沿用已有决策，而不是重新推导。不要重复创建设计系统的基础章节 — 引用这些章节即可。