【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载导读本文围绕 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 的设计决策逐条编码为可执行指令可以拆解成四层要求层次指令要点demo 源码中的对应证据页面外壳近黑底、边缘紧凑胶囊导航、居中 wordmark、占满首屏的战役 hero--black:#10100f、.nav使用grid-template-columns:1fr auto 1fr让左右导航组 居中 wordmark 三列对齐.pill为border-radius:99px的胶囊按钮Herowordmark 达到海报牌billboard尺度、压在原创意抽象编辑图像上、定位语保持小字号、首个项目恰好落在首屏折线之下.hero h1使用font-size:clamp(88px,16vw,220px)与mix-blend-mode:difference.heroCopy限制为max-width:240px、13px 小字.hero的min-height:700px保证项目章节在折叠线以下项目章节柔和的薰衣草紫章节、超大标题、紧凑元数据、明确项目动作、方形媒体hover/键盘 focus 时媒体层仅缩放到1.02静止时标题与动作始终可见--lavender:#ada4cf作为项目章节底色.project h2使用clamp(70px,10vw,146px).projectLink带下边框与 ↗ 图标.projectMedia:after的transform:scale(1.03)在 hover 时收回到scale(1)即媒体层仅约 3% 的缩放幅度动效与无障碍160–220ms 控件反馈、500–760ms 章节揭示、浅变换、不劫持滚动响应式移动端、可见焦点、语义化标题、有意义的图片替代文本、reduced-motion 回退仅使用本地 HTML/CSS/JS 与原创抽象素材demo 中transition:transform .6s约 600ms与cubic-bezier(.22,.61,.36,1)media(max-width:760px)重构移动端media(prefers-reduced-motion:reduce)关闭变换与平滑滚动aria-labelledby、roleimgaria-label提供语义与替代文本值得强调的两条硬性约束在源码中都能一一验证on hover and keyboard focus, scale only the media layer to1.02demo 用:hover与:focus-within双选择器覆盖鼠标与键盘焦点且缩放对象是伪元素:after媒体层而非标题或动作静止状态下project h2与projectLink始终在文档流中可见可点——这与 SKILL.md 中 Keep every panel understandable when static静止时每个面板必须可理解的规范严格对应Use only local HTML, CSS, JavaScript, and original abstract assetsdemo 不依赖任何 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}三处细节值得注意clamp(88px,16vw,220px)wordmark 在 320px 宽移动端仍有 88px 底线在宽屏下可达 220px正是 billboard scale 的实现手段letter-spacing:-.09em与line-height:.72营造紧密的编辑式字标观感mix-blend-mode:difference超大标题与背景抽象图像以差值混合呈现实现文字压图但始终可读的效果属于纯 CSS 的克制手法抽象图像完全由 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.mdMara Voss Interaction Prompt Pack。它从一份真实参考模板Mara Voss Field Recordist Portfolio中提炼出12 个可移植的交互系统每个都附带截图证据、核心思想、技术选型、实现要点、交互方式与验收标准共用一个共享构建护栏Shared Build Guardrails。12 个系统分别是信号采集加载器 → 解码后的 Hero先播放紧凑的读数条与进度线再按字符序列解码标题加载器aria-hiddentrue锁滚动仅发生在关键字体与首屏媒体就绪期间并带失败安全超时分门式 Hero 交接 → 反差章节Hero 表面作为两扇门滚动时内容先淡出、出现中央细缝、两扇门外滑露出下方章节推荐 GSAP ScrollTrigger 可逆时间线或原生position:sticky替代方案钉住的传记 逐词点亮章节钉住期间段落从模糊低透明度逐词变清晰仅在已授权时使用 SplitText否则用aria-label保留可访问句子的前提下逐词包裹速度响应的档案跑马灯 擦洗播放器滚动方向反转跑马灯行进方向、速度短暂加速经过中心指针的条目提升透明度与可变字重下方同一时间线驱动大媒体记录切换全屏章节擦拭 计时账本ledger保留上一章节全屏墨色面板横扫覆盖随后按遮罩序列揭示带时间戳的行与证据卡片钉住的非对称计数器索引每个指标拥有自己的尺度与列位钉住序列中依次绘制规则线、揭开数字、计数到真实值展示值从data-*属性格式化可访问文本保留终值粘性录音堆栈 加权观看节拍以 CSSposition:sticky构建全视口媒体章节堆叠被覆盖的板轻微回缩、变暗、软化以营造深度快轮输入时给每章一个短暂停留但不形成滚动陷阱钉住目录 光学检查灯一套低饱和静置的记录架一道径向渐变检查灯逐件扫过被照亮的作品抬升、恢复颜色与对比度光学索引同步更新对立证据板 → 纸面到黑场溶解两枚证据板从两侧进入、中央陈述锐化完成后整个章节在黑场下软化无缝衔接下一暗场景暗房图像解析 延迟判定低对比照片从黑场中缓慢显影状态字符逐个揭示随后两级标题与元数据落地钉住野外记录 单一活动记录紧凑的野外日志钉住焦点逐条移动当前记录轻微放大、缩略图放大、印章清晰化其余条目低对比保留页脚信号绽放 磁性 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 LayerUse 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 的 AgentCodex、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 仓库中作为以作品为先作品集方案的价值所在。赞分享【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载相关推荐Hallmark 的 Portfolio Grid 宏结构用「作品即产品」的可过滤网格打造工作室式作品集首页Hallmark 的 Portfolio Grid 宏结构用「作品即产品」的可过滤网格打造工作室式作品集首页 导读 本文深入讲解 Hallmark面向 CAI 技能前端AI 评测portfolio展示个人作品的创意平台portfolio展示个人作品的创意平台 在数字时代个人作品集Portfolio已成为设计师、开发者和创意工作者展示专业技能的重要窗口。一个精心设计的p前端Skills 仓库实战用 GSAP ScrollTrigger 构建电影级滚动叙事产品页Skills 仓库实战用 GSAP ScrollTrigger 构建电影级滚动叙事产品页 本指南以 gsap scrolltrigger storytelli上一篇Snow-Shot截图工具用户体验优化实践下一篇如何用Foundry Local构建RAG系统本地知识库AI问答终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
` 的声明式请求校验：express-validator 模式化验证完全指南)
