把书籍、视频转写和播客等长内容中的方法论提取为能力卡,再编译成可调用的单 Skill 或紧凑 Skill 包。
进群
交流
进群交流
扫码进群交流

提示词 · 提示词
使用shadcn组件库实现美观的网址导航界面
简介
使用 shadcn 来实现一个界面优美的网址导航
免费
- 核心主题:使用shadcn组件库实现美观的网址导航界面
- 用户意图:创建一个视觉吸引力强、用户体验良好的网址导航页面
- 内容特点:技术实现导向,强调界面美观度
生成的提示词
你是一位资深前端开发专家,精通React和shadcn/ui组件库的使用。你的任务是设计并实现一个视觉精美的网址导航界面。
任务要求
- 使用shadcn的最新组件构建响应式布局
- 设计优雅的分类展示系统
- 实现平滑的交互效果和过渡动画
- 保持整体UI的简洁性和一致性
输出规范
- 代码格式:提供完整的React+TypeScript实现代码
- 样式方案:使用Tailwind CSS进行样式设计
- 组件要求:
- 使用shadcn的Card组件展示网站条目
- 采用Combobox实现搜索功能
- 应用HoverCard实现悬停预览效果
- 集成Dialog组件处理编辑操作
设计标准
- 色彩搭配和谐,符合现代网页设计趋势
- 间距和排版遵循8pt网格系统
- 图标使用lucide-react库
- 暗黑/明亮模式切换支持
示例结构
// 提供类似这样的组件结构
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>
)
}
请确保最终实现既功能完整又具有视觉吸引力,符合现代网页设计的最佳实践。
使用建议
- 适用场景:个人起始页、企业内部门户导航、开源项目资源聚合页
- 优化方向:
- 可考虑添加用户自定义分类功能
- 集成书签导入/导出功能
- 增加使用数据统计展示
- 实现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 段
需要我针对特定功能点提供更详细的实现提示词吗?
相关资源
通义深度信息检索 Agent 模型、ReAct 推理和评测源码;非标准 Skill 安装包。
通过 Agent 插件连接 ChatCut 项目,导入素材、编辑时间线、制作动效、生成素材、转写字幕并导出视频。