星航计划 - DeTask找活网 0基础开发入门到精通 (2)

界面和AI工具相结合更高效

在打算开发一个应用之前,我们需要好好考虑要做什么,这个时候我们需要用到线框图来设计草案。

线框工具软件有很多,我这边用的是Axure7,各位如果有顺手的线框软件也请分享一下。

但是,仅仅有线框图是不行的,还需要平面设计师来设计页面美工来切图前端搭建等等工序。

这两天发现个可以从图片转成UI的工具,大大节省了工序。

v0 by Vercel

不过这个工具是支持Next.js的,导出文件想要在sui dapp kit跑起来还需要做一些调整。

首先就是需要了解NPM的用法,知道sui dapp kit 具体请参考官网 Sui TypeScript Docs

官网上有详尽的 dapp的安装步骤,此处不做冗述。

然后进行一系列操作

将线框图通过AI识图生成页面,可以反复生成,反复修改提示词,调成你想要的样子。

react代码自动生成

在线编辑,可以微调代码

接下来

在添加UI界面的之前,要做好备份

记得备份!记得备份!记得备份!重要的事情说三遍。

本地工程部分:

sui dapp kit这边工程进行添加项:

安装clsx 主要是因为next库那边是2.1.0 ...

css 复制代码
npm install clsx@2.1.0

安装tailwind-merge

sql 复制代码
npm install tailwind-merge@2.2.1

安装class-variance-authority

kotlin 复制代码
npm install class-variance-authority@0.7.0

安装 tailwindcss-animate

css 复制代码
npm install tailwindcss-animate@1.0.7

安装 autoprefixer

css 复制代码
npm install autoprefixer@10.0.1

页面部分:

准备一个空的 nextjs的工程 然后

界面工具dev原型图生成React 的Next.js代码编辑满意后

本地初始化

kotlin 复制代码
pnpm dlx v0@latest init

然后添加项目 将生成的components 导入到本地目录中

csharp 复制代码
npx v0 add "页面生成的代码"

next.js工程试着运行一遍,看看是否效果ok (next.js部分不做冗述)

然后将 components 和 lib拷贝到 dapp kit 工程目录

将 tailwind.config.ts 拷贝过来

将 components.json 拷贝过来

生成一个文件 postcss.config.js

修改 vite.config.ts 文件

好了,大功告成!

这样就可以顺利将v0.dev生成的组件代码移植到 sui dapp kit原项目中去了。

在此鸣谢(排名不分先后) dethan3 Jovi Euraxluo

已经移植成功: Obelisk Henry

Move语言学习交流QQ群: 79489587

Sui官方中文开发者电报群: t.me/sui_dev_cn

相关推荐
TechubNews5 天前
公然上线传销项目,Web3 的底线已经被无限突破
web3
OpenBuild.xyz5 天前
Web3 开发者周刊 36 | 构建自主未来:Agent、可扩展性与赏金
人工智能·web3·去中心化·区块链·智能合约
ThereIsNoCode5 天前
网页版贪吃蛇小游戏开发HTML实现附源码!
web3·html5
TinTin Land5 天前
国际互联网安全日|Web3 世界的安全挑战与防护指南
安全·web3
TechubNews5 天前
DeepSeek与Web3:科技融合的新纪元
科技·web3
dingzd957 天前
Web3 的虚实融合之路:从虚拟交互到元宇宙构建
web3·交互
BeepCrypto9 天前
The Sandbox 收购 QED,业务扩展至罗马尼亚
web3·区块链
mirrornan9 天前
web3D交互展示是什么?应用场景有哪些?
3d·web3·3d模型·web3d·3d展示
清 晨9 天前
Web3 开发中的身份管理:如何实现去中心化身份认证
web3·去中心化·区块链
dingzd9510 天前
Web3 开发者的机遇与挑战:技术趋势与职业发展
科技·ai·web3·去中心化·ux