Creative portfolio or agency site: design recipe

DesktopTabletPhone

Full screen New tab ↗

A starter page built from this recipe's tokens: plain HTML and CSS, no build step, code under MIT. Copy it, or let your agent port it to your stack. Demo names and numbers are made up.

Design tokens

Files: tokens.css (CSS variables, light and dark) · tailwind.css (Tailwind v4 @theme) · tokens.json · Google Fonts CSS

Pairings, scales and ratios are AgentGid editors' choices; color values are copied from Radix Colors (MIT).

Animated blocks

Also fits: daisyUI, HeroUI, shadcn/ui, Cruip.

Fonts

Also fits: Bunny Fonts, Fontshare, Fira Code, IBM Plex.

Backgrounds and gradients

Also fits: Pattern Craft, BGJar, Pattern Monster, MagicPattern.

3D art

Also fits: Spline Community, 3dicons, DrawKit, Thiings.

Animations

Also fits: Motion, useAnimations, LottieFiles, Rive.

Gradients

Also fits: Coolors, Colormind, Realtime Colors, ColorBox (Lyft).

Work shown in frames

Also fits: LS Graphics free mockups, MockUPhone.

Favicon and social preview image

Also fits: Takumi, RealFaviconGenerator.

Libraries

Agent Skills for the design work

Before you call it done

• Add credits for every source whose license asks for them (the brief lists each credit line).
• Check accessibility and contrast with axe-core, for example through Playwright, and fix what it reports.
• Run Lighthouse on the built page and check the layout at phone width and on desktop.

Playwright (JavaScript) npm install @playwright/test · axe-core npm install axe-core · Lighthouse npm install lighthouse

The brief

# Design recipe: Creative portfolio or agency site (AgentGid)

For a showcase with bold visuals, gradients, 3D and scroll motion. Look: gradient, abstract, glassmorphism, 3d.
Use these sources; each was checked on its official pages and its license allows commercial use. Follow each source's license line and credit line. Prefer the first pick in each slot.

## Design tokens (AgentGid editors' choice; values from Radix Colors and Google Fonts)
- Fonts: headings Instrument Serif 400, body Inter, code JetBrains Mono (Google Fonts, SIL OFL; in Next.js load them with next/font/google). CSS: https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap
- Colors (light): background #fcfcfc, surface #f9f9f9, border #d9d9d9, text #202020, muted #646464, accent #6e56cf (hover #654dc4, soft #f4f0fe). Scales: Radix gray + violet + cyan; dark values in tokens.json.
- Type scale: 17px base, ratio 1.414: xs 8.5px, sm 12.0px, base 17.0px, lg 24.0px, xl 34.0px, 2xl 48.0px, 3xl 68.0px, 4xl 96.0px, 5xl 136.0px
- Radius 18px (sm 9, lg 27); spacing on a 4px grid: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
- Text on accent buttons: white. Keep body text at least 4.5:1 against its background (WCAG 2.2 AA).
- Starter page built from these tokens (HTML + CSS, MIT): https://agentgid.com/assets/recipes/creative-portfolio/starter/ · tokens: https://agentgid.com/assets/recipes/creative-portfolio/starter/tokens.css, https://agentgid.com/assets/recipes/creative-portfolio/starter/tailwind.css, https://agentgid.com/assets/recipes/creative-portfolio/starter/tokens.json
- Same starter as a Next.js project (App Router, Tailwind CSS v4, lucide-react, next/font; builds with Next 16.4.0, checked 2026-10-21 16:30 UTC): https://agentgid.com/assets/recipes/creative-portfolio/creative-portfolio-next.zip. Unzip, `npm install`, `npm run dev`; AGENTS.md inside is this brief.

## Libraries
- npm install next  # Next.js (MIT)
- npm install tailwindcss  # Tailwind CSS (MIT)
- npm install gsap  # GSAP (Standard 'no charge' license: https://gsap.com/standard-license.)
- npm install motion  # Motion (MIT)
- npm install lenis  # Lenis (MIT)
- npm install three  # Three.js (MIT)

