跳到正文
一AllOne
关注

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 和命令行。

AI 编程AI免费

Windsurf(现 Devin Desktop)

多 Agent 管理的 AI 编辑器

原 Windsurf 编辑器,旧网址现已跳转到 Devin Desktop,可以在一个界面里管理本地和云端的多个编程 Agent。

AI 编程AI

GitHub Copilot

GitHub 官方的 AI 编程助手

可以在 VS Code、JetBrains 等编辑器、命令行和 GitHub 网页里使用,能把 Issue 分配给 Copilot 自动提 PR。

AI 编程AI免费

TRAE

字节跳动出品的 AI 开发平台

同时有 Agent 模式和 IDE 模式,可以统筹多个项目和 Agent;有国内版(trae.cn)和国际版(trae.ai)。

AI 编程AI国内直连支持中文

Kiro

先写规格再写代码的 AI IDE

把提示词先转成可执行的需求规格,再让 Agent 按规格实现和验证,适合想让 AI 写得更可控的项目。

AI 编程AI

Claude Code

Anthropic 的终端编程 Agent

在命令行里运行,能理解整个代码库、直接改文件和执行命令,也有 IDE 插件和桌面端。

AI 编程AI

Codex

OpenAI 的编程 Agent

可以在 ChatGPT 桌面端、命令行、IDE 插件和云端使用,能并行跑多个编程任务,也能接 GitHub 做代码审查。

AI 编程AI免费

v0

Vercel 出品的 AI 建站工具

用对话描述需求就能生成可运行的全栈网页应用,并一键部署到 Vercel。

无代码AI

Framer

可视化网站搭建工具

在画布上拖拽设计就能直接发布网站,自带托管、CMS 和 SEO 设置,也有 AI 设计助手。

无代码AI免费

Dify

可视化搭建 AI 应用和工作流

拖拽就能做聊天机器人、知识库问答和 AI 工作流,支持接入多家模型,可以自部署也有云服务。

无代码AI开源可自部署支持中文

NocoDB

开源的 Airtable 替代

把数据库变成像表格一样好用的界面,支持看板、表单和接口,适合做轻量后台和数据管理。

无代码开源可自部署支持中文

Appsmith

拖拽搭建内部工具和后台

连接数据库或接口后,拖拽组件就能做出管理后台、数据面板和审核工具。

无代码开源可自部署免费

ToolJet

低代码内部应用搭建平台

可视化拖拽加少量代码,快速做出后台、仪表盘和表单类应用,也支持用 AI 生成初版。

无代码AI开源可自部署

Budibase

开源的低代码应用与自动化平台

内置数据库、表单、审批和自动化流程,适合把日常运营里的重复操作做成小应用。

无代码AI开源可自部署

Smithery

MCP Server 集合站

收录大量 MCP 服务,可以让 AI Agent 快速连上各种外部工具和服务,并帮你处理授权。

AI 编程AI

AI SDK

Vercel 的 TypeScript AI 开发库

用统一的接口调用多家大模型,内置流式输出和多模型切换,做 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 一键生成导图。

原型设计AI国内直连支持中文

Excalidraw

手绘风格的在线白板

画出来的图像手绘草稿,适合快速画产品草图、讲解思路,支持多人协作。

原型设计开源可自部署免费

Open Design

本地优先的 AI 设计工作台

用对话让 AI 生成原型、网页和动效设计稿,可以接入你自己的编程 Agent 和模型。

原型设计AI开源可自部署免费

Penpot

开源的 Figma 替代

浏览器里就能做界面设计和原型,支持多人协作,设计稿基于开放的 SVG 和 CSS 标准,也可以自部署。

原型设计开源可自部署免费支持中文

tldraw

无限画布白板

打开网页就能画草图、流程图和线框图,手感流畅;开发者还能用它的 SDK 做自己的画布应用。

原型设计开源可自部署免费

Lucide

风格统一的开源图标库

社区维护的线性图标集,从 Feather Icons 分叉而来,提供 React、Vue 等多种框架的组件包。

UI 与图标素材开源可自部署免费

iconfont

阿里巴巴矢量图标库

国内图标资源最丰富的平台之一,支持图标下载、在线存储和格式转换,可以生成图标字体直接用在项目里。

UI 与图标素材国内直连支持中文

Material Symbols

Google 官方图标集

Material Design 的官方图标,现以 Material Symbols 形式提供,单个字体文件里包含 2500 多个图标和多种样式。

UI 与图标素材开源可自部署免费

Font Awesome

最常用的网页图标工具包之一

提供 SVG、图标字体和 CSS 多种用法,有开源免费版,也有包含更多图标的付费版。

UI 与图标素材开源可自部署免费

Color Hunt

配色方案灵感库

每天更新精选的四色配色方案,不会配色时挑一套直接用,网站和封面图都能用上。

UI 与图标素材

LottieFiles

Lottie 动画素材与工具

提供大量轻量级的 Lottie 动画,可以直接嵌入网页和 App,也能在线编辑和测试动画。

UI 与图标素材

Simple Icons

几千个品牌 Logo 的 SVG 图标

收录常见公司、产品和平台的品牌标识,统一的 SVG 格式,做「支持平台」「技术栈」展示时很方便。

UI 与图标素材开源可自部署免费

OpenCode

开源的终端编程 Agent

在命令行里运行的开源编程 Agent,可以接入多家模型,用法与 Claude Code、Codex 类似。

AI 编程AI开源可自部署免费

Orca

同时管理多个编程 Agent 的工作台

在隔离的 worktree 里并行运行 Claude Code、Codex、Gemini 等命令行 Agent,桌面端和移动端都能查看进度。

AI 编程AI开源可自部署免费

Claude Code 官方插件目录

Anthropic 维护的 Claude Code 插件清单

官方整理的高质量 Claude Code 插件目录,给你的编程 Agent 加技能前先来这里找。

AI 编程AI开源可自部署免费

CLI-Anything

让 AI Agent 能操作各种软件

把图形界面软件、开发工具和 Web API 包装成 Agent 能调用的命令行工具,并提供一个工具注册中心。

AI 编程AI开源可自部署免费

Context Mode

给编程 Agent 省上下文的中间层

通过 MCP 和钩子把工具输出放进沙箱、跨会话保留记忆,减少编程 Agent 的上下文消耗。

AI 编程AI开源可自部署

ai-memory

编程 Agent 的长期记忆

给命令行编程 Agent 提供长期记忆,并方便在不同厂商的 Agent 之间交接上下文。

AI 编程AI开源可自部署免费

GitHub

全球最大的代码托管与协作平台

存放代码仓库、记录每次修改、多人协作和提 Issue 的地方,自带 Pages 静态网站托管和 Actions 自动化。Vercel、Netlify 等部署平台大多直接连它。

开发组件与小工具免费

Git

记录代码每一次改动的版本管理工具

在本地给项目拍「快照」,随时查看改了什么、回到之前的版本或开分支试验。GitHub、GitLab、Gitee 都建立在它之上。

开发组件与小工具开源可自部署免费

GitLab

代码托管加 CI/CD 的一体化平台

和 GitHub 类似的代码托管平台,内置流水线、Pages 和项目管理,社区版可以部署在自己的服务器上。

开发组件与小工具开源可自部署免费

Gitee 码云

国内的代码托管平台

开源中国旗下的 Git 仓库托管服务,中文界面,国内访问速度快,常被用作 GitHub 仓库的国内镜像。

开发组件与小工具免费国内直连支持中文