导语
在当今的产品设计与开发中，高效的设计交付不仅仅依赖于视觉创意，更需要流畅的开发协作和自动化工具的支持。本文将分享如何利用Codex与21st 组件库、react bits 动画库结合，实现官网落地页的高质量设计交付。通过这一方案，我们不仅提升了设计交付的效率，还直接将代码交付给前端团队，确保了设计的原生呈现和开发效率的双重保障。让我们一起深入探索这一全流程的执行方案，如何在设计与开发之间架起一座高效沟通与执行的桥梁。
设计挑战
在项目实施过程中，面对时间紧张的工期与不断变化的需求，我遇到了多个设计挑战。这不仅对项目本身提出了高要求，也成为了对我个人能力的一次重要考验。具体挑战如下：
时间周期短
由于多个官网项目的时间周期都非常紧张，我需要在有限的时间内完成高质量的设计。这要求我在设计阶段迅速做出决策，并高效地与开发团队配合，确保按时交付。
物料不足
在项目初期，由于缺少完整的设计物料和视觉参考，导致我在设计过程中面临了较大的困难。特别是在进行“唯视觉”设计时，缺乏清晰的物料会影响设计的精准度和美观度，因此我需要充分利用现有资源，并在沟通中寻求更多支持。
不确定性强
项目中涉及多个未确定的内容，尤其是在设计方向和功能需求上。这种不确定性不仅影响了整体设计的框架，还导致我需要快速适应并灵活调整设计方案，以应对需求的变化。
专业知识缺失
作为一名设计师，我没有代码编写背景，因此面对需要代码交付的任务时，完全依赖前端团队的支持。这使得我在整个设计交付过程中面临更大的挑战，需要弥补专业知识的空缺，并尽力确保交付的代码符合设计要求，确保团队的协同高效。
操作流程
在任何项目的设计阶段，如何高效地从概念到实际交付是一个至关重要的课题。通过不断优化和调整，我们构建了一个标准化的设计流程，以确保从产品需求文档（PRD）的生成，到最终的代码交付每一环节都精准高效。以下是我的完整设计流程：
生成 PRD
设计流程的第一步是生成产品需求文档（PRD）。这是整个设计和开发工作的基础，明确了项目的目标、功能需求、技术框架、以及设计方向。在这一阶段，所有团队成员都对项目的目标有了清晰的理解，为后续工作打下了坚实的基础。
搭配 Skill 生成
在明确了产品需求后，设计阶段紧接着需要搭配相关的技能与资源。我们将设计与技术结合，生成与项目需求高度契合的Skill（即工作流自动化脚本或工具）。这一阶段的核心目标是通过技能与工具的组合，提升项目的自动化和效率，从而减少手动操作和重复劳动。
除了 skill 以外，提示词也是至关重要的，我这里建议在提示词种增加如下内容：
使用 react 框架搭配 Tailwind css；
如果使用组件，优先考虑 shadcnUI 组件库，官网链接：https://ui.shadcn.com/；
保持界面风格干净、清爽，不要过多的文字堆积；
不要出现中英文混排，默认使用中文，只有无法翻译的专有名词等使用英文；
同时搭配一定的参考图，就像我在当前版本新神 codex，你需要的都在这！这篇文章里写的一样。
视觉优化
在项目的中期阶段，我们开始对所使用的21st 组件进行优化。这一优化的重点是确保每个组件的高效与统一，特别是在视觉风格和功能性上的一致性。通过这一阶段的调整，我们能够确保最终设计的用户体验与界面效果达到最佳状态，并确保组件能够无缝地与后端代码对接。
组件网站链接我放在这里了：https://21st.dev/home
此外，对于动画效果，你可以使用 react bit：https://reactbits.dev/
当然，还有更多可以制作官网的内容，原子化、模块化、模板化应有尽有个，我这里列出来了：
标题 | 类型 | 链接 | 付费情况 |
|---|---|---|---|
MagicUI | 组件 | https://magicui.design/docs/components | 部分付费 |
AceternityUI | 组件 | https://ui.aceternity.com/components | 部分付费 |
21st | 组件 | https://21st.dev/ | 约等于免费 |
Reactbits | 组件 | https://reactbits.dev/ | 免费 |
ShadcnBlocks | 模块 | https://www.shadcnblocks.com/ | 部分付费 |
Preline Blocks | 模块 | https://preline.co/blocks/ | 部分付费 |
这里推荐一下我的小插件，它可以帮助你在 Codex 中实现像 Figma 一样调整网站然后交给 AI 来还原改动。
性能问题
不要过多的依赖 21st 的 hero、background 这些组件，因为他们都用到了 canvas，一般使用 WebGL 引擎，这里面很多动画效果是用户电脑本地实时渲染的，打开你的网站有可能直接卡死了，甚至你开发的时候都能明显感觉到卡，canvas 本身就是个技术难度很高的东西，大厂甚至都需要专门的一个技术团队做优化算法，可见其本身的性能问题之大（飞书多维表格整个就是一个 canvas 画布渲染的）。
正因如此，千万不要过度的依赖 hero 这些超多动画的组件，否则你的性能问题一定会跟着来！
交付代码
最终，设计完成后，进入代码交付环节。此时，设计稿转化为可直接使用的前端代码，并通过版本控制系统（如GitLab、Github）进行推送和交付。设计师与开发团队紧密配合，确保最终交付的代码符合设计规范，并能够顺利应用于实际的开发工作中。
总结
通过这个标准化的流程，我们能够在项目紧张的时间内确保设计质量与开发效率的平衡，确保每一阶段都高效衔接，从而实现项目的快速上线与交付。这不仅提升了团队之间的协作效率，也为项目的顺利推进提供了有力保障。