Step 02
做出来
AI 编程、无代码、原型设计、UI 与图标素材
怎么选
这一步的目标只有一个:用最短时间做出一个能给真实用户用的版本。现在一个不太会写代码的人,借助 AI 编程工具也能做出可用的网站和小工具,关键是选对组合,而不是追最新的那个。
怎么选:会一点代码、想完全掌控项目的,选 Cursor、Trae 这类 AI 编辑器;习惯命令行、项目已经有一定规模的,可以试 Claude Code、Codex 这类终端 Agent;完全不想碰代码的,先用 v0、Framer 这类工具生成页面,跑通了再说。国内网络环境下,Trae 有国内版,访问和付款都更省心。
动手写代码之前,建议先用 Excalidraw 或 draw.io 画一张流程草图,再用 Figma 摆一下关键页面,能少走很多弯路。图标和 UI 组件不要自己画:Lucide、iconfont、shadcn/ui 都是免费的,直接拿来用,把时间留给真正让你与众不同的那部分功能。
常见问题
- 不太会写代码,能自己做出网站吗?
- 可以。现在借助 AI 编程工具,一个不太会写代码的人也能做出可用的网站和小工具,关键是选对组合,而不是追最新的那个。完全不想碰代码的,可以先用 v0、Framer 这类工具生成页面,跑通了再说。
- AI 编程工具怎么选:Cursor、Trae 还是 Claude Code?
- 会一点代码、想完全掌控项目的,选 Cursor、Trae 这类 AI 编辑器;习惯命令行、项目已经有一定规模的,可以试 Claude Code、Codex 这类终端 Agent。
- 国内用哪个 AI 编程工具比较省心?
- 国内网络环境下,Trae 有国内版,访问和付款都更省心。
- 写代码之前要先画原型吗?
- 建议先用 Excalidraw 或 draw.io 画一张流程草图,再用 Figma 摆一下关键页面,能少走很多弯路。
- 图标和 UI 组件去哪里找免费的?
- 不要自己画:Lucide、iconfont、shadcn/ui 都是免费的,直接拿来用,把时间留给真正让你与众不同的那部分功能。
共 44 个工具
Cursor
AI 代码编辑器
基于 VS Code 的 AI 编辑器,可以让 Agent 读懂整个项目、跨文件修改代码,也支持云端 Agent 和命令行。
Windsurf(现 Devin Desktop)
多 Agent 管理的 AI 编辑器
原 Windsurf 编辑器,旧网址现已跳转到 Devin Desktop,可以在一个界面里管理本地和云端的多个编程 Agent。
GitHub Copilot
GitHub 官方的 AI 编程助手
可以在 VS Code、JetBrains 等编辑器、命令行和 GitHub 网页里使用,能把 Issue 分配给 Copilot 自动提 PR。
TRAE
字节跳动出品的 AI 开发平台
同时有 Agent 模式和 IDE 模式,可以统筹多个项目和 Agent;有国内版(trae.cn)和国际版(trae.ai)。
Kiro
先写规格再写代码的 AI IDE
把提示词先转成可执行的需求规格,再让 Agent 按规格实现和验证,适合想让 AI 写得更可控的项目。
Claude Code
Anthropic 的终端编程 Agent
在命令行里运行,能理解整个代码库、直接改文件和执行命令,也有 IDE 插件和桌面端。
Codex
OpenAI 的编程 Agent
可以在 ChatGPT 桌面端、命令行、IDE 插件和云端使用,能并行跑多个编程任务,也能接 GitHub 做代码审查。
v0
Vercel 出品的 AI 建站工具
用对话描述需求就能生成可运行的全栈网页应用,并一键部署到 Vercel。
Framer
可视化网站搭建工具
在画布上拖拽设计就能直接发布网站,自带托管、CMS 和 SEO 设置,也有 AI 设计助手。
Dify
可视化搭建 AI 应用和工作流
拖拽就能做聊天机器人、知识库问答和 AI 工作流,支持接入多家模型,可以自部署也有云服务。
NocoDB
开源的 Airtable 替代
把数据库变成像表格一样好用的界面,支持看板、表单和接口,适合做轻量后台和数据管理。
Appsmith
拖拽搭建内部工具和后台
连接数据库或接口后,拖拽组件就能做出管理后台、数据面板和审核工具。
ToolJet
低代码内部应用搭建平台
可视化拖拽加少量代码,快速做出后台、仪表盘和表单类应用,也支持用 AI 生成初版。
Budibase
开源的低代码应用与自动化平台
内置数据库、表单、审批和自动化流程,适合把日常运营里的重复操作做成小应用。
Smithery
MCP Server 集合站
收录大量 MCP 服务,可以让 AI Agent 快速连上各种外部工具和服务,并帮你处理授权。
AI SDK
Vercel 的 TypeScript AI 开发库
用统一的接口调用多家大模型,内置流式输出和多模型切换,做 AI 应用时少写很多样板代码。
shadcn/ui
可复制粘贴的 React 组件
组件代码直接拷进你的项目,想怎么改都行,是目前 React / Next.js 项目最常用的 UI 起点之一。
tweakcn
shadcn/ui 主题编辑器
在网页上可视化调整颜色、圆角、字体,实时预览后导出主题代码,支持 Tailwind CSS v4。
React Flow
做节点连线界面的 React 库
用来搭建工作流编辑器、思维导图、可视化流程等「拖拽节点 + 连线」类界面。
Hoppscotch
开源的 API 调试工具
轻量的 Postman 替代,网页、桌面端都能用,测试接口、管理请求集合都很顺手。
Figma
在线协作的界面设计工具
浏览器里就能做界面设计、原型和设计稿交付,团队可以实时一起改,也加入了 AI 和代码相关功能。
draw.io
免费的流程图和架构图工具
能画流程图、架构图、UML 等各类图,文件可以存在你自己选的地方,网页版和桌面版都有。
ProcessOn
国产在线作图与协作工具
支持思维导图、流程图、甘特图、ER 图等多种图形,可以多人实时协作,也能用 AI 一键生成导图。
Excalidraw
手绘风格的在线白板
画出来的图像手绘草稿,适合快速画产品草图、讲解思路,支持多人协作。
Open Design
本地优先的 AI 设计工作台
用对话让 AI 生成原型、网页和动效设计稿,可以接入你自己的编程 Agent 和模型。
Penpot
开源的 Figma 替代
浏览器里就能做界面设计和原型,支持多人协作,设计稿基于开放的 SVG 和 CSS 标准,也可以自部署。
tldraw
无限画布白板
打开网页就能画草图、流程图和线框图,手感流畅;开发者还能用它的 SDK 做自己的画布应用。
Lucide
风格统一的开源图标库
社区维护的线性图标集,从 Feather Icons 分叉而来,提供 React、Vue 等多种框架的组件包。
iconfont
阿里巴巴矢量图标库
国内图标资源最丰富的平台之一,支持图标下载、在线存储和格式转换,可以生成图标字体直接用在项目里。
Material Symbols
Google 官方图标集
Material Design 的官方图标,现以 Material Symbols 形式提供,单个字体文件里包含 2500 多个图标和多种样式。
Font Awesome
最常用的网页图标工具包之一
提供 SVG、图标字体和 CSS 多种用法,有开源免费版,也有包含更多图标的付费版。
Color Hunt
配色方案灵感库
每天更新精选的四色配色方案,不会配色时挑一套直接用,网站和封面图都能用上。
LottieFiles
Lottie 动画素材与工具
提供大量轻量级的 Lottie 动画,可以直接嵌入网页和 App,也能在线编辑和测试动画。
Simple Icons
几千个品牌 Logo 的 SVG 图标
收录常见公司、产品和平台的品牌标识,统一的 SVG 格式,做「支持平台」「技术栈」展示时很方便。
OpenCode
开源的终端编程 Agent
在命令行里运行的开源编程 Agent,可以接入多家模型,用法与 Claude Code、Codex 类似。
Orca
同时管理多个编程 Agent 的工作台
在隔离的 worktree 里并行运行 Claude Code、Codex、Gemini 等命令行 Agent,桌面端和移动端都能查看进度。
Claude Code 官方插件目录
Anthropic 维护的 Claude Code 插件清单
官方整理的高质量 Claude Code 插件目录,给你的编程 Agent 加技能前先来这里找。
CLI-Anything
让 AI Agent 能操作各种软件
把图形界面软件、开发工具和 Web API 包装成 Agent 能调用的命令行工具,并提供一个工具注册中心。
Context Mode
给编程 Agent 省上下文的中间层
通过 MCP 和钩子把工具输出放进沙箱、跨会话保留记忆,减少编程 Agent 的上下文消耗。
ai-memory
编程 Agent 的长期记忆
给命令行编程 Agent 提供长期记忆,并方便在不同厂商的 Agent 之间交接上下文。
GitHub
全球最大的代码托管与协作平台
存放代码仓库、记录每次修改、多人协作和提 Issue 的地方,自带 Pages 静态网站托管和 Actions 自动化。Vercel、Netlify 等部署平台大多直接连它。
Git
记录代码每一次改动的版本管理工具
在本地给项目拍「快照」,随时查看改了什么、回到之前的版本或开分支试验。GitHub、GitLab、Gitee 都建立在它之上。
GitLab
代码托管加 CI/CD 的一体化平台
和 GitHub 类似的代码托管平台,内置流水线、Pages 和项目管理,社区版可以部署在自己的服务器上。
Gitee 码云
国内的代码托管平台
开源中国旗下的 Git 仓库托管服务,中文界面,国内访问速度快,常被用作 GitHub 仓库的国内镜像。