企业官网建设流程全解析

导读：本文围绕 Skills 仓库中agent-skills/web-design/editorial-portfolio-chapters技能（下称"编辑式作品集章节"技能）展开，讲解如何用一套可复用的设计语言与交互规范，把创意工作室、代理机构、摄影师或艺术家主页组织成一连串"杂志封面"式的编辑章节：作品先说话、服务作为交接、联系方式收尾。读者读完既能拿到可直接复刻的提示词（Prompt）与完整风格规范，也能掌握其落地 demo 的源码级实现细节，以及一套可复用到任意品牌之上的"交互提示包"（Interaction Prompt Pack）。

一、技能定位：什么是"编辑式作品集章节"

在 Skills 仓库的 web-design 分类中，editorial-portfolio-chapters是一个专门面向creative-studio（创意工作室）、agency（代理机构）、photographer（摄影师）、artist（艺术家）等作品集类网站的生成技能。它的核心主张是：把页面当作一系列彼此独立的"编辑章节"来构建，让作品先建立渴望，再介绍工作室本身——而不是常见的"先放 Logo 与团队介绍，再罗列案例卡片"的模板化结构。

从 SKILL.md 的技能元信息可以看出其适用范围：

Create or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story. Use for dark editorial shells, full-bleed campaign media, color-coded case-study chapters, oversized service typography, restrained project reveals, and a decisive contact finale.

这段描述圈定了技能的六个关键词：深色编辑外壳、通栏（full-bleed）战役媒体、按颜色编码的案例章节、超大号服务排版、克制的项目揭示动效、以及果断的收尾联系方式。技能在仓库中的落地形态包括：

• SKILL.md：核心生成规范（叙事结构、视觉系统、页面构成、交互实现、动效默认值、验证清单）；
• demo/PROMPT.md：三种提示词（minimal / recreate / remix），是本文的关联文档主体；
• demo/index.html：可独立运行的单文件演示页（Morrow 工作室示例）；
• ARTICLE.md：名为 "Mara Voss Interaction Prompt Pack" 的进阶交互提示包，收录 12 个可移植的交互系统；
• agents/openai.yaml：面向 Agent 的接口描述（默认提示词为 "design an original studio portfolio where project work leads the story"）。

二、三种提示词：从最小复刻到品牌重混

关联文档 demo/PROMPT.md 将技能的用法浓缩为三个梯度的提示词，覆盖"从零生成—复刻品质—品牌重混"三种场景。

1. Minimal prompt：最小提示，从零生成

Use $editorial-portfolio-chapters to create an original responsive creative-studio portfolio where the work leads, each project feels like an editorial chapter, and a decisive contact section completes the story.

这是面向 Agent 的最低输入量提示词：只声明三个硬性要求——作品引领叙事、每个项目像编辑章节、联系方式作为故事的决断性收尾。$editorial-portfolio-chapters的引用方式与 agents/openai.yaml 中default_prompt的意图一致：Agent 读到该技能名后，会依据 SKILL.md 的完整规范自动展开设计。此提示适合首次探索技能，输出自由度最高。

2. Recreate the demo：复刻演示的品质与行为

Use $editorial-portfolio-chapters to recreate the design quality and behavior of the included Morrow studio demo as a complete standalone `index.html`. Build a near-black page with compact pill navigation at the outer edges, a centered wordmark, and a mostly full-viewport campaign hero. Set the wordmark at billboard scale over an original abstract editorial image. Keep the positioning line small and place the first selected project just below the fold. Continue into a muted lavender project chapter. Use an oversized title, compact project metadata, a clear project action, and square media. On hover and keyboard focus, scale only the media layer to `1.02`; keep the title and action visible at rest. Use a 12-column logic, restrained radii, hairline rules, almost no shadow, and strong black-to-color section cuts. Keep motion slow and editorial: 160–220ms control feedback, 500–760ms reveals, shallow transforms, and no scroll hijacking. Add a responsive mobile composition, visible focus, semantic headings, meaningful image alternatives, and a reduced-motion fallback. Use only local HTML, CSS, JavaScript, and original abstract assets.

这一提示词实质上把 demo/index.html 的设计决策逐条编码为可执行指令，可以拆解成四层要求：

值得强调的两条硬性约束，在源码中都能一一验证：

• "on hover and keyboard focus, scale only the media layer to1.02"：demo 用:hover与:focus-within双选择器覆盖鼠标与键盘焦点，且缩放对象是伪元素:after媒体层而非标题或动作，静止状态下project h2与projectLink始终在文档流中可见可点——这与 SKILL.md 中 "Keep every panel understandable when static"（静止时每个面板必须可理解）的规范严格对应；
• "Use only local HTML, CSS, JavaScript, and original abstract assets"：demo 不依赖任何 CDN 库，所有装饰图像均用 CSSlinear-gradient与radial-gradient合成，符合技能 "avoid copying source imagery" 的反抄袭底线。

