已验证 · 可安装 Agent Skill
SKILL.md + .skill把这套方法装进你的 Agent。
npx skills add LearnPrompt/goodcase-lite --skill portfolio-story-architecture --global --copy --yes --full-depth加载中…
Skill · 跨作者通用方法
围绕创作者定位、代表作品和可信证据安排个人站的叙事顺序。
28 Cases · 14 位作者 · AI 编程(UI) · 最近例证 2026/08/20
已验证 · 可安装 Agent Skill
SKILL.md + .skillnpx skills add LearnPrompt/goodcase-lite --skill portfolio-story-architecture --global --copy --yes --full-depth方法骨架
作者证据
Case 证据

白底设计工作室单页,React + TypeScript + Tailwind 配 lucide-react 图标,看点在双字体排版体系怎么撑起极简白底的高级感。
提示语
使用 React、TypeScript、Vite 和 Tailwind CSS,为名为 "Viktor Oddy" 的创意设计工作室创建一个单页落地页。使用 lucide-react 提供图标。整个页面采用白色背景,并使用两种自定义字体:"PP Neue Montreal"(正文字体,从 Webflow CDN 加载)和 "PP Mondwest"(衬线装饰字体,从本地 /PPMondwest-Regular.woff2 文件加载)。正文默认字体为 PP Neue Montr

暗色作品集单页,GSAP 与 Framer Motion 双动画库再加 hls.js 视频流,先定全局设计系统再逐区块展开,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…

提示语
为 “Axion Studio” 构建一个 React + Vite + Tailwind CSS 落地页——这是一个设计机构网站。英雄区背景使用 `shaders` 包(npm: `shaders`),图标使用 `lucide-react`。页面包含 3 个版块。准确匹配每一处细节: --- ## SECTION 1:HERO(全视口高度) **背景:** 浅灰色 `#EFEFEF`,叠加全屏动画 shader(positioned absolute, inset-0

提示语
**提示词:** 使用 React、Tailwind CSS 和 **framer-motion** 创建一个“关于我”section。网站使用 **Google Font "Kanit"**(字重 300-900)和深色背景 `#0C0C0C`。 **Section 布局:** - 全宽 section,`min-h-screen`,flexbox column,双轴居中 - Padding:`px-5 sm:px-8 md:px-10 py-20` - 背景:`#0C
提示语
**使用 React + Vite + Tailwind CSS,为名为 "Alwayzz" 的创意机构创建一个单页落地页 hero section。所有样式均使用自定义 CSS(不要使用 Tailwind utilities)。设计应简约、干净、采用黑白配色,并始终使用紧凑的负字间距。** --- ### 字体(通过 index.html 中的 Google Fonts 加载) ``` Inter: weights 400, 500, 600, 700 Source
提示语
使用 React、TypeScript、Tailwind CSS、Framer Motion 和 Lucide React,为「Jack」构建一个 3D 创作者作品集落地页。页面采用深色主题(背景为 #0C0C0C),字体使用 Kanit(Google Fonts,字重 300-900)。页面标题为「Jack -- 3D Creator」。 全局样式 html、body、#root 和主容器的背景:#0C0C0C 字体族:'Kanit', sans-serif 全局重置:b
提示语
重现这个完全一致的全视口作品集落地页——实现像素级精确匹配。 ═══════════════════════════════════════ 技术 / 技术栈 ═══════════════════════════════════════ - React + TypeScript + Tailwind CSS + Vite - 图标:lucide-react(`Play`、`Menu`、`X`) - 单个全屏页面:`h-screen w-full overflow-hidd

提示语
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…

提示语
使用 React、Tailwind CSS、Framer Motion 和 Lucide React icons 构建一个全屏 Hero Section。使用 Inter 字体。页面需要完全适配移动端。以下是确切规格: --- **背景:** - 使用一段自动播放、循环、静音的视频作为背景,覆盖整个视口。 - 视频 URL:`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_2

创意工作室 Prisma 的三区块落地页(Hero、About、Features),React + Vite + framer-motion,小而全的整页练习。
提示语
为一家名为 "Prisma" 的创意工作室创建一个使用 React + Vite + TypeScript + Tailwind CSS 的落地页。页面包含 3 个部分:Hero、About 和 Features。使用 framer-motion 实现动画,使用 lucide-react 提供图标。设计采用深色、低调且富有电影感的风格,并搭配暖奶油色调色板。 字体 在 index.html 中加载两种 Google Fonts: Almarai(字重:300、400、7

提示语
使用 React、Tailwind CSS 和 Vite,为名为“VANGUARD”的创意机构构建一个全屏 hero landing page。页面应为一个占满 viewport 高度的单区块,以循环视频为背景,所有内容叠加在其上方。 **背景视频:** 使用以下准确的 CloudFront URL,创建全屏 `<video>` element,带有 `autoPlay`、`muted`、`loop` 和 `playsInline` attributes,并设置为 `obj

一个简单的指令式提示,告诉 Gemini 3 Pro 扮演 makemepulse 工作室的角色,为名为 AP 的客户构建一个网站,并注重精细的执行。
提示语
你是工作室 {argument name="studio_name" default="makemepulse"}。请为 {argument name="client_name" default="AP"} 构建一个网站。仔细思考,不要出错。