代码生成助手修改文本样式
2025/05/27·StepFun can make mistakes, check important info.
你是一个代码生成助手，请基于用户指令修改代码，用户可能选择对应的DOM结构
<user-query>
这里字体变成红色系，文本变为 "Lorem ipsum dolor is Hello, consectetur adipiscing elit."
</user-query>
<user-selection>
```
<p className="text-[#222222] text-base leading-relaxed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum,tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
</p>
```
</user-selection>
相关的文件如下：
index.tsx
---
import { Button } from "@/components/ui/button"
import { GitFork, X, ImageIcon } from "lucide-react"
export default function Component() {
return (
<div className="min-h-screen bg-[#f8f6f2]">
{/* Header */}
<header className="flex items-center justify-between px-6 py-4">
<div className="text-[#222222] font-medium text-lg">阶跃AI</div>
<div className="text-[#222222] text-sm">博客系统 by @lvliang</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
className="bg-[#222222] text-[#ffffff] border-[#222222] hover:bg-[#000000] flex items-center gap-1"
>
<GitFork className="w-3 h-3" />
Fork
</Button>
<Button variant="ghost" size="sm" className="text-[#222222] hover:bg-[#ebebeb]">
<X className="w-4 h-4" />
</Button>
</div>
</header>
{/* Main Content */}
<main className="px-6 py-8">
{/* Hero Image Placeholder */}
<div className="max-w-4xl mx-auto mb-16">
<div className="bg-[#d9d9d9] border-2 border-[#3986c5] rounded-lg aspect-video flex items-center justify-center">
<div className="bg-[#ebebeb] rounded-lg p-4">
<ImageIcon className="w-8 h-8 text-[#ffffff]" />
</div>
</div>
</div>
{/* Content Section */}
<div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-12 items-start">
{/* Left Column - Heading */}
<div>
<h1 className="text-[#000000] text-4xl md:text-5xl font-bold leading-tight">
Medium length hero heading goes here
</h1>
</div>
{/* Right Column - Description and Buttons */}
<div className="space-y-6">
<p className="text-[#222222] text-base leading-relaxed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum
tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae
erat.
</p>
<div className="flex gap-3">
<Button className="bg-[#000000] text-[#ffffff] hover:bg-[#222222] px-6">Button</Button>
<Button
variant="outline"
className="border-[#000000] text-[#000000] bg-[#ffffff] hover:bg-[#fcfcf9] px-6"
>
Button
</Button>
</div>
</div>
</div>
</main>
</div>
)
}
如果要修改文件请按一下格式输出，确保可以正确写入文件，请确保输出完整代码：
<write-file filename='path/to/file'>
... 代码写这里
</write-file>
<write-file filename='index.tsx'>
import { Button } from "@/components/ui/button"
import { GitFork, X, ImageIcon } from "lucide-react"
export default function Component() {
return (
<div className="min-h-screen bg-[#f8f6f2]">
{/* Header */}
<header className="flex items-center justify-between px-6 py-4">
<div className="text-[#222222] font-medium text-lg">阶跃AI</div>
<div className="text-[#222222] text-sm">博客系统 by @lvliang</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
className="bg-[#222222] text-[#ffffff] border-[#222222] hover:bg-[#000000] flex items-center gap-1"
>
<GitFork className="w-3 h-3" />
Fork
</Button>
<Button variant="ghost" size="sm" className="text-[#222222] hover:bg-[#ebebeb]">
<X className="w-4 h-4" />
</Button>
</div>
</header>
text
)
}
</write-file>