基于AI快速生成原型
Laiyong Wang Lv6

模型选择

ChatGPT、Gemini、Grok、Claude,模型主要在于整理需求,个人建议使用 ChatGPT。

ChatGPT:全能型、创意与日常生产力
Gemini:多模态、深度研究与科学推理
Grok:实时信息、幽默对话与趋势洞察
Claude:深度推理、长上下文写作与代码


基于模型,从会议纪要、头脑风暴、文档等资料内整理需求,把需求结构化

如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
【需求名称】
密评机构管理系统

【目标用户】
- 国家密码管理局
- 各省密码管理部门
- 密评机构

【核心目标】
实现密评机构从资质申请、审核、变更、能力验证到人员管理的全流程数字化管理

【包含的子业务】
1. 资质认定
2. 资质变更
3. 能力验证
4. 人员管理

【每个子业务的核心动作】
1. 资质认定:机构提交申请 → 审核 → 技术评审 → 发证
2. 资质变更:机构提交变更 → 审核 → 更新资质
3. 能力验证:定期考核 → 不合格整改 → 复审
4. 人员管理:维护人员信息 + 合规性校验

【关键约束/规则】
- 材料5个工作日内受理
- 虚假材料:1年内禁止申请
- 技术评审:60分及格 / 一票否决
- 能力验证不合格:整改6个月
- 欺骗获取资质:3年禁止申请

【系统边界】
- 不做实际测评(只做管理)
- 不做模型分析(只是流程系统)


原型设计选择

工具选择:Figma 、Stitch,都很强,且可以满足基本需求
figma:收费,有免费额度,模型可以选择市面上的多家模型
stitch:beta阶段,目前免费,google家的,目前模型只有gemini


Figma 原型示例

upload successful

upload successful

upload successful


Google Stitch 原型示例

upload successful

upload successful

upload successful


小结

整个过程可以收敛为三步:

1
2
3
4
5
模型(ChatGPT)

需求结构化(业务 + 规则)

Figma 、 Stitch 原型落地
$li-margin-bottom = 0.8rem $post-tool-button-width = 2.5rem .post-tools-container { padding-top var(--component-gap) .post-tools-list { li { margin-bottom $li-margin-bottom &:last-child { margin-bottom 0 } } li.tools-item { position relative box-sizing border-box width $post-tool-button-width height $post-tool-button-width color var(--text-color-3) font-size 1.2rem background var(--background-color-1) border-radius 50% box-shadow 2px 2px 5px var(--shadow-color) cursor pointer &:hover { box-shadow 2px 2px 8px var(--shadow-hover-color) } i { color var(--text-color-3) } &:hover { color var(--background-color-1) background var(--primary-color) i { color var(--background-color-1) !important } } &.toggle-show-toc { display none } &.go-to-comments { .post-comments-count { position absolute top 0 right -1rem display none align-items center justify-content center box-sizing border-box min-width 1.1rem height 1.1rem padding 0 0.2rem color var(--badge-color) font-size 12px background var(--badge-background-color) border-radius 0.4rem +keep-tablet() { display none !important } } } } li.status-item { width $post-tool-button-width height $post-tool-button-width color var(--text-color-3) font-size 1.6rem cursor pointer &.post-lock { cursor default .fa-lock-open { display none color var(--keep-success-color) } &.decrypt { cursor pointer .fa-lock-open { display block } .fa-lock { display none } } } } } }