原文：www.oddmeta.net/archives/10…
看到一个开源项目的界面挺漂亮的，想扒拉过来，学习一下。 做人至少要稍微厚道一点点，都已经要模仿他的界面了，那至少先给他推个广告吧 官网：realchar.ai/ 项目：github.com/Shaunwei/Re…
想要模仿的界面
我们先来看看他的界面： 首页是这样的 然后如果点了Chat with me进去后，整个界面是这样的
整个界面看上去给人一种非常清爽的感觉。喜欢，我也想要。 可写界面代码这件事情我完全不会，那就交给LLM来帮我做。 因为看到豆包的界面上有一个AI编程的功能，今天就用豆包来试试看。在豆包网页的“AI编程”里点进去，然后：
豆包AI编程 - 输入github仓库
输入Github仓库：
版本1：基础界面
输入：
想把这个项目里的前端代码用html+javascript来实现一下
豆包：
要将 Next.js 项目中的前端代码转换为纯 HTML + JavaScript 实现，需要对现有代码进行一些调整。以下是一个大致的步骤和示例代码，这里以 RealChar/client/next-web/src/app/page.js 为例进行转换： 步骤 创建 HTML 文件：创建一个 index.html 文件，将 Next.js 组件转换为 HTML 结构。 提取 JavaScript 逻辑：将 Next.js 中的 JavaScript 逻辑提取出来，放入一个单独的 JavaScript 文件中。 处理数据获取：Next.js 中的数据获取需要转换为纯 JavaScript 的异步请求。 示例代码 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time communication with your AI character</title>
<link rel="stylesheet" href="styles.css"> <!-- 假设我们将样式放入 styles.css 文件中 -->
</head>
<body>
<header id="header"></header>
<div class="py-6 md:py-10 px-4 md:px-6 lg:px-14 container mx-auto">
<h1 class="text-center font-light text-3xl">
Real-time communication with your AI character
</h1>
<div id="tabs"></div>
</div>
<footer id="footer"></footer>
<script src="script.js"></script>
</body>
</html>
script.js
// 模拟 getCharacters 函数
async function getCharacters() {
// 这里需要替换为实际的 API 请求
const response = await fetch('https://api.example.com/characters');
const data = await response.json();
return data;
}
// 模拟 Header 组件
function createHeader() {
const header = document.createElement('div');
header.innerHTML = '<h2>Header</h2>'; // 这里需要替换为实际的 Header 内容
return header;
}
// 模拟 Footer 组件
function createFooter() {
const footer = document.createElement('div');
footer.innerHTML = '<h2>Footer</h2>'; // 这里需要替换为实际的 Footer 内容
return footer;
}
// 模拟 Tabs 组件
function createTabs(characters) {
const tabs = document.createElement('div');
characters.forEach(character => {
const tab = document.createElement('div');
tab.textContent = character.name; // 假设 characters 数组中的每个对象都有 name 属性
tabs.appendChild(tab);
});
return tabs;
}
async function init() {
const characters = await getCharacters();
const headerElement = createHeader();
const footerElement = createFooter();
const tabsElement = createTabs(characters);
document.getElementById('header').appendChild(headerElement);
document.getElementById('tabs').appendChild(tabsElement);
document.getElementById('footer').appendChild(footerElement);
}
init();
styles.css
/* 这里需要将 Tailwind CSS 样式转换为普通 CSS 样式 */
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.md:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.md:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.lg:px-14 {
padding-left: 3.5rem;
padding-right: 3.5rem;
}
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.text-center {
text-align: center;
}
.font-light {
font-weight: 300;
}
.text-3xl {
font-size: 1.875rem;
}
-
注意事项
- 数据获取：在 script.js 中，getCharacters 函数需要替换为实际的 API 请求。
- 样式：Tailwind CSS 样式需要转换为普通 CSS 样式。
- 组件化：Next.js 中的组件需要手动转换为 HTML 结构和 JavaScript 函数。 这只是一个简单的示例，实际转换过程中可能需要根据项目的具体情况进行调整。
版本2：完善框架代码
豆包给出的这个代码只是一个框架，没有我想要的整个界面的代码，继续让它生成。 输入
请将 createHeader(); createFooter(); createTabs(characters); 界面的代码照着这个项目的代码具体实现一下
豆包
...... 给出了一堆垃圾代码，全是typescript，不是我想要的html+javascript ......
版本3：确保输出的代码是html+javascript
输入
我需要的是html+javascript的实现
豆包
...... 虽然给出的代码变成了javascript，但是依旧是一堆垃圾代码 ......
结语
三个字：放弃治疗，换个别的试试。
本文使用 markdown.com.cn 排版
