[Day4] 绝望审美、不会前端、并非产品，我是怎么设计这个项目的？本文带你一探究竟-开发者社区

如标题所述，由于我个人审美较为普通，且对前端知识了解有限，依靠自己绘制 UI 来设计前端界面实在不太现实，要是等我熟练掌握相关技能，恐怕时机早已错过。那么，接下来就让我为大家揭秘前端设计与开发的全过程吧。

产品功能规划

首先，我向 AI 描述了自己心中的产品想法以及最终想要达成的目标，让它帮忙搜索类似产品及其功能设计，并据此给出一个产品框架。
例如，向 AI 提出这样的指令：

你是一个资深产品设计师，请你阅读产品需求后给出一个粗略的技术文档，要求语气专业，结构分层清晰，内容简练，不包含代码展示，你可以在结尾自行增加产品需求并给出你的建议。 产品需求：基于Java的智能合同审查平台，整合系统提示词模板、规则库与知识库，对合同条款进行并发审查，输出结构化报告与建议，并提供报告阶段对话问答占位。

通过这样的方式，就能获得一个最初的产品设计稿。但这并非一蹴而就，在明确所需功能后，我会将这些功能分块，逐个向 AI 询问具体的功能内容和产品设计。并且，在这个过程中，我会使用多个 AI 进行 “交叉验证”，让它们相互评价并修改稿子。
这一步着实花费了不少时间，需要不断打磨产品功能的细节。由于不便展示整个设计文档，下面大概描述一下文档的几个主要部分：

文档结构

核心功能：明确产品最关键的功能模块。
定位：确定产品在市场中的定位和目标用户群体。
MVP 目标：定义最小可行产品（MVP）要达成的目标。
域模型：描述产品涉及的业务领域模型。
端到端用例：展示从用户操作开始到最终获得结果的完整流程用例。
保真模型设计：这部分内容在后续 UI设计中会用到。
杂项设计：包括向导规格、用户引导、错误提示、字段校验等方面的设计。
接口契约：规定不同模块之间交互的接口规则。

每个大的功能模块，如报告模块、审查模块、提示词模块等，都会按照以上结构输出文档。你在规划自己产品功能时，是否也会采用类似的清晰结构呢？
UI 界面设计
完成产品功能设计后，就该考虑如何在界面上展示这些功能了。这一步主要借助 Figma Make 来实现。Figma Make 是 figma 自带的 AI 工具，每天有一定的免费使用额度。
此时，上一步文档中的 “保真模型设计” 就派上用场了。通过设计低保真、中保真、高保真模型，逐步降低试错成本，完成界面设计，避免因步子迈得太大而出现问题。
以下是一个初版废案示例，需要注意的是，AI 的输出并非一成不变，你可以根据实际情况进行修改，修改后再进行后续流程往往会更加顺利。

- **入口与路由**：在报告页右上“文章对比”入口，或任务详情某条款的“查看对比”。 - **布局**：三栏结构（左目录/中原文/右修改后），目录项点击联动左右两栏同步滚动定位。 - **高保真样式**：Git风格差异高亮（删除红色删除线、新增绿色底、修改蓝色下划线），段落级卡片、行内diff标注、风险点锚点徽标。 - **交互**： - 风险点点击 → 同步滚动至左右文本对应处，并在两侧短暂高亮2秒。 - 锚点与段落序号一一对应，支持上一处/下一处快捷跳转。 - 同步滚动开关：默认开启，可关闭为独立滚动。 - 视图模式：并排模式、单列（原文/修改后）切换，支持只看差异（隐藏未变更）。 - **技术方案（设计描述）**： - **对齐算法**：段落→句子→token三级diff；建议采用基于最长公共子序列（LCS）的token diff（空格与标点归一化），输出操作集del/ins/replace。 - **定位与同步**：为每个段落/句子生成稳定锚点id（p - idx/s - idx），目录点击通过scrollIntoView +对侧查表映射实现双栏同步。 - **高亮渲染**：将diff操作映射到span标记并应用样式类（.diff - ins、.diff - del、.diff - rep）；对长段落分片虚拟渲染避免卡顿。 - **性能**：大文本采用增量渲染与IntersectionObserver触发渲染、节流滚动同步（16ms内只执行一次）。 - **可访问性**：为差异片段添加aria - label与title，键盘快捷键支持（j/k上下一个差异）。 - **字段与接口占位**： - GET /api/reports/:taskId/diff?scope = contract|clause&clauseId = 可返回{ blocks:[{id, leftText, rightText, diffs:[{type, start, end, tokens[]}]}], anchors[] }。 - 风险点映射：报告中finding.itemId ↔ diff.blocks[].id，点击finding时携带anchor定位。 - **Figma标注要点**： - Token级高亮色值：ins #E6FFED绿底、del #FFEBEB红底 + 划线、rep #EAF2FF蓝点下划线。 - 目录项状态色：未变更灰、已修改黄、优化绿。 - 动效：定位后2秒淡出高亮（opacity 1→0.3）。

大家在进行 UI 设计时，有没有遇到过因为 AI 输出不符合预期，而需要反复修改的情况呢？

前端开发实践

前端开发在界面设计完成后展开。实际上，在 figma 中每次进行保真模型设计时，都已经以代码形式呈现了部分前端内容。当然，如果将设计与开发分开进行也是可行的，只需把上一步的保真模型交给 AI，让它协助完成项目，但在这个过程中可能需要更多的调整。
由于我对前端了解有限，能分享的内容不算多，只能确保前端功能可用。