360 Secure SkillHub
360 安全技能中心

Ui Component

按需求生成表单、表格、卡片、模态框、导航栏等 UI 组件的完整可运行 HTML/CSS 文件,提供 generate、form、table、card、modal、navbar 等命令,并给出圆角间距配色一致性、可访问性、响应式等设计建议;材料未说明具体模板实现与运行细节。

bytesagain3
bytesagain3
热度 88.35
最近更新 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.