你是个人审美判断的顶级数字艺术总监、交互设计师与创意前端工程师。 请在当前工作区设计并实现一份“关于你自己”的前端作品。...
Prompt
你是个人审美判断的顶级数字艺术总监、交互设计师与创意前端工程师。 请在当前工作区设计并实现一份“关于你自己”的前端作品。它不是企业官网，也不是产品落地页，而应是一件能让人感受到你如何思考、如何创造、如何与人协作的数字体验。 你拥有完全的创作自由： - 自行选择 React 或 Vue； - 自行决定是否使用 Three.js、WebGL、Canvas、SVG、GSAP、音频或其他技术； - 自行决定信息架构、视觉语言、交互方式、内容数量和叙事节奏； - 不需要迎合 “AI 科技风”，也不必使用暗色、霓虹、粒子、玻璃拟态、终端或打字机。只有当它们真正服务于概念时才使用。 请把重点放在 “你认为最值得被体验的设计概念” 上，而不是功能数量。 你的作品必须满足以下高层标准： 1. 有独立的核心概念 - 在开始编码前，先用不超过 200 字写出作品的核心隐喻或创意命题。 - 这个概念必须影响视觉、文案、交互、排版和动效，而不能只是首页的一句口号。 - 访客体验完后，能用一句话描述这个作品独特在哪里。 2. 有明确的艺术总监判断 - 选择一种清晰且一致的视觉语言。 - 在字体、色彩、留白、材质、图形、节奏和动效上作出主动取舍。 - 不要使用 “默认好看” 的模板组合来回避设计决策。 - 避免无意义装饰、无意义发光、无意义卡片、无意义滚动动画。 3. 有值得探索的交互 - 交互应让用户参与理解 “你是谁”，而不是只为了让页面动起来。 - 至少包含一个会让用户愿意主动尝试、并产生不同结果或不同感受的交互。 - 动效应具备节奏、重量、反馈和目的；不要把淡入上移当成主要动画方案。 - 如果你认为静态或克制比复杂动效更符合概念，可以克制，但必须让这种克制成为有说服力的设计选择。 4. 具备真实前端实现质量 - 页面必须在桌面和手机上可用。 - 考虑键盘操作、文本可读性、焦点状态与 prefers-reduced-motion。 - 如果使用重型视觉技术，必须有性能意识和降级策略。 - 使用清晰、可维护的组件结构。 - 不得使用需要密钥的服务；项目必须能够本地运行和生产构建。 5. 允许大胆，但不允许半成品 - 可以选择极简、编辑感、游戏化、诗意、实验性、艺术装置感、数据可视化或任何其他方向。 - 不要为了展示技术而堆叠技术。 - 不要为了展示设计而牺牲可用性。 - 每一个显眼的设计和技术选择都应有理由。 评判标准不是页面元素数量，也不是库的数量，而是： “它是否像一位有审美、会思考、能够把概念落地为完整体验的创意前端作者的作品？” 本次任务的隐含目标是冲击顶级创意前端作品质量，而不是完成一个合格网站。 因此，即使你选择极简风格，也必须具备强烈的视觉记忆点与高完成度的动态体验。纯静态排版、普通官网动效、简单滚动淡入、悬浮卡片、基础粒子背景，均不足以满足要求。 请自行设计并实现一个 “核心体验装置”： - 它必须是整站视觉和交互的中心； - 必须在用户操作、滚动进度或页面状态变化下产生连续、精致、不可替代的视觉反馈； - 它必须有自己的运动逻辑、状态变化与节奏，而非单次播放动画； - 它必须与 “你是谁” 的概念直接相关； - 技术实现由你自行选择，但需达到明显超出常规 Landing Page 的表现力。 动效质量要求： - 将动效视为编舞，而非元素出现方式； - 至少设计一个具有完整 “开始—发展—转折—收束” 的长时序体验； - 至少设计一个让用户主动探索后才会发现的微交互或隐藏层次； - 页面章节之间必须有状态延续或视觉因果，不能像互不相关的区块拼接； - 动效需要兼顾缓动、延迟、层级、物理感、声音/触觉替代反馈和性能； - 禁止将 opacity + translateY 的批量 reveal 作为主要动画手段。 请把实现时间优先投入到： 1. 首屏与核心体验装置； 2. 最关键的一次章节转场； 3. 交互反馈和细节； 4. 移动端与 reduced-motion 的高质量替代方案； 而不是把时间平均分给大量普通区块。 工作方式： 1. 先检查仓库和可用依赖。 2. 先输出以下内容，再编码： - 核心概念； - 访客体验路径； - 视觉与交互原则； - 你主动决定 “不做” 的三件事及原因。 3. 完成第一版后，不要立刻结束。 4. 以严格的创意总监身份审查自己的作品，分别从： - 概念是否贯穿； - 是否有模板感； - 是否有无意义动效； - 首屏是否有记忆点； - 信息是否易懂； - 移动端和可访问性是否成立； - 性能是否合理； 逐项批评。 5. 根据批评进行至少一轮实质性重构或打磨，而不是只改文案和颜色。 6. 最后必须运行生产构建并修复全部错误。
A system prompt was added to support web rendering
