跳到正文
进群
交流
进群交流

扫码进群交流

进群交流二维码

提示词 · 提示词

使用shadcn组件库实现美观的网址导航界面

简介

使用 shadcn 来实现一个界面优美的网址导航

免费
  • 核心主题:使用shadcn组件库实现美观的网址导航界面
  • 用户意图:创建一个视觉吸引力强、用户体验良好的网址导航页面
  • 内容特点:技术实现导向,强调界面美观度

生成的提示词

你是一位资深前端开发专家,精通React和shadcn/ui组件库的使用。你的任务是设计并实现一个视觉精美的网址导航界面。

任务要求

  1. 使用shadcn的最新组件构建响应式布局
  2. 设计优雅的分类展示系统
  3. 实现平滑的交互效果和过渡动画
  4. 保持整体UI的简洁性和一致性

输出规范

  • 代码格式:提供完整的React+TypeScript实现代码
  • 样式方案:使用Tailwind CSS进行样式设计
  • 组件要求:
    • 使用shadcn的Card组件展示网站条目
    • 采用Combobox实现搜索功能
    • 应用HoverCard实现悬停预览效果
    • 集成Dialog组件处理编辑操作

设计标准

  1. 色彩搭配和谐,符合现代网页设计趋势
  2. 间距和排版遵循8pt网格系统
  3. 图标使用lucide-react库
  4. 暗黑/明亮模式切换支持

示例结构

// 提供类似这样的组件结构
export default function NavSite() {
  return (
    <div className="container mx-auto px-4">
      <header className="py-6">...</header>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {categories.map(category => (
          <Card key={category.id}>...</Card>
        ))}
      </div>
    </div>
  )
}

请确保最终实现既功能完整又具有视觉吸引力,符合现代网页设计的最佳实践。

使用建议

  • 适用场景:个人起始页、企业内部门户导航、开源项目资源聚合页
  • 优化方向:
    1. 可考虑添加用户自定义分类功能
    2. 集成书签导入/导出功能
    3. 增加使用数据统计展示
    4. 实现PWA支持以获得更好的移动体验

需要我针对特定功能点提供更详细的实现提示词吗?

原文与分段复制
第 1 段
### 使用shadcn组件库实现美观的网址导航界面
- **核心主题**:使用shadcn组件库实现美观的网址导航界面
- **用户意图**:创建一个视觉吸引力强、用户体验良好的网址导航页面
- **内容特点**:技术实现导向,强调界面美观度
第 2 段
### ?? 生成的提示词
```
你是一位资深前端开发专家,精通React和shadcn/ui组件库的使用。你的任务是设计并实现一个视觉精美的网址导航界面。
第 3 段
## 任务要求
1. 使用shadcn的最新组件构建响应式布局
2. 设计优雅的分类展示系统
3. 实现平滑的交互效果和过渡动画
4. 保持整体UI的简洁性和一致性
第 4 段
## 输出规范
- 代码格式:提供完整的React+TypeScript实现代码
- 样式方案:使用Tailwind CSS进行样式设计
- 组件要求:
  - 使用shadcn的Card组件展示网站条目
  - 采用Combobox实现搜索功能
  - 应用HoverCard实现悬停预览效果
  - 集成Dialog组件处理编辑操作
第 5 段
## 设计标准
1. 色彩搭配和谐,符合现代网页设计趋势
2. 间距和排版遵循8pt网格系统
3. 图标使用lucide-react库
4. 暗黑/明亮模式切换支持
第 6 段
## 示例结构
```tsx
// 提供类似这样的组件结构
export default function NavSite() {
  return (
    <div className="container mx-auto px-4">
      <header className="py-6">...</header>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {categories.map(category => (
          <Card key={category.id}>...</Card>
        ))}
      </div>
    </div>
  )
}
```
第 7 段
请确保最终实现既功能完整又具有视觉吸引力,符合现代网页设计的最佳实践。
```
第 8 段
### ?? 使用建议
- **适用场景**:个人起始页、企业内部门户导航、开源项目资源聚合页
- **优化方向**:
  1. 可考虑添加用户自定义分类功能
  2. 集成书签导入/导出功能
  3. 增加使用数据统计展示
  4. 实现PWA支持以获得更好的移动体验
第 9 段
需要我针对特定功能点提供更详细的实现提示词吗?

相关资源

资源信息

分类
提示词
类型
提示词
费用
免费
更新

标签