我要投稿

提示词生成原型别太香！教程一步不落教给你

发布日期：2025-07-16 06:39:47 浏览次数： 2140

作者：大瑜聊AI

微信搜一搜，关注“大瑜聊AI”

很多人都知道用提示词写文章、写脚本。但是很少人知道用提示词可以生成原型图。

生成的结果图实在是太残暴了，关键是仅仅花费不到1min钟，就可以把你的天马行空想法变成活生生界面实现效果展现在你面前。

简直是太逆天了！不信接着往下看。

譬如说你看到的原型图是这样的：

null

也可以是这样的：

null

你以为这是ui用figma或者其他原型工具画的吗？错！其实都是AI提示词生成的。

那么今天大瑜就用简单的步骤告诉你是如何做出一款这样的提示词。

tips：提示词的大部分思路来源于b站博主：熠辉IndieDev，并添加了一些自己的内容。

步骤一：功能描述

其实直接思路就是：描述好你的功能，让大模型明白你是要做什么内容。

null

步骤二：原型设计

原型设计主要分为五部分：ux分析、产品界面规划、高保真UI设计、风格设定、html原型实现。

我们首先进行ux分析的目的就是为了研究用户行为，设计恰当地流程。

null

接下来就是产品界面的规划，确定产品的整体形态和主要功能设计。

null

后面就是进行ui界面的设计思考了。譬如说我们可以选择遵守ios规范、tailwildcss规范、element-ui规范来进行设计。

null

风格设定，属于在ui设计的基础上进行一些补充，譬如加入高级紫色、绿色小清新等内容，来补充具体的风格。

null

接下来是原型生成，需要告诉大模型生成大模型采用的技术框架。

null

最后就是生成的整体交付物了。告诉大模型我们想要什么内容。

null

步骤三：注意事项

譬如说这里，可以加上一些注意事项：

所有设计和代码实现都需符合现代移动应用的标准，兼顾视觉美观性、技术可行性以及未来的可扩展性。

当然，完整的提示词已经整理好在附件了，只需要根据自己的需求进行微调即可。

私信回复我：原型提示词，我将整个提示词发给您。

二、各个大模型的效果如何

至于提示词效果如何，我们看看各个大模型的表现如何：

1、首先登场是kimi最新的k2模型。第一次效果还可以，但是偶尔会抽风，不确定很大，需要多次抽卡。

null

2、这个是cursor+claude4的效果

null

这个是trae+claude 的实现效果，

null

下面这个是完全用calude实现的效果。最后发现原生的效果还能接受。

null

写在后面的话

上面就是我用提示词生成的原型图，虽然称不上最优秀的，但是已经超越了我的预期。

后续借助AI编程的力量，没学习过代码的人也可以做小程序、做ios客户端了。

53AI，企业落地大模型首选服务商

产品：场景落地咨询+大模型应用平台+行业解决方案

承诺：免费POC验证，效果达标后再合作。零风险落地应用大模型，已交付160+中大型企业

相关资讯

2026-04-14

AI 工程化实战：如何像设计函数参数一样设计 System Prompt？

2026-04-14

Karpathy 的 CLAUDE.md，到底解决了什么问题

2026-04-09

如何让生成式AI更懂你？全新交互模型IAI，重塑人机协同范式

2026-04-07

不再触发Claude使用限制，大幅降低Token的10个有效习惯！

2026-03-31

Harness 不是加一行规则那么简单——我从三家顶级公司学到了什么

2026-03-27

别再死磕 PMF 了！AgaaS 时代，中国 To B 创业者的最后一张船票

2026-03-26

7 个 Karpathy 式提示词，让 Claude 变成你的研究员、工程师和思考搭档

2026-03-26

Claude Code终极指令速查表

联系获取

联系获取

160+中大型企业正在使用53AI

立即咨询预约演示

把握AI发展的机遇，共同探索、共同进步

2025-01-22

如何打造基于GenAI的员工服务机器人

2025-01-22

热点资讯

Cursor 的 5 种指令方法比较：AGENTS.md、规则（Rules）、命令（Commands）、技能（Skills）、子代理（Subagents）

2026-01-29

龙虾Token焦虑自救指南

2026-02-26

Antigravity 新增 Skills 支持，前端 UI 开发效率飙升

2026-01-18

谷歌官方推出！10 个 Gem 提示词，附详细Gem自律助手创建流程

2026-01-30

一文讲清楚创建Skills的3种方法

2026-01-17

Anthropic 黑客松冠军项目 Everything Claude Code 完整上手攻略

2026-02-24

Agent Skills 终极指南：从零到精通

2026-02-04

Agent Skills 终极指南：入门、精通、预测

2026-01-18

别再裸用 Claude Code，这 20 个隐藏命令，太爽了

2026-03-18

2026 Claude Skills 全岗位合集（新增篇）：6类全新岗位，18个高价值Agent Skill，告别无效加班

2026-03-07

大家都在问

AI 工程化实战：如何像设计函数参数一样设计 System Prompt？

2026-04-14

Google说只有5%的人真正会用AI，他们做对了什么？

2026-02-28

Prompt caching 技术是如何实现 1 折的推理成本优化的？

2026-02-12

几句话就能复刻一个付费Skill，Skills商店还能卖什么？

2026-02-12

从 Prompt 到 Skills：如何把业务流程切开，塞进AI的“技能槽”里？

2026-02-08

Prompt 的本质是“思维压缩包”：如何从结果中反推创作者的认知模型？

2026-02-05

当AI能替你干活，什么能力决定你不可替代？

2026-02-05

Skills 真能取代 MCP 和 Prompts 吗？

2026-01-23

热门标签

内容创作大模型技术个人提效 langchain llamaindex 多模态技术 RAG技术智能客服知识图谱模型微调 RAGFlow coze Dify Fastgpt Bisheng Qanything AI+汽车 AI+金融 AI+工业 AI+培训 AI+SaaS Skill 提示词技巧 AI+电商 AI面试数字员工 ChatBI AI知识库开源大模型智能营销智能硬件智能化改造 AI+医疗 MaxKB Palantir Glean Openclaw

应聘简历请发送至： ceo@53ai.com

联系我们

售前咨询

预约演示

微信扫码

添加专属顾问

回到顶部