项目介绍

过去，数字身份连接了人与服务；未来，数字身份将连接人与 Agent、Agent 与 Agent。VeriAgent 致力于构建面向智能体时代的信任基础设施，通过可信身份、授权认证与全链路存证能力，为 Agent 建立可验证、可追溯、可治理的数字身份体系。在 AI 从工具迈向生产力主体的进程中，VeriAgent 正在为智能世界搭建一套值得信赖的运行规则。

在当今的产品设计与开发中，高效的设计交付不仅仅依赖于视觉创意，更需要流畅的开发协作和自动化工具的支持。本文将分享如何实现官网落地页的高质量设计交付。通过这一方案，我们不仅提升了设计交付的效率，还直接将代码交付给前端团队，确保了设计的原生呈现和开发效率的双重保障。让我们一起深入探索这一全流程的执行方案，如何在设计与开发之间架起一座高效沟通与执行的桥梁。

设计难点

该项目的开发周期极端，因此面临着诸多挑战：

  • 时间周期短：由于多个官网项目的时间周期都非常紧张，整个开发周期不足 1 周，我需要在有限的时间内完成高质量的设计。这要求我在设计阶段迅速做出决策，并高效地与开发团队配合，确保按时交付。

  • 物料不充足：在项目初期，由于缺少完整的设计物料和视觉参考，导致我在设计过程中面临了较大的困难。特别是在进行“唯视觉”设计时，缺乏清晰的物料会影响设计的精准度和美观度，因此我需要充分利用现有资源，并在沟通中寻求更多支持。

  • 不确定性强：项目中涉及多个未确定的内容，尤其是在设计方向和功能需求上。这种不确定性不仅影响了整体设计的框架，还导致我需要快速适应并灵活调整设计方案，以应对需求的变化。

  • 专业知识缺失：作为一名设计师，我没有代码编写背景，因此面对需要代码交付的任务时，完全依赖前端团队的支持。这使得我在整个设计交付过程中面临更大的挑战，需要弥补专业知识的空缺，并尽力确保交付的代码符合设计要求，确保团队的协同高效。

设计探索

初次尝试

面对紧张的项目周期与有限的人力资源，我们最初希望借助 AI 能力提升官网建设效率。第一版方案尝试将产品原型直接转换为 PRD，并结合参考案例生成完整页面设计，希望通过自动化流程快速完成设计与开发衔接。

然而在实际验证过程中，我们发现这种方式存在明显问题：AI 虽然能够生成页面结构与内容，但对于品牌调性、视觉层级、信息重点以及用户体验的把控仍然不足。输出结果往往缺乏统一性，页面质量波动较大，与最终交付标准存在较大差距。同时，由于项目内容尚未完全确定，仅依赖原型和参考案例生成页面，也难以准确体现业务价值与产品特色。

经过多轮尝试与复盘，我们逐渐意识到，AI 更适合作为设计能力的放大器，而非完全替代设计决策。因此后续方案调整为由设计师主导整体框架与关键体验设计，AI 负责辅助内容生成、代码实现及方案探索，在保证设计质量的同时提升整体交付效率。

增加参考和约束

为提升 AI 生成结果的稳定性，我们开始尝试为模型建立更加明确的设计与开发约束。

