帮我仿照截图和贴出网站：
@https://notebooklm.google.com/
目标：写一个AI小说编辑的网站
技术要求：使用React + Tailwind CSS等技术
UI要求：
优雅的极简主义美学与功能的完美平衡;
清新柔和的渐变配色与品牌色系浑然一体;
恰到好处的留白设计;
轻盈通透的沉浸式体验;
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现;
用户视线能自然聚焦核心功能;
细腻的微交互;
舒适的视觉比例;
特别注意图片等静态资源用SVG，不要写不存在的路径
功能要求：
分析优化：利用节奏和情感分析完善小说。
1. 项目管理
功能：创建、保存、切换多个小说项目，存储元数据、角色、章节等。
示例：用户创建“江南纯爱小说”项目，保存所有设定和章节。
2. 小说元数据
小说取名：AI根据类型、情节或用户输入生成标题（如“烟雨江南”）。
小说类型：选择预定义类型（玄幻、纯爱、悬疑）或自定义。
写作风格：
选择通俗、文艺或模仿特定作者（如金庸、简·奥斯汀）。
实现：通过风格提示或微调LLM模仿作者语感。
3. 角色管理
角色信息：
姓名、性格（如温柔坚韧）、背景、目标。
AI生成建议：用户输入“女主角，江南设计师”，AI生成详细小传。
角色关系：
可视化关系图，定义恋人、敌对等关系。
实现：使用D3.js绘制交互式关系图，存储在数据库。
MCP支持：角色数据作为记忆单元，生成对话时参考性格和关系。
4. 世界构建
功能：存储设定（如江南水乡的烟雨氛围、修炼体系）。
RAG支持：检索外部知识（如木兰花的文化意象），生成真实细节。
示例：用户输入“江南小镇”，RAG从知识库提取青石桥、油纸伞等元素。
5. 大纲与情节
大纲主线：分层编辑器，规划章节、场景和关键事件。
小说爆点：AI建议高潮或转折（如“主角揭开身世秘密”）。
实现：存储时间线和事件表，MCP确保情节连贯。
示例：用户设定“第5章：家族反对加剧”，AI生成冲突场景。
6. 章节管理
章节组织：添加、删除、重排序章节，记录每章摘要。
备忘录：用户添加笔记（如“第4章需突出纯爱”）。
上下文：MCP存储前文摘要和伏笔（如木兰花刺绣），生成新章节时参考。
示例：生成第4章，AI根据前文（家族反对）延续剧情。