## Content sources
### Animated blocks
- Aceternity UI (UI kits and website templates). Animated React, Tailwind and Motion components, blocks and templates for landing pages; part is free, the rest sold as Pro. Price: free tier; commercial use OK. Style: gradient, glassmorphism, colorful.
  Connect: download from https://ui.aceternity.com (no API).
  Get files: Copy-paste or shadcn CLI from ui.aceternity.com; Pro blocks and templates need a purchased account; AI agents can install through an MCP connected to the Aceternity registry (html, css).
  Not allowed: No resale or redistribution of items
  Not allowed: Pro content requires purchase
  Rule: Do not redistribute the items or their source files, and do not sell them or derivatives on any marketplace.
  Rule: Do not make themes, templates or derivative products to sell.
  Rule: Some items contain third-party components with their own licences.
  License: https://ui.aceternity.com/licence (checked 2026-10-21; details: https://agentgid.com/assets/aceternity-ui/)
- Magic UI (UI kits and website templates). Copy-and-paste animated React/Tailwind components for landing pages, installable via the shadcn CLI; a paid Pro adds templates and premium components. Price: free tier; commercial use OK; no credit needed. Style: gradient, colorful, minimal.
  Connect: official MCP server https://magicui.design/docs/mcp.
  Get files: shadcn CLI / copy-paste from magicui.design/docs; official MCP: pnpm dlx @magicuidesign/cli@latest install cursor (also Claude, Windsurf, Cline) (html, css).
  Not allowed: Pro licence terms not read
  Rule: Keep the MIT notice if you redistribute the code.
  Rule: Pro templates and components are paid and not covered by this MIT file.
  License: https://raw.githubusercontent.com/magicuidesign/magicui/main/LICENSE.md (checked 2026-10-21; details: https://agentgid.com/assets/magic-ui/)
### Fonts
- Google Fonts (Fonts). Open-source font catalog with a Developer API for metadata, a CSS API and the Google Design MCP. Price: free; commercial use OK; no credit needed; ship inside your app with conditions.
  Connect: official MCP server https://design.googleapis.com/mcp; API docs https://developers.google.com/fonts/docs/developer_api (API key needed). Limits: API key required; quota not stated.
  Get files: Developer API: GET https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY returns a files map of TTF URLs on fonts.gstatic.com (add capability=WOFF2 for woff2). CSS API: https://fonts.googleapis.com/css?family=.. . Whole collection: https://github.com/google/fonts/archive/main.zip (needs no key) (ttf, woff2).
  Not allowed: Most fonts are SIL OFL 1.1, some Apache 2, the Ubuntu fonts use the Ubuntu Font License 1.0; each family folder has its own license file.
  Not allowed: OFL fonts cannot be sold by themselves, only bundled with software.
  Not allowed: Modified OFL fonts cannot use the Reserved Font Name.
  Rule: Keep the license file with font files you bundle in an app.
  Rule: Respect Reserved Font Names when you modify a font.
  License: https://github.com/google/fonts (checked 2026-10-10; details: https://agentgid.com/assets/google-fonts/)
  Next.js: see https://agentgid.com/assets/google-fonts/agent.md (official example: https://nextjs.org/docs/app/getting-started/fonts)
- Fontsource (Fonts). Open-source fonts packaged as individual npm packages for self-hosting. Price: free; commercial use with conditions; credit depends on the item; ship inside your app with conditions.
  Connect: npm @fontsource/<font>.
  Get files: npm install @fontsource/<font> (static) or @fontsource-variable/<font>, then import the CSS. CDN: https://cdn.jsdelivr.net/fontsource/fonts/{id}@{version}/{subset}-{weight}-{style}.{extension}. Metadata API: api.fontsource.org/v1/fonts (woff2).
  Not allowed: Most fonts are SIL OFL 1.1, some Apache 2, the Ubuntu fonts use the Ubuntu Font License 1.0.
  Not allowed: API hard limit is 2500 requests per 10 seconds; constant use at that rate can bring a temporary ban.
  Rule: Follow each font's own license (OFL, Apache and others).
  React: see https://agentgid.com/assets/fontsource/agent.md (official example: https://fontsource.org/docs/getting-started/install)
