码译 · VibeCode

码译 · VibeCode

把只会说白话的需求,翻译成 AI 编程工具听得懂的前端组件术语。每条配「大白话 vs 平台提示词」在线对比体验——左边看大白话生成什么样,右边看平台提示词一次到位的效果,点「点击试用」直接感受差距。

导航 9
导航栏悬浮吸顶、左侧边栏导航、面包屑导航、下拉子菜单
表单输入 5
输入框聚焦高亮、下拉选择器、开关切换、复选框
按钮操作 5
主按钮、加载按钮、禁用按钮、按钮组 / 分段控件
弹窗遮罩 5
模态对话框、抽屉面板、轻提示 Toast、气泡确认
动效 7
淡入淡出、卡片翻转、列表入场过渡、进度条
布局与对齐 13
图标和文字垂直居中、水平垂直都居中、等分布局、两端对齐
尺寸与排版 8
响应式字号、高清 1px 边框、行高可读性、字重层次
定位与层级 9
层级管理(z-index)、遮罩层、固定定位居中、层叠上下文
交互与动效 9
悬停状态、键盘聚焦样式、禁用状态、过渡动画
响应式与适配 8
视口设置、安全区适配、媒体查询断点、自适应列数网格
性能与无障碍 9
重排与重绘、GPU 加速提示、图片懒加载、语义化标签