3. Remix prompt：品牌重混

Use $editorial-portfolio-chapters and the included demo as the quality bar, but replace the studio, words, project subjects, palette, imagery, and contact story. Preserve the work-first narrative, full-bleed hero restraint, color-coded project chapters, oversized service handoff, equivalent hover and focus cues, responsive behavior, and reduced-motion support. Do not copy the Morrow identity or any source brand.

Remix 提示词定义了一条清晰的边界：结构可继承，品牌须原创。需要保留的是叙事骨架（作品优先叙事、通栏 hero 的克制、按颜色编码的项目章节、超大号服务交接、对等的 hover/focus 提示、响应式行为、reduced-motion 支持）；必须替换的是所有品牌表层（工作室名、文案、项目主题、调色板、图像、联系方式故事）。"Do not copy the Morrow identity or any source brand" 与 SKILL.md 中 "Replace all source brands, projects, people, claims, images, labels, and links with original or client-provided content. Preserve pacing and hierarchy, not source content." 一脉相承，也和 ARTICLE.md 结尾的 "Treat every screenshot here as motion evidence, not a style specification" 共同构成技能的原创性护栏。

三、复刻 demo 的源码级解读

3.1 全局令牌与页面外壳

demo 在:root中一次性定义了整套设计令牌：

:root{ --black:#10100f; /* 近黑外壳 */ --paper:#f3f0e8; /* 暖白文本 */ --pink:#f4a9c7; /* 备用章节色 */ --lavender:#ada4cf;/* 薰衣草紫章节色 */ --lime:#b9cf79; /* 备用章节色 */ --line:rgba(255,255,255,.24); /* 发丝线 */ font-family:Arial,Helvetica,sans-serif; color:var(--paper);background:var(--black) }

这与 SKILL.md "Build the Visual System" 的规范一一对应：近黑帧（--black）+ 暖白（--paper）+ 每项目一个低饱和色域（--lavender），配色克制且留白充足。.nav采用grid-template-columns:1fr auto 1fr，把两个胶囊导航组与居中的wordmark固定在一条线上，即 PROMPT.md 所说的 "compact pill navigation at the outer edges, a centered wordmark"。

3.2 Hero：海报牌尺度的 wordmark

.hero{position:relative;min-height:700px;padding:86px 28px 28px} .heroArt{position:absolute;inset:74px 13% 30px;overflow:hidden; background:linear-gradient(115deg,#d46c47 0 24%,#202b42 24% 44%,#9cb0c2 44% 65%,#292b24 65%)} .hero h1{position:absolute;z-index:2;top:45%;left:3%;width:94%;margin:0; font-size:clamp(88px,16vw,220px);line-height:.72;letter-spacing:-.09em; text-align:center;mix-blend-mode:difference}

三处细节值得注意：

1. clamp(88px,16vw,220px)：wordmark 在 320px 宽移动端仍有 88px 底线，在宽屏下可达 220px，正是 "billboard scale" 的实现手段；letter-spacing:-.09em与line-height:.72营造紧密的编辑式字标观感；
2. mix-blend-mode:difference：超大标题与背景抽象图像以差值混合呈现，实现"文字压图"但始终可读的效果，属于纯 CSS 的克制手法；
3. 抽象图像完全由 CSS 渐变合成：heroArt:before用多个radial-gradient光斑加一道 28 度高光条带构成抽象编辑构图，hover 时整体transform:scale(1.03)缓慢回正——既满足 "original abstract editorial image"，又让整页保持零图片请求。

3.3 项目章节：色彩编码 + 媒体层轻缩放

.project{display:grid;min-height:680px;grid-template-columns:1.15fr .85fr; padding:28px;background:var(--lavender);color:var(--black)} .project h2{max-width:8ch;margin:0;font-size:clamp(70px,10vw,146px); line-height:.78;letter-spacing:-.08em} .projectMedia:after{...;transform:scale(1.03);transition:transform .6s cubic-bezier(.22,.61,.36,1)} .project:hover .projectMedia:after,.project:focus-within .projectMedia:after{transform:scale(1)}

项目章节以--lavender全底展开，与近黑外壳形成 "strong black-to-color section cuts" 的硬切分。章节内采用1.15fr .85fr两列：左列projectMeta（章节序号 "Selected work · 01 / 04"、超大标题After Light、带下划线与 ↗ 的projectLink），右列projectMedia方形媒体。hover 与:focus-within时媒体层仅从scale(1.03)收敛到scale(1)，即至多约 3% 的浅变换——PROMPT.md 中 "scale only the media layer to 1.02" 的意图与 SKILL.md "scale media no more than 1.02" 在此统一实现。

需要指出的是，demo 仅展示了第一个项目章节（#work），#services、#studio、#contact三节以语义占位<section>存在，完整的"服务交接—工作室叙事—联系方式"三幕由 Agent 依据提示词自行生成。

3.4 响应式与 reduced-motion 回退

@media(max-width:760px){ .nav{grid-template-columns:1fr auto} .navGroup:first-child{display:none} .hero{min-height:620px} .hero h1{top:42%;font-size:25vw} .project{grid-template-columns:1fr;gap:28px} .projectMeta{min-height:390px}.projectMedia{min-height:420px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .heroArt:before,.projectMedia:after{transition:none;transform:none} }

移动端 760px 断点下：导航收敛为"wordmark + 右侧胶囊组"两列；hero 与项目章节改为单列纵向流动；媒体与元数据各自获得最小高度以避免折叠。prefers-reduced-motion下直接关闭所有变换与平滑滚动——与 PROMPT.md "a reduced-motion fallback" 以及 SKILL.md "render immediately under reduced motion" 的要求完全一致。

四、纵深扩展：从页面到可移植的交互系统

demo/PROMPT.md 只定义了"页面级"的生成要求；仓库还配套了一份把交互系统从单个页面中剥离出来的进阶材料——ARTICLE.md（Mara Voss Interaction Prompt Pack）。它从一份真实参考模板（Mara Voss Field Recordist Portfolio）中提炼出12 个可移植的交互系统，每个都附带截图证据、核心思想、技术选型、实现要点、交互方式与验收标准，共用一个"共享构建护栏"（Shared Build Guardrails）。12 个系统分别是：

1. 信号采集加载器 → 解码后的 Hero：先播放紧凑的读数条与进度线，再按字符序列解码标题；加载器aria-hidden="true"，锁滚动仅发生在关键字体与首屏媒体就绪期间，并带失败安全超时；
2. 分门式 Hero 交接 → 反差章节：Hero 表面作为两扇"门"，滚动时内容先淡出、出现中央细缝、两扇门外滑，露出下方章节；推荐 GSAP ScrollTrigger 可逆时间线或原生position:sticky替代方案；
3. 钉住的传记 + 逐词点亮：章节钉住期间段落从模糊低透明度逐词变清晰；仅在已授权时使用 SplitText，否则用aria-label保留可访问句子的前提下逐词包裹；
4. 速度响应的档案跑马灯 + 擦洗播放器：滚动方向反转跑马灯行进方向、速度短暂加速；经过中心指针的条目提升透明度与可变字重；下方同一时间线驱动大媒体记录切换；
5. 全屏章节擦拭 + 计时账本（ledger）：保留上一章节，全屏墨色面板横扫覆盖，随后按遮罩序列揭示带时间戳的行与证据卡片；
6. 钉住的非对称计数器索引：每个指标拥有自己的尺度与列位，钉住序列中依次绘制规则线、揭开数字、计数到真实值；展示值从data-*属性格式化，可访问文本保留终值；
7. 粘性录音堆栈 + 加权观看节拍：以 CSSposition:sticky构建全视口媒体章节堆叠，被覆盖的板轻微回缩、变暗、软化以营造深度；快轮输入时给每章一个短暂停留但不形成滚动陷阱；
8. 钉住目录 + 光学检查灯：一套低饱和静置的记录架，一道径向渐变"检查灯"逐件扫过，被照亮的作品抬升、恢复颜色与对比度，光学索引同步更新；
9. 对立证据板 → 纸面到黑场溶解：两枚证据板从两侧进入、中央陈述锐化，完成后整个章节在黑场下软化，无缝衔接下一暗场景；
10. 暗房图像解析 + 延迟判定：低对比照片从黑场中缓慢显影，状态字符逐个揭示，随后两级标题与元数据落地；
11. 钉住野外记录 + 单一活动记录：紧凑的"野外日志"钉住，焦点逐条移动，当前记录轻微放大、缩略图放大、印章清晰化，其余条目低对比保留；
12. 页脚信号绽放 + 磁性 CTA、光标与进度层：软信号绽放生长在两行判语后，主 CTA 仅在标题完成后出现；用 GSAPquickTo实现指针跟随的磁性偏移，配合双元素光标与总滚动进度条。

4.1 两个有代表性的系统：钉住传记与磁性页脚

以第 3 个系统"Pinned Biography With Word-by-Word Illumination"为例，其核心约束是：

Use SplitText only when it is already licensed and available; otherwise wrap words once while preserving the original accessible sentence witharia-label. Use ScrollTrigger or a native scroll-progress calculation to map the word index to section progress.

即：文本逐词点亮必须以可访问性为前提——要么用已授权的 SplitText，要么用aria-label保留完整句子后逐词包裹，且字词索引与滚动进度通过单一时间线映射，反向滚动时逐词逆向变暗而不重排文本，选择、缩放、屏幕阅读器顺序全程不受影响。

再看第 12 个系统"Footer Signal Bloom, Magnetic CTA, Cursor, and Progress Layer"：

Use GSAP for the footer timeline andquickTosetters for pointer-following transforms. Use a real link or button for the CTA, two fixed pointer elements for the cursor, and a transform-scaled progress rule driven by total scroll progress. ... Disable custom cursor and magnetic movement for coarse pointers and reduced motion.

它把"收尾联系方式章节"落实为可测量的行为契约：磁性偏移仅在精细指针下生效、粗指针与 reduced-motion 一律禁用自定义光标与磁性、CTA 始终是真实的语义控件、进度层不得拦截输入——这正好回应了 PROMPT.md 中 "a decisive contact section completes the story" 的收尾要求。

4.2 共享构建护栏：多系统共存的前提

ARTICLE.md 在 12 个系统之后给出了 6 条跨系统护栏，它们是本技能在复杂页面落地的关键：

• DOM 就绪后再初始化动效；脚本若必须放在<head>，用defer或等待DOMContentLoaded（这条来自真实事故：参考导出把编排脚本放在<head>，会在.marquee存在之前执行，从而把页面困在加载器后并从getBoundingClientRect()抛错）；
• 只保留一个滚动指挥者：若引入 Lenis 平滑滚动，须与 ScrollTrigger 同步，避免多套动画时钟竞争；
• 桌面端钉住（pin）必须可选：触屏、小屏、reduced-motion、脚本失败、浏览器历史恢复都必须能渲染出完整页面；
• 字体与关键媒体稳定、断点变化、动态内容变化后都要刷新测量；
• 组件卸载或路由变化时清理时间线、跑马灯、观察器与指针监听器；
• 把每张截图当作"动效证据"而非"样式规范"，替换参考中的名称、措辞、图像、数字声明与联系方式。

五、验证清单与"避免"清单

无论是按 Minimal 还是 Recreate 提示词生成，SKILL.md 都要求以可验证的方式收尾，对应 PROMPT.md 中 "visible focus, semantic headings, meaningful image alternatives" 的可访问性要求：

• 确认逻辑化的标题层级、可见焦点、有意义的 alt 文本，并检查每一次颜色变化处的对比度；
• 测试键盘、触摸、200% 缩放、窄屏移动端、慢媒体、媒体缺失与 reduced-motion 场景；
• 确认动画播放前案例研究即可读、且没有对源内容进行轻度改写；
• 证据不可得时，移除编造的奖项、客户、成果与声明。

同时必须回避五类常见错误：先介绍工作室再展示作品；每个章节重复相同的圆角卡片；快速的卡片编排、大尺度视差或装饰性动效循环；把项目标题与动作隐藏到 hover 之后；以及抄袭源图像、品牌措辞、项目名或客户声明。

六、在 Skills 仓库中的定位与使用方式

editorial-portfolio-chapters隶属于 web-design 技能组，与仓库中其他作品集/落地页类技能（如 landing-page、pricing-page、agency-grid-layout-minimal）同属"创意站点生成"方向，但它的差异化在于"章节叙事 + 色彩编码 + 编辑式动效"这一套自洽体系。

典型使用路径为：在支持 Skills 的 Agent（Codex、Claude、Cursor 等）中，以$editorial-portfolio-chapters引用本技能，再叠加 demo/PROMPT.md 中的 Minimal 或 Remix 提示词；若追求更高的动效复杂度，则以 ARTICLE.md 的 12 个交互系统作为逐章实现的"点子库"，按 Shared Build Guardrails 组合使用。复现演示只需打开 demo/index.html（本地直接打开即可，零外部依赖），演示预览图见 demo/preview.jpg。

七、小结

编辑式作品集章节的本质，是把"作品集网站"重新定义为一场由章节推进的叙事：近黑外壳建立冷静基调，每个案例章节像一期新杂志封面一样以独立色域展开，超大服务排版完成从证据到联系方式的交接，最后以高对比联系方式章节决断收尾。配合 demo 的源码级实现（CSS 渐变合成抽象图像、clamp()超大排版、3% 以内的媒体层缩放、双断点响应式与 reduced-motion 回退）以及 ARTICLE 的 12 个可移植交互系统，这套技能既可以一键复刻演示品质，也可以安全地重混成任何原创品牌——这正是它在 Skills 仓库中作为"以作品为先"作品集方案的价值所在。