### Backgrounds and gradients
- fffuel (Backgrounds, patterns and shapes). Collection of free color tools and SVG generators for gradients, patterns, textures, shapes and backgrounds. Price: free; commercial use OK; no credit needed. Style: gradient, abstract, geometric, colorful.
  Connect: download from https://www.fffuel.co (no API).
  Get files: Manual: pick a generator on fffuel.co, customize, then copy SVG code, download SVG, or use the SVG to PNG / base64 tools (svg, png, css).
  Not allowed: No resale, sublicensing or redistribution of the images
  Rule: Do not sublicense, resell, share, transfer or otherwise redistribute the Images.
  License: https://www.fffuel.co/license/ (checked 2026-10-21; details: https://agentgid.com/assets/fffuel/)
- SVGBackgrounds.com (Backgrounds, patterns and shapes). Library of SVG backgrounds, patterns, icons and shape tools; a free set of 48 backgrounds plus tools, and a subscription for all graphics. Price: free tier; commercial use OK; credit depends on the item; ship inside your app with conditions; no AI training on its content. Style: geometric, abstract, colorful, gradient.
  Connect: download from https://www.svgbackgrounds.com (no API).
  Get files: Manual: download SVG from a set page on svgbackgrounds.com (free sets without account at /set/free-svg-backgrounds-and-patterns/; subscription for the rest) (svg, css).
  Credit line: Icons by SVGBackgrounds.com (link to the specific set, placed near the graphics or on a credits page)
  Not allowed: No as-is use, redistribution or resale
  Not allowed: No AI training
  Not allowed: Credit required on the free tier
  Rule: Combine graphics with other original design work; do not use them on their own, as-is.
  Rule: Free-tier graphics need attribution; subscribers with an active subscription are exempt.
  Rule: Do not redistribute, resell or use them to train AI models or in automated template tools.
  License: https://www.svgbackgrounds.com/license/ (checked 2026-10-21; details: https://agentgid.com/assets/svgbackgrounds/)
- Haikei (Backgrounds, patterns and shapes). Web app that generates SVG/PNG backgrounds, waves, blobs, gradients and shapes; export as SVG or PNG. Blobmaker and Get Waves are now part of it. Price: free; commercial use OK; no credit needed; no bots or bulk downloading (get files by hand or through the official API, if there is one). Style: abstract, gradient, colorful, geometric.
  Connect: download from https://haikei.app (no API).
  Get files: Manual: design at app.haikei.app, then export SVG or PNG (or copy SVG code); no API (svg, png).
  Not allowed: No similar generator service built from Haikei designs
  Not allowed: No bots/scraping (terms)
  Rule: Do not use Haikei designs to run a similar design generator service.
  Rule: Do not automate access to the site with bots or scrapers.
  License: https://haikei.app/terms/ (checked 2026-10-21; details: https://agentgid.com/assets/haikei/)
### 3D art
- Shapefest (3D and isometric illustrations). Library of 100,000+ ray-traced 3D shape renders in packs (Cinema 4D), as raster images; some packs free at 512 px, full 3000 px packs paid. Price: free tier; commercial use OK. Style: 3d, abstract, geometric, colorful.
  Connect: download from https://www.shapefest.com (no API).
  Get files: Manual download of packs from https://www.shapefest.com (free packs 512 px; paid packs 3000 px, one-click download) (png).
  Not allowed: Assets cannot be sub-licensed, resold, shared, transferred, or otherwise redistributed on its own.
  Not allowed: UI kits and templates need the Extended License.
  Rule: Do not resell, share or redistribute assets on their own, even for free.
  Rule: Use in a product for sale only where the image adds to the core value of the product; UI kits need the Extended License and must not be a library or sub-library.
  License: https://www.shapefest.com/license-agreement (checked 2026-10-21; details: https://agentgid.com/assets/shapefest/)
