# 数字柚子作品集 - 提示词优化参考 > 基于 EdgeOne Prompts 赛道，数字柚子全栈开发工程师个人作品集 > 技术栈：React 19 + Vite + TypeScript + Tailwind CSS v4 + Framer Motion --- ## 1. 整体风格定位 ### 视觉风格 - **苹果 HIG 极简风格**，黑白灰配色，无深色模式 - 背景：`#fafafa` + 流动渐变色块（无圆点网格） - 主色：`#18181b`（文字）、`#52525b`（次要）、`#a1a1aa`（辅助）、`#e4e4e7`（边框） ### 字体 ``` -apple-system， "SF Pro Display"， BlinkMacSystemFont， "Segoe UI"， sans-serif ``` ### 核心理念 - **代码即设计**：好的产品从第一眼就不一样 - 动效服务于体验，不是炫技 - 内容扎实 > 视觉花哨 --- ## 2. Hero 区域提示词 ### 结构要求 ``` [毛玻璃徽章行] - 顶部，带图标 [逐字 3D 翻转标题] - 核心视觉爆点 [副标题 + 分隔线] [Blur Text 简介区] [发光胶囊按钮 CTA] [技术栈 Marquee 滚动] [状态徽章] - 右上角 "Open to work" ``` ### 动画时序 ``` 0.0s → 徽章依次淡入 0.3s → 标题逐字翻转（每个字间隔 0.05s） 0.8s → 副标题淡入 1.0s → 分隔线渐入 1.2s → 简介文字模糊渐入 1.5s → 按钮淡入 1.8s → Marquee 出现 2.0s → 滚动指示器出现 ``` ### 关键代码片段 **逐字 3D 翻转动画** ```tsx {text.split("").map((char， index) => ( {char} ))} ``` **发光胶囊按钮** ```tsx ``` --- ## 3. Projects 项目展示提示词 ### 内容结构 ``` [项目截图区] - 左侧，渐变色块 + 图标 + UI 模拟 [项目信息] - 右侧 ├── 序号 + 名称 + 状态标签 ├── 角色 + 成果数据（带主题色高亮） ├── 详细描述 └── 技术栈标签 ``` ### 设计要点 - 每个项目有**独立主题色**（深灰/蓝/琥珀/绿） - 截图区模拟浏览器/应用 UI（顶部按钮 + 底部导航） - 悬浮时图标上浮 + 闪光效果 - 布局：移动端单列，桌面端左右分栏 ### 数据展示公式 ``` 角色 + 分隔点 + 成果数据 = 专业感 例：「全栈独立开发 · 日活 1.2k+」 ``` --- ## 4. About 区域提示词 ### 结构 ``` [标题 + 简介文字] [数据统计卡片] - 4列网格，年经验/项目数/提交数/认证数 [工作经历卡片] - 毛玻璃风格，含职位/公司/时间/描述/亮点 [成长时间线] - 垂直连接线 + 脉冲节点 [教育背景卡片] ``` ### 数据统计公式 ``` 数字 + 后缀 + 标签 = 可量化成果 例：「3+ 年开发经验」「12+ 完成项目」「28+ GitHub 提交」 ``` --- ## 5. Skills 技能展示提示词 ### 结构 ``` [标题 + 技能总数 Badge] [技能分组] - 带图标（Code2/Server/Smartphone/Wrench） └── 技能网格 - 每个技能含名称 + 百分比 + 进度条动画 [认证证书卡片] - 3列网格 [Marquee 无限滚动] ``` ### 进度条动画 ```tsx ``` --- ## 6. 动效设计原则 ### 动画类型优先级 1. **叙事性动画** - 帮助用户理解内容（标题翻转、Blur Text） 2. **交互动画** - 响应用户操作（按钮悬停、卡片倾斜） 3. **氛围动画** - 提升视觉质感（渐变流动、脉冲效果） ### 缓动函数 ```tsx // 自然的减速效果（推荐） ease: [0.215， 0.61， 0.355， 1] // 弹性效果（用于数字跳动） ease: "easeOut" // 循环动画（装饰元素） repeat: Infinity， ease: "easeInOut" ``` ### 性能注意 - 使用 `will-change` 优化动画性能 - 避免同时触发过多动画 - `once: true` 用于视口内动画，避免重复计算 --- ## 7. 组件架构 ``` src/ ├── App.tsx # 主布局 + 背景效果 ├── components/ │ ├── Navbar.tsx # 胶囊导航 + 智能显隐 │ ├── Hero.tsx # 主标题区 │ ├── About.tsx # 关于 + 履历 │ ├── Projects.tsx # 项目展示 │ ├── Skills.tsx # 技能可视化 │ ├── Blog.tsx # 技术博客 │ ├── Contact.tsx # 联系表单 │ ├── Footer.tsx # 页脚 │ ├── PageLoader.tsx # Buildspace 风格加载 │ ├── ScrollProgress.tsx # 顶部进度条 │ ├── AnimatedGradientBg.tsx # 流动渐变背景 │ ├── DecorativeElements.tsx # 装饰几何元素 │ ├── BlurText.tsx # 模糊文字动画 │ ├── CountUp.tsx # 数字弹跳动画 │ ├── Marquee.tsx # 无限滚动 │ └── VisitorCounter.tsx # 访客计数 ``` --- ## 8. 设计检查清单 ### 视觉检查 - [ ] 背景无圆点网格，纯色 + 渐变 - [ ] 文字渐变使用 `background-clip: text` - [ ] 毛玻璃使用 `backdrop-filter: blur()` - [ ] 按钮有发光/光晕效果 - [ ] 项目卡片有截图预览区 ### 动效检查 - [ ] Hero 标题有逐字翻转动画 - [ ] 卡片悬浮有 3D 倾斜效果 - [ ] 技能进度条有渐入动画 - [ ] 页面有滚动进度条 - [ ] 加载动画平滑无突兀 ### 内容检查 - [ ] 每个项目有角色/数据/技术栈 - [ ] 工作经历有公司/职位/描述 - [ ] 技能有熟练度可视化 - [ ] Blog 有阅读量/时间元数据 --- ## 9. 快速开始模板 ```tsx // 1. 基础布局 // 2. 内容区域 // 3. 页面加载器 ``` --- ## 10. 部署说明 ### EdgeOne Makers ```bash npm run build # 产物在 dist/ # 连接 GitHub 自动部署 ``` ### 关键环境变量 ``` # 如需 API 功能 VITE_API_ENDPOINT=https://api.example.com ``` --- > 最后更新：2026-04-28 | 版本：v1.0 Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Makers.