- 使用 react 框架搭配 Tailwind css；
- 如果使用组件，优先考虑 shadcnUI 组件库，官网链接：[https://ui.shadcn.com/](https://ui.shadcn.com/)；
- 保持界面风格干净、清爽，不要过多的文字堆积；
- 不要出现中英文混排，默认使用中文，只有无法翻译的专有名词等使用英文；

除此之外，我们还引入了 FrontDesign 等前端设计 Skill，并且找来了网站截图作为视觉参考，希望通过沉淀优秀实践和设计经验，进一步提升页面生成质量与视觉表现力。

然而在实际应用过程中，我们发现单纯依靠规则约束和 Skill 增强，虽然能够改善页面结构与代码质量，但对于品牌调性、视觉创意以及复杂业务场景的理解仍然有限。生成结果开始变得“正确”，但距离“优秀”仍存在明显差距，页面往往缺乏设计感与记忆点，难以达到官网级产品的交付标准。

使用组件重构

在持续探索过程中，我们开始调整思路，不再追求让 AI 一次性生成完整页面，而是尝试将优秀设计资源引入生成流程。基于 React、Tailwind CSS 与 FrontDesign 等能力积累，我们进一步引入 21st 等高质量组件资源库，将成熟的设计模块作为参考与基础素材，让 AI 在已有优秀设计的基础上进行组合、优化与调整。

实践结果表明，这种方式显著提升了页面质量。相比从零生成，AI 更擅长理解和改造已有的优秀设计方案，通过对组件、区块和交互模式的复用与重组，能够快速产出具有较高完成度的页面。同时，设计师也能够将更多精力投入到品牌表达、信息架构和关键体验设计中，而非重复性的页面搭建工作。

这一阶段的探索让我们意识到，AI 的最佳角色并非从零创造一切，而是在优秀设计资产的基础上进行放大与加速。通过引入成熟组件生态与设计资源库，我们验证了一条更加可落地、可复制的官网生产路径，官方网站：https://www.veriagent.ai/。

但是，真的仅仅是这样就到此为止了吗？

继续精进

随着 21st 等组件资源库的引入，我们逐渐验证了“优秀设计资产 + AI 优化”的路线是可行的。页面质量得到了明显提升，官网搭建效率也大幅提高。

但在实际使用过程中，一个新的问题开始浮现——为了获得理想的生成效果，我们仍然需要频繁地对页面进行局部调整：某个 Hero 区块需要优化、某个卡片样式需要修改、某个交互动效需要重新设计。为了让 AI 精准理解需求，往往需要对目标区域进行单独截图、补充说明、反复沟通，再重新生成结果。

虽然相比传统设计流程已经有了明显提效，但这种“截图—描述—调整”的工作模式依然存在较高的沟通成本，设计师大量时间消耗在表达需求，而非真正的设计决策上。

这让我们开始思考：如果能够让设计师直接在页面中选择目标区域，将视觉信息、代码结构与 AI 能力连接起来，是否能够进一步降低沟通成本，实现更高效、更精准的设计迭代？

带着这样的思考，我们开始着手开发 Design Cursor。它不再只是一个页面生成工具，而是连接设计师与 AI 的交互桥梁，让设计修改从“描述需求”变成“直接操作”，让 AI 真正融入设计工作流之中。

你可以前往点击链接前往 Chrome 商店安装：https://chromewebstore.google.com/detail/ikbnonpbbbhklkadklalfnkhmifkkdeo?authuser=0&hl=en

总结

本次项目并非一次简单的官网设计实践，而是一次 AI 驱动设计工作流的探索与验证。

在项目初期，我们尝试通过 PRD 与提示词直接驱动 AI 生成页面，但发现仅依赖模型能力难以保证设计质量与品牌表达。随后通过引入 FrontDesign 等 Skill、建立统一设计规范以及 React、Tailwind CSS、shadcn/ui 等技术约束，生成结果得到一定改善，但距离官网级交付标准仍存在差距。

真正的突破来自于设计资产的引入。通过结合 21st 等高质量组件资源库，AI 不再从零开始设计，而是在优秀案例基础上进行优化与重组，显著提升了页面质量与交付效率。同时，在持续实践过程中，我们发现设计师与 AI 之间的沟通成本逐渐成为新的效率瓶颈，并由此催生了 Design Cursor 的开发，希望进一步缩短设计意图到最终结果之间的距离。

最终，我们验证了一条可落地的 AI 官网生产流程：设计师负责方向与决策，优秀设计资产提供质量基础，AI 负责生成与加速，工具负责连接人与 AI。这不仅提升了项目交付效率，也为未来 AI 参与设计工作的模式提供了新的探索方向。

项目复盘

本次项目是一场 AI 驱动设计工作流的探索。从最初尝试直接由原型生成 PRD，再通过提示词与 Skill 输出页面，到引入 21st 等高质量组件库优化设计，最终催生了 Design Cursor 工具，我们经历了从“尝试—改进—工具化”的完整过程。复盘显示：

  1. 挑战验证了问题本质：时间紧张、物料有限、内容不确定以及专业知识缺失，使得纯 AI 自动生成存在明显局限。

  2. 约束与组件优化提升质量：通过统一技术栈、建立设计规范以及复用成熟组件，AI 生成效果显著提升，但仍需要设计师把控品牌与关键体验。

  3. 工具化解决沟通瓶颈：Design Cursor 将设计师与 AI 的交互从“描述需求”升级为“直接操作”，有效降低了沟通成本，提高迭代效率。

  4. 方法论落地：最佳流程体现了“设计师决策 + 优秀设计资产 + AI 加速 + 工具辅助”的模式，为未来 AI 参与设计提供了可复制、可落地的实践经验。

总结来看，本项目不仅完成了官网建设任务，更重要的是验证了一套高效的 AI 辅助设计工作流，同时为团队积累了规范、工具与方法论，为后续更多设计与开发项目提供了宝贵参考。