Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From claude-code-starter
Generates copy-pasteable, responsive UI components like navbars, cards, modals, sidebars, and pricing pages. Adapts to project's React, Vue, Svelte, Tailwind, Bootstrap, or HTML/CSS stack.
npx claudepluginhub lightpointventures/claude-code-starterHow this skill is triggered — by the user, by Claude, or both
Slash command
/claude-code-starter:componentThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
帮用户快速生成一个即用的 UI 组件。
Generates multiple production-ready UI component variations via 21st.dev Magic, letting you compare and integrate the best design. Useful for building modern, responsive UI with diverse styles.
Generates production-grade frontend UI components with bold design choices and working code. Accepts component descriptions, requirements, PRD files, or OpenAPI contracts.
Guides building production-quality UIs with component architecture, accessibility, and state management. Use when creating or modifying user-facing interfaces.
Share bugs, ideas, or general feedback.
帮用户快速生成一个即用的 UI 组件。
如果用户已经说了想要什么，直接开始。
如果没有，展示常用组件列表：
你想生成什么组件？常见的有：
- 导航栏（Navbar）
- 登录/注册表单
- 定价页（Pricing）
- 卡片列表（Cards）
- 页脚（Footer）
- 数据表格（Table）
- 弹窗/对话框（Modal）
- 侧边栏（Sidebar）
- 搜索框（Search）
- 通知栏（Notification）
- 上传区域（Upload）
- 评论区（Comments）
也可以直接描述你想要的。
查看项目中使用的前端框架和 UI 库：
同时观察项目已有组件的代码风格，保持一致。
生成的组件必须：
生成后告诉用户组件放在了哪里，以及如何使用。
询问是否需要调整：
组件已生成。需要调整样式、布局或功能吗？