- Craftwork (3D and isometric illustrations). Marketplace of design packs by independent designers (3D illustrations and icons, UI kits, mockups) with free packs and a subscription, usable via Figma, Blender, PNG and an MCP server. Price: free tier; commercial use OK; no AI training on its content. Style: 3d, colorful, minimal, gradient.
  Connect: download from https://craftwork.design (no API). Limits: Pro: 1,000 MCP downloads a month.
  Get files: Download packs from https://craftwork.design (free account; Pro for the full library) or use the Craftwork MCP from Claude Code, Cursor or Codex (figma, png).
  Not allowed: Commercial License covers individuals and companies up to 20 people; larger companies need the Extended License.
  Not allowed: Demo files are for previews only.
  Rule: Do not sell, share or give away the asset files themselves.
  Rule: Free packs: no resale, redistribution, use in a product you sell, or as a logo/trademark.
  Rule: Do not train AI models on Craftwork files; products you sell (templates, UI kits) need the Extended License.
  License: https://craftwork.design/license (checked 2026-10-21; details: https://agentgid.com/assets/craftwork/)
### Animations
- Anime.js (UI animation (Lottie, Rive)). MIT JavaScript animation library for CSS, SVG, DOM attributes and JavaScript objects. Price: free; commercial use OK; no credit needed.
  Connect: npm animejs.
  Get files: npm i animejs.
  Not allowed: Keep the MIT copyright and permission notice in all copies or substantial portions
  Rule: Keep the MIT copyright and permission notice in copies.
  Rule: Install with npm i animejs (the site shows this command).
  License: https://github.com/juliangarnier/anime/blob/master/LICENSE.md (checked 2026-10-20; details: https://agentgid.com/assets/anime-js/)
- Bodymovin (lottie-web) (UI animation (Lottie, Rive)). After Effects extension that exports animations as JSON, plus the lottie-web JavaScript player that renders them in browsers. Price: free; commercial use OK; no credit needed.
  Connect: npm lottie-web.
  Get files: npm install lottie-web, or take lottie.js from the build/player folder of the repo, or the cdnjs bodymovin script (js, json).
  Not allowed: Keep the MIT copyright and permission notice in copies you ship.
  Not allowed: The license covers the player software; animation JSON files have their own licenses.
  Rule: Keep the MIT license file and copyright notice with any copies of the library you ship.
  Rule: Install the player from npm (lottie-web) or download lottie.js from build/player and serve it yourself.
  Rule: Gzip lottie.js for production, as the README advises.
  Rule: The MIT license covers the software only; check the license of any animation JSON files you load.
  License: https://github.com/airbnb/lottie-web/blob/HEAD/LICENSE.md (checked 2026-10-14; details: https://agentgid.com/assets/bodymovin/)
### Gradients
- uiGradients (Color palettes and gradients). Community collection of multi-color gradients; all data is in one gradients.json file in the GitHub repo, plus a browsing site. Price: free; commercial use OK; credit required. Style: gradient, colorful.
  Connect: download from https://uigradients.com (no API).
  Get files: curl https://raw.githubusercontent.com/ghosh/uiGradients/master/gradients.json (array of {name, colors[hex]}); or copy CSS from uigradients.com (json, css).
  Not allowed: Keep the MIT copyright notice
  Not allowed: No official API; uigradients.com site itself has no terms page
  Rule: MIT: keep the copyright notice with copies of the gradients data.
  Rule: There is no official API; read gradients.json from the repo.
  License: https://github.com/ghosh/uiGradients/blob/master/LICENSE.md (checked 2026-10-21; details: https://agentgid.com/assets/uigradients/)
- Radix Colors (Color palettes and gradients). Open-source color system: 12-step accessible scales with alpha, dark mode and P3 variants, shipped as CSS/JS via npm. Price: free; commercial use OK; no credit needed.
  Connect: npm @radix-ui/colors.
  Get files: npm install @radix-ui/colors (also yarn/pnpm); CDN files exist for prototyping only; docs: radix-ui.com/colors/docs/overview/installation (css, json).
  Not allowed: Keep the MIT copyright notice
  Not allowed: CDN import not recommended in production by the docs
  Rule: Keep the MIT copyright and permission notice in copies or substantial portions of the software.
  Rule: Keep the MIT copyright and permission notice.
  License: https://github.com/radix-ui/colors/blob/main/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/radix-colors/)
  HTML/CSS: see https://agentgid.com/assets/radix-colors/agent.md (official example: https://www.radix-ui.com/colors/docs/overview/usage)
