Verified installable Agent Skill
SKILL.md + .skillInstall into your agent.
npx skills add LearnPrompt/goodcase-lite --skill portfolio-story-architecture-by-1srj4fh --global --copy --yes --full-depthLoading…
Loading…
Creator method · Unofficial synthesis
An unofficial synthesis of public evidence, not published or endorsed by the creator.
A recurring portfolio story architecture method derived from 13 published cases by MotionSites.
13 Cases · 1 Creators · AI Coding (UI) · Latest example 11/12/2026
Verified installable Agent Skill
SKILL.md + .skillnpx skills add LearnPrompt/goodcase-lite --skill portfolio-story-architecture-by-1srj4fh --global --copy --yes --full-depthMethod skeleton
Case evidence
复制完整建站 Prompt 到 AI 编程工具（Cursor、v0、Claude 等）生成「Laptop Portfolio」对应的页面区块，替换文案、品牌与素材链接即可复用。 MotionSites 免费 Prompt 案例；站点不公开创作者，归属挂 MotionSites。
Prompt
# Haldoren — "Laptop Dive" Portfolio Hero: Build Brief Build a single-file (`index.html`, inline CSS and JS, no frameworks, no build step) one-screen portfolio hero for a fictional motion designer, **Haldoren**. On load you see a photograp…
复制完整建站 Prompt 到 AI 编程工具（Cursor、v0、Claude 等）生成「Video Studio」对应的页面区块，替换文案、品牌与素材链接即可复用。 MotionSites 免费 Prompt 案例；站点不公开创作者，归属挂 MotionSites。
Prompt
# Kolibrie Studio: recreation prompt Build a three-section landing page for **Kolibrie**, a fictional studio that makes short-form social films, reels and motion. It is a single self-contained HTML file (one inline `<style>`, one inline `<…
One-page white design studio site built with React, TypeScript, Tailwind and lucide-react icons. The interest is how a two-typeface system carries a premium feel on a minimal white page.
Prompt
Create a single-page landing page for a creative design studio called "Viktor Oddy" using React, TypeScript, Vite, and Tailwind CSS. Use lucide-react for icons. The page has a white background throughout and uses two custom fonts: "PP Neue…
Dark one-page portfolio using GSAP and Framer Motion together with hls.js video streaming. It sets the global design system first and then expands section by section, so the prompt structure itself is a template.
Prompt
Prompt to recreate this landing page: Build a single-page dark portfolio landing page using React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js. --- ## Global Design System ### Fonts Google Fonts import: Inter (300–700…
Landing page for the design agency Axion Studio, using a shaders package for a shader effect in the hero background. The only WebGL shader entry in this batch.
Prompt
Build a React + Vite + Tailwind CSS landing page for "Axion Studio" - a design agency site. Use the `shaders` package (npm: `shaders`) for the hero background, `lucide-react` for icons. The page has 3 sections. Match every detail exactly: …
About Me section for a personal site, built with React and framer-motion, loading all weights of the Kanit font on a #0C0C0C dark background.
Prompt
**Prompt:** Create an "About Me" section using React, Tailwind CSS, and **framer-motion**. The site uses **Google Font "Kanit"** (weights 300-900) and a dark background `#0C0C0C`. **Section layout:** - Full-width section, `min-h-screen`, f…
Landing hero for the subscription creative agency Alwayzz, built with React and Vite, with styling deliberately done in custom CSS instead of Tailwind utility classes.
Prompt
**Create a single-page landing hero section for a creative agency called "Alwayzz" with a React + Vite + Tailwind CSS setup. Use custom CSS (not Tailwind utilities) for all styling. The design should be minimal, clean, black-and-white, wit…
Portfolio landing page for 3D creator Jack, built with React, TypeScript and Framer Motion on a #0C0C0C dark background.
Prompt
Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React. The page has a dark theme (#0C0C0C background) with the font Kanit (Google Fonts, weights 300-900). The page title…
Pixel-level recreation task for a portfolio landing page, with the tech stack and structure laid out as a document using divider lines, so the prompt reads like a spec sheet.
Prompt
Recreate this exact full-viewport portfolio landing page — pixel-perfect match. ═══════════════════════════════════════ TECH / STACK ═══════════════════════════════════════ - React + TypeScript + Tailwind CSS + Vite - Icons: lucide-react (…
Dark Features section for a personal portfolio, built with React, TypeScript, Tailwind and lucide-react.
Prompt
Build a full-viewport dark personal portfolio Features section using React + TypeScript + Tailwind CSS + lucide-react. **Layout & Structure:** - Full screen dark background `#0a0a0a`, white text, Inter font with antialiased smoothing - Top…
Full-screen hero built with React, Tailwind, Framer Motion and Lucide in the Inter typeface, with every spec item stated precisely.
Prompt
Build a full-screen hero section using React, Tailwind CSS, Framer Motion, and Lucide React icons. Use the Inter font. The page is fully mobile-responsive. Here are the exact specifications: --- **BACKGROUND:** - A full-screen autoplaying,…
Three-section landing page (Hero, About, Features) for the creative studio Prisma, built with React, Vite and framer-motion, as a small but complete full-page exercise.
Prompt
Create a React + Vite + TypeScript + Tailwind CSS landing page for a creative studio called "Prisma". The page has 3 sections: Hero, About, and Features. Use framer-motion for animations and lucide-react for icons. The design is dark, mood…
Creator evidence
A Skill is a derived reading layer. Every claim must trace back to published Cases.