以下为本文档的中文说明ai-designer-portfolio 是一个专业的设计师作品集落地页生成技能用于创建高端单页创意工作室/设计师作品集网站。它基于”Viktor Oddy“创意工作室模板产生纯白背景的 premium 单页设计。页面包含多个精心设计的视觉模块衬线字体强调的英雄区域、无限 GIF 跑马灯、视差效果推荐语、双卡片定价方案、自动滚动推荐语轮播、垂直项目展示区、鼠标轨迹追踪的合作按钮、以及固定的浮动底部导航栏。该技能的核心工作方式是提供一份完整的参考实现文件 example.html开发者只需复制该文件并调整文案和数据内容无需重写 CSS 或发明新的视觉语言。参考文件中已经编码了精确的视觉标记、字体、区块顺序、动画效果、按钮阴影和响应式行为。使用场景包括独立设计师或创意工作室需要快速搭建专业的线上作品集设计机构需要展示过往项目案例自由职业者需要创建个人品牌页面以及任何需要高端视觉呈现的创意类个人网站。该技能的特点在于完整的现成参考实现开发者只需做内容层面的修改预设的高端视觉设计语言无需额外设计投入所有样式和交互效果均已内联在单个 HTML 文件中部署简单固定但不失灵活的设计约束确保输出质量始终如一。对于不擅长前端开发的设计师来说这个技能可以大幅降低创建个人作品集网站的技术门槛。AI Designer Portfolio — “Viktor Oddy” Creative Studio LandingProduce a premiumsingle-page creative-studio landing pageon awhite background throughout. A complete, rendered reference implementation ships beside this skill atexample.html—start from it. Copyexample.html, then adjust copy and data only; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, fonts, section order, animations, button shadows, and responsive behavior described below.This is the authoritative build brief. Follow it exactly — the named colors, button shadows, fonts, section order, asset URLs, and animations are locked.StackDefault output: the single self-containedexample.htmlseed. It already includes everything inline.If the user explicitly asks for a React TypeScript Vite Tailwind project, port the seed faithfully into the file structure below. Same tokens, same markup structure,lucide-reactfor icons. Do not change the design while porting.src/App.tsx — hero, marquee, section composition src/components/Button.tsx — primary/secondary/tertiary variants src/components/TestimonialSection.tsx — quote parallax image src/components/PricingSection.tsx — two pricing cards src/components/TestimonialCarousel.tsx — auto-scrolling cards src/components/ProjectsSection.tsx — project showcase src/components/PartnerSection.tsx — mouse-trail CTA src/components/Footer.tsx src/components/CopyrightBar.tsx src/components/BottomNav.tsx src/hooks/useInViewAnimation.ts — IntersectionObserver scroll-trigger src/index.css — font faces, marquee fade-in-up keyframesFonts — lockedTwo custom fonts viafont-face:font-face{font-family:PP Neue Montreal;src:url(https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf)format(opentype);font-weight:400;font-display:swap;}font-face{font-family:PP Neue Montreal;src:url(https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf)format(opentype);font-weight:500;font-display:swap;}font-face{font-family:PP Mondwest;src:url(/PPMondwest-Regular.woff2)format(woff2);font-weight:400;font-display:swap;}Body default: PP Neue Montreal with system fallbacks.Serif accent: PP Mondwest — used for the logo, the highlighted words inside headings (“next wave”, “bold way.”, “Apple”, “builders”), project names, the partner heading, and the “V” / “Viktor Oddy” wordmarks.The seed also loads free near-equivalent web fonts (Space Grotesk / IBM Plex Mono / DM Serif Display) so the page renders cleanly when the commercial fonts are unreachable. Keep that fallback link — the realfont-facedeclarations win when reachable. Tagline uses amonospacefont.Color palette — locked--dark: #051A24 (primary dark, hero logo/heading, dark pricing card, buttons) --dark-2: #0D212C (secondary dark, large headings) --light-on-dark: #F6FCFF (text on dark) --light-on-dark-2:#E0EBF0 (muted text on dark) --body: #051A24 (body text) --muted: #273C46 (muted text, quote author) background: #ffffff throughoutProject descriptions usergba(5,26,36,0.7). Do not introduce other accent hues — there is no colored accent; the design is a near-monochrome dark-on-white.Button shadows — critical for the design feelPrimary: 0 1px 2px 0 rgba(5,26,36,0.1), 0 4px 4px 0 rgba(5,26,36,0.09), 0 9px 6px 0 rgba(5,26,36,0.05), 0 17px 7px 0 rgba(5,26,36,0.01), 0 26px 7px 0 rgba(5,26,36,0), inset 0 2px 8px 0 rgba(255,255,255,0.5) Secondary: 0 0 0 0.5px rgba(0,0,0,0.05), 0 4px 30px rgba(0,0,0,0.08) Card: 0 4px 16px rgba(0,0,0,0.08)Primarybutton:bg #051A24, white text,rounded-full,padding 12px 28px, the multi-layer primary shadow incl. the inset highlight.Secondary: white bg,#051A24text, no border, secondary shadow.Tertiary: white bg, combined secondary card shadow (used for Custom Project “Start a chat”).Section order (exact)Hero— centered narrow columnmax-width:440px,padding:48px 24px 0(pt-12 md:pt-16).Logo “Viktor Oddy” inPP Mondwest serif,32 / 40 / 44px, weight 600,#051A24, tracking-tight,mb-4, delay.1s.Tagline “The creative studio of Viktor Oddy” inmonospace,text-xs md:text-sm,#051A24,mb-2, delay.2s.Heading two lines: “Build the next wave,” / “the bold way.” with“wave,”and“bold way.”in serif.32 / 40 / 44px,leading-[1.1],#0D212C, tracking-tight,whitespace-nowrap, delay.3s.Description: three paragraphs inflex-col gap-6,text-sm md:text-base,#051A24,leading-relaxed,mt-5 md:mt-6, delay.4s. (1) “I spent seven years at Apple…”, (2) “The studio is deliberately small…”, (3) “Projects start at $5,000 per month.”Two buttons inflex-col sm:flex-row, gap 3/4,mt-5 md:mt-6, delay.5s: “Start a chat” (primary) “View projects” (secondary).Infinite marquee— full width,mt-16 md:mt-20 mb-16. 8 GIFsduplicated (16 total)in a flex row,animate-marqueetranslateX(0) → translateX(-50%),30s linear infinite desktop / 10s mobile. Imagesh-[280px] md:h-[500px],object-cover,mx-3,rounded-2xl,shadow-lg. URLs (keep as remote — stable motionsites CDN):https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-space-voyage-preview-eECLH3Yc-475920.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-portfolio-cosmic-preview-BpvWJ3Nc-89ab29.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-velorah-preview-CJNTtbpd-626d83.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-asme-preview-B_nGDnTP-7fb29d.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-transform-data-preview-Cx5OU29N-910cf9.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-aethera-preview-DknSlcTa-097fee.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-orbit-web3-preview-BXt4OttD-f84442.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-nexora-preview-cx5HmUgo-d2d4a4.gifTestimonial quote—py-12 px-6,max-w-2xl, centered.lucideQuoteiconw-6 h-6 text-slate-900, delay.1s.Large quote “I leftAppleto build the studio I always wanted to work with” (“Apple” serif),32 / 40 / 44px,leading-[1.1],#0D212C, tracking-tight, delay.2s.Author “Viktor Oddy” italic,text-sm,#273C46, delay.3s.Three text logos: “Apple” (80px / 24px), “IDEO” (83px / 24px), “Polygon” (110px / 24px),font-medium text-slate-900, delay.4s.Parallax imagebelow:w-full max-w-xs rounded-2xl shadow-lg, alt “Chris Halaska”, delay.5s. Keep this URL (stable higgs CDN):https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hf_20260330_103804_7aa5494f-4d5b-432e-9dc7-20715275f143-069da9.webpw1280q85Parallax IntersectionObserver passive scroll listener withrequestAnimationFrame, max offset 200px.Pricing— full width,py-12 px-6. Two cardsgrid-cols-1 md:grid-cols-2 gap-8, right-aligned on desktop (md:justify-end md:max-w-4xl, containermargin-left:auto). Eachrounded-[40px],pl-10 pr-10 md:pr-24 pt-3 pb-10.Card 1 (dark), delay.1s:bg #051A24, inset shadow, text#F6FCFF / #E0EBF0. Title “Monthly Partnership” (22px, medium). Desc “A dedicated creative design team. / You work directly with Viktor.” Price “$5,000” (text-2xl,#F6FCFF) “Monthly”. Buttons “Start a chat” (primary) “How it works” (secondary), both →https://halaskastudio.com/./book.Card 2 (light), delay.2s:bg white, card shadow. Title “Custom Project” (22px, medium). Desc “Fixed scope, fixed timeline. / Same team, same standards.” Price “$5,000” (text-2xl,#0D212C) “Minimum”. One button “Start a chat” (tertiary).Testimonial carousel— full width,py-20. Header row (md:max-w-4xl md:ml-auto): title “Whatbuilderssay” (“builders” serif, large heading size) left; right 5 filled blackStaricons (w-5 h-5 fill-black) “Clutch 5/5”. Auto-scroll3s interval, pauses on hover, prev/next circular buttons (w-12 h-12 rounded-full border border-[#0D212C]/20, lucideChevronLeft/ChevronRight). Cards427.5px wide desktop(full width minus 48px mobile),gap-6, exit anim (opacity fade scale down). Each card:bg-white rounded-[32px] md:rounded-[40px], card shadow,px-6 md:pl-10 md:pr-24 py-8. Content: custom SVG quote mark, quote text (text-base #0D212C leading-relaxed), author row with circular avatar (w-12 h-12), name (font-semibold text-sm), role with→arrow prefix.Testimonials tripled for infinite scroll; transformcubic-bezier(0.4,0,0.2,1)0.8s.Marcus Anderson — CEO, Data.storagealexwu — Founder, NexgateJames Mitchell — VP Product, LaunchPadRachel Foster — Co-founder, Nexus LabsDavid Zhang — Head of Design, Paradigm LabsProjects—max-w-[1200px] px-6 py-12, vertical stack of 3,gap-16 md:gap-20. Each: text block offset left (ml-20 md:ml-28) with project name inserif(text-2xl md:text-3xl, weight 600,#051A24) description (text-sm md:text-base,#051A24/70); full-width image below (rounded-2xl shadow-lg object-cover). Each item fades in independently via IntersectionObserver.“evr” — “From idea to millions raised for a web3 AI product” —…/hero-evr-ventures-preview-DZxeVFEX.gif“Automation Machines” — “Streamlining industrial automation processes” —…/hero-automation-machines-preview-DlTveRIN.gif“xPortfolio” — “Modern portfolio management platform” —…/hero-xportfolio-preview-D4A8maiC.gifPartner— full width,py-12 px-6. Large white containermax-w-7xl py-48 rounded-[40px]subtle shadow. On mouse hover, GIF thumbnails (from the marquee array)spawn at cursorwith random rotation (−10…10°), fade out over1000mswith scale-down, spawn no faster thanevery 80ms, cleaned up via timeout/rAF. Centered heading “Partner with us” inserif,48 / 64 / 80px,#0D212C,mb-12. CTA dark pill with circular avatar “Start chat with Viktor”, primary shadow.Footer—py-12 px-6 max-w-[1200px], flex row (md:flex-row). Left: “Start a chat” primary button. Right: lucideArrowUpRight, then two columns: (1) Services, Work, About (anchors); (2) x.com, LinkedIn (target_blank). Linkstext-base #051A24 hover:opacity-70.Copyright bar—max-w-[1200px] px-6 py-4, flexjustify-between: “Vortex Studio Limited” left, “Austin, USA” right.text-sm #051A24.Fixed bottom nav—z-50, fixedbottom-6, centeredleft-1/2 -translate-x-1/2. White bg,rounded-full,px-8 py-2, primary layered shadow. Contains “V” in serif (text-2xl, weight 600,#051A24) “Start a chat” primary button.Animations — lockedkeyframesfadeInUp{0%{opacity:0;transform:translateY(30px);}100%{opacity:1;transform:translateY(0);}}.animate-fade-in-up{animation:fadeInUp 0.8s ease-out forwards;opacity:0;}keyframesmarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}All sections use auseInViewAnimationhook (IntersectionObserver threshold 0.1, triggers once). Elements getanimate-fade-in-upwhen in view, otherwiseopacity-0. In the vanilla seed this is one IntersectionObserver that toggles an.in-viewclass on.revealelements.Each element within a section carries astaggeredanimationDelay(0.1s, 0.2s, 0.3s, …).Parallax: passive scroll listener requestAnimationFrame, max ±200px offset.Partner mouse-trail:mousemovehandler throttled to 80ms, random rotation, 1s fadescale-down, removed on timeout.Avatars (critical)example.htmlships every avatar as aninlineddata:image/svgxml;base64,…URIgenerated from initials (colored circle letters) — keep that approach. The prompt mentions Pexels avatars; donotfetchi.pravatar.cc,api.dicebear.com, Pexels, or any other remote avatar host — external avatar hosts rate-limit / 403 inside the preview sandbox and render as broken images. Generate small inline SVG data URIs instead. The large GIF previews (motionsites CDN) and the parallax still (images.higgs.ai)stay as remote URLs— they are large stable CDN media.Responsive768px: single-column hero CTA, marquee duration 10s, carousel cardscalc(100vw - 48px).≥768px: hero CTA row, marquee images 500px tall, pricing two columns, carousel header row, larger headings, footer row.≥1024px: largest heading sizes (44px headings, 80px partner heading).Start from the seedCopyexample.htmlfirst. Only swap copy/data (studio name, testimonials, projects, prices). Do not rewrite the CSS variables, button shadows, fonts, section order, or animation logic — they are the fidelity anchor.3c:[“,,,L3f”,null,{“content”:“$40”,“frontMatter”:{“name”:“ai-designer-portfolio”,“description”:“Use this plugin when the user wants a premium single-page creative-studio / designer portfolio landing page on a white background: serif-accented hero, an infinite GIF marquee, parallax testimonial, two-card pricing, an auto-scrolling testimonial carousel, vertical project showcase, a mouse-trail partner CTA, and a fixed floating bottom nav. Invoke for ‘designer portfolio’, ‘creative studio landing page’, ‘agency one-pager’, or when the user references the Viktor Oddy / AI Designer Portfolio template.”,“version”:“0.1.0”,“od”:{“mode”:“prototype”,“surface”:“web”,“scenario”:“design”,“preview”:{“type”:“html”,“entry”:“example.html”},“design_system”:{“requires”:false}}}}]3d:[“KaTeX parse error: Expected }, got EOF at end of input: …,children:[[”,“div”,null,{“className”:“flex items-center justify-between border-b border-border bg-muted/30 px-4 py-2.5”,“children”:[[“KaTeX parse error: Expected }, got EOF at end of input: …,children:[”,“span”,null,{“className”:“truncate text-xs font-medium text-muted-foreground”,“children”:“同仓库更多 Skills”}]}],[“KaTeX parse error: Expected EOF, got } at position 88: …ldren:同仓库}]]}̲],[”,“div”,null,{“className”:“p-4 sm:p-5”,“children”:[[“,h2,null,id:related−skills−heading,className:text−2xlfont−semiboldtracking−normaltext−foreground,children:同仓库更多Skills],[,h2,null,{id:related-skills-heading,className:text-2xl font-semibold tracking-normal text-foreground,children:同仓库更多 Skills}],[,h2,null,id:related−skills−heading,className:text−2xlfont−semiboldtracking−normaltext−foreground,children:同仓库更多Skills],[”,“div”,null,{“className”:“mt-4 grid gap-3 sm:grid-cols-2”,“children”:[“L41,L41,L41,L42”,“L43,L43,L43,L44”,“L45,L45,L45,L46”]}]]}]]}]47:I[206516,[“/_next/static/chunks/051aanbhrv4br.js”,“/_next/static/chunks/0mizr60h7ayzt.js”,“/_next/static/chunks/0v9lm1dmbdoo-.js”,“/_next/static/chunks/0rxr1j1j3j-.r.js”,“/_next/static/chunks/02ftybezfvqjd.js”,“/_next/static/chunks/0.v9ksvnnj8ia.js”,“/_next/static/chunks/0bn6id96nx3k.js,“/_next/static/chunks/13ybnhn37c.tc.js”,“/_next/static/chunks/0_fnrdtruz8uf.js”,“/_next/static/chunks/0r6l15utt1mwb.js”,“/_next/static/chunks/0dm9a5into854.js”,/_next/static/chunks/07k6hqoibtcn.js”,“/next/static/chunks/0b4cao.4y…j.js”,“/_next/static/chunks/02i-n28z7kjd0.js”],“default”]