### Work shown in frames
- Shots (Mockups and device frames). Browser tool that places screenshots into device mockups and exports them as images (and animations/video) with backgrounds and social frame presets. Price: free tier; commercial use OK; no credit needed. Style: realistic, gradient.
  Connect: download from https://shots.so (no API).
  Get files: Manual: open shots.so in a browser, add a screenshot, pick a mockup, export (PNG shown in the export panel) (png).
  Not allowed: Terms ban scraping and bulk-downloading of data
  Not allowed: Free, Basic and Pro plans have different limits (pricing page not readable)
  Rule: Terms do not state whether exports may be used commercially; treat commercial use as unconfirmed.
  Rule: Do not scrape or bulk-download from the service.
  License: https://shots.so/terms (checked 2026-10-21; details: https://agentgid.com/assets/shots-so/)
- Mockuuups Studio (Mockups and device frames). Mockup library (5,300+ device, print and paper mockups) with a web tool, desktop app, design-tool plugins and a render API that places images or URL screenshots into mockups. Price: free tier; commercial use with conditions; ship inside your app with conditions; no AI training on its content. Style: realistic.
  Connect: API docs https://mockuuups.studio/api/docs/ (API key needed). Limits: 1 render = 1 credit; hi-res and URL screenshots cost 1 extra credit; 50 free credits; HTTP 402 when credits run out.
  Get files: API: POST https://api.mockuuups.studio/v1/renders with Bearer API key (mockup id, size, contents); or use the web tool, desktop app or Figma/Sketch plugins (png).
  Not allowed: Free licence is non-commercial and needs credit
  Not allowed: No resale, redistribution, scraping or AI training
  Rule: Free plan: personal non-commercial use only, with credit 'Mockup by Mockuuups Studio'.
  Rule: Paid plan or paid export needed for client, business or commercial work (no credit required).
  Rule: Do not resell or redistribute mockups or put them in packs/UI kits; no scraping or mass downloading; no AI training.
  License: https://mockuuups.studio/license (checked 2026-10-21; details: https://agentgid.com/assets/mockuuups-studio/)
### Favicon and social preview image
- Satori (Favicons and social preview images). Library that converts HTML/JSX and CSS to SVG (lays out with flexbox); commonly used to generate Open Graph and social card images, PNG via Sharp or Resvg. Price: free; commercial use OK.
  Connect: npm satori.
  Get files: npm i satori; call satori(element, {width, height, fonts}) to get an SVG string; convert to PNG with Sharp or Resvg (svg, png).
  Not allowed: Flexbox and a subset of CSS only
  Not allowed: You must supply font data
  Rule: MPL-2.0: modifications to Satori's own files must be shared under MPL; your own code can stay under your terms.
  Rule: Fonts must be passed as ArrayBuffer/Buffer; text will not render without a font.
  License: https://raw.githubusercontent.com/vercel/satori/main/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/satori/)
  Node.js: see https://agentgid.com/assets/satori/agent.md (official example: https://github.com/vercel/satori)

## Agent Skills (optional, read before installing: skills can run scripts)
- npx skills add emilkowalski/skills --skill animate-expo  # animate-expo
- npx skills add greensock/gsap-skills --skill gsap-core  # gsap-core
- npx skills add ConardLi/garden-skills --skill motion-showreel  # motion-showreel
- npx skills add ibelick/ui-skills --skill fixing-motion-performance  # fixing-motion-performance
- npx skills add tech-leads-club/agent-skills --skill sales-motion-design  # sales-motion-design
- npx skills add MengTo/Skills --skill optimize-web-animations  # optimize-web-animations

## Before you call it done
- Add a credits section or file for every source whose license asks for credit.
- Check accessibility and contrast with axe-core (e.g. through @playwright/test) and fix what it reports.
- Run Lighthouse on the built page; check the layout at phone width (375px) and desktop.
- npm install @playwright/test  # Playwright (JavaScript)
- npm install axe-core  # axe-core
- npm install lighthouse  # Lighthouse

Recipe page: https://agentgid.com/assets/recipes/creative-portfolio/ · all recipes: https://agentgid.com/assets/recipes/

Other recipes

Minimal SaaS landing page Playful consumer app site SaaS analytics site and app Dashboard or admin app Documentation site Everything for web design