Ui Component

这是一款UI组件HTML/CSS代码生成工具，核心功能是生成表单、表格、卡片、模态框、导航栏等常用UI组件的完整可运行HTML文件。支持通过指定命令精准定制组件，适配中文用户习惯，覆盖完整工作流。典型场景包括前端开发快速搭建UI原型、获取现成组件代码，输入为命令调用，输出为独立可运行的HTML文件。

bytesagain3

热度 88.33

最近更新 2026-05-11 17:30:39

分类：开发依赖：纯提示词应用场景：代码生成 / UI 原型

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add ui-component

Metadata

version: 2.0.0
name: ui-component
description: UI组件HTML/CSS代码生成。表单、表格、卡片、模态框、导航栏，输出完整可运行HTML文件。UI component generator: form, table, card, modal.
author: BytesAgain
homepage: https://bytesagain.com
source: https://github.com/bytesagain/ai-skills

ui-component

UI组件HTML/CSS代码生成。表单、表格、卡片、模态框、导航栏，输出完整可运行HTML文件。UI component generator: form, table, card, modal, navbar as standalone HTML files.

核心特点

🎯 精准 — 针对具体场景定制化输出 📋 全面 — 多个命令覆盖完整工作流 🇨🇳 本土化 — 完全适配中文用户习惯

可用命令

generate — generate
form — form
table — table
card — card
modal — modal
navbar — navbar

专业建议

一致性** — 同一项目使用统一的圆角、间距、配色
可访问性** — 表单加label，按钮有焦点样式，对比度达标
响应式** — 移动端优先，用相对单位(rem/%)
简洁** — 少即是多，不加无意义装饰
| 需求 | 推荐命令 |

ui-component by BytesAgain

💬 Feedback & Feature Requests: https://bytesagain.com/feedback Powered by BytesAgain | bytesagain.com

Examples

# Show help
ui-component help

# Run
ui-component run

Run ui-component help for all commands

Commands

Run ui-component help to see all available commands.