从丑到美！我用AI打造“吉卜力风”个人主页的探索之路

本文链接：https://blog.csdn.net/wxaiway/article/details/146969963

最近吉卜力风格流行，刚好想做一个个人网页，下面是我的一个制作单页面的尝试过程，大家可以参考一下。

先放上链接及最终成果图

根据自己的需求，先用 Kimi 生成一份提示词

### 生成个人主页提示词 **目标**：创建一个优雅、专业且具有吉卜力风格的个人主页，展示个人资料、专业背景、技能、常用网站链接等信息，同时提供良好的用户体验和视觉效果。 **核心内容**： 1. **个人资料卡片**： - 圆形头像 - 名字：WxAiWay - 职业描述：Full Stack Developer & Tech Enthusiast - 背景颜色：舒适的紫色 2. **“关于我”部分**： - 用中文介绍专业背景和技能 - 列出使用的技术：React、Node.js、TypeScript等 3. **“常用网站”部分**： - 链接到GitHub、LinkedIn、Twitter和个人博客的图标 4. **底部“欢迎关注”部分**： - 展示微信的标识 - 用于吸引关注者订阅公众号或社交媒体账号 5. **版权信息和年份** **设计风格**： - **整体风格**：融合吉卜力的童话般美学与现代UI的功能性和可用性 - **视觉层次**：清晰的视觉层次结构，突出重要内容 - **配色方案**： - 主色调：淡蓝、柔和的绿色、温暖的棕色、淡粉色 - 对比度：高对比度但不刺眼，明暗对比鲜明但过渡自然 - 色彩层次：通过细微的色调变化创造深度 - **设计细节**： - 反扁平化设计：结合3D景深与2D手绘 - 叙事性界面：页面转场有故事线索 - 自然与魔法融合：植物、云朵、飞行物等元素有机结合 - 手绘质感：线条不完美但充满生命力 - 纹理细腻：微妙的纹理增加表面细节和温暖感 - 自然质感：水波纹、植被、云层算法 - 色彩法则：莫兰迪色系+光晕叠加 - 动态呼吸感：0.5秒延迟动画 **技术规范**： - **前端技术**： - HTML5 - TailwindCSS 3.0+（通过CDN引入） - 必要的JavaScript - **代码要求**： - 结构清晰 - 包含适当注释，便于理解和维护 - **视觉效果实现**： - SVG滤镜实现柔光效果（模拟赛璐璐质感） - CSS混合模式创建水彩叠加 - WebGL渲染优化（保持60FPS的精灵动画） **响应式设计**： - **适配设备**：手机、平板、桌面 - **优化内容**： - 针对不同屏幕尺寸优化布局和字体大小 - 确保移动端有良好的触控体验 - **动效设计**： - 流畅而魔幻的动效，类似吉卜力动画中的场景转换 - 智能生成组件（带铅笔纹理的按钮） - 动态背景渲染（实时云层运动算法） - 自适应布局（魔法森林般的响应式规则） **图标与视觉元素**： - 使用专业图标库（如Font Awesome或Material Icons，通过CDN引入） - 根据内容主题选择合适的插图或图表展示数据 - 避免使用emoji作为主要图标 **交互体验**： - 按钮悬停时有轻微放大和颜色变化 - 卡片元素悬停时有精致的阴影和边框效果 - 页面滚动时有平滑过渡效果 - 内容区块加载时有优雅的淡入动画 **性能优化**： - 确保页面加载速度快 - 避免不必要的大型资源 - 实现懒加载技术用于长页面内容 **输出要求**： - 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript - 确保代码符合W3C标准，无错误警告 - 页面在不同浏览器中保持一致的外观和功能