Vibe GuideBETA

制作界面时,用这里认识组件并描述想要的效果,将选中的组件和要求交给当前项目的 AI。

这页的方法适合你的项目吗,怎样检查?
什么情况下会用到这页的方法?
已知道用户要做的动作,需要安排界面时。
根据自己的情况,应该怎样选择?
先按任务选:切换内容用标签、提交操作用按钮、输入内容用表单;再比较视觉样式。复杂流程先画入口与返回。
哪些情况容易判断错?
不要照搬示例标签、条数和业务字段;少量内容不必加分页或搜索,重要操作不能只靠悬停、颜色或图标表达。
怎样检查这个方法在你的项目中有用?
用自己的长文本和空数据检查布局,再用键盘、触屏测试操作、焦点、错误提示与返回。
带着结果回到操作 →

DATA

展开表格

行可展开详情。

Expandable Table · Row expand table

选这个组件前,先核对用途

什么情况下适合使用?比较、查询或解释真实数据。

什么情况下不宜直接照搬?少量简单内容不必加表格;图表不能只靠颜色表达,示例数据要标明。

下面的名称、条数和字段是示例。交给 AI 前换成本项目内容;实际示例仅证明演示交互,不代表业务已接通。

亲手试一下,再决定是否使用

按什么顺序试用这个示例?点击一条记录的加号,再点击一次收起。

试用时应该观察什么?详情对应被点击的那条记录。

本地练习 · 重新开始会清空示例状态,不会修改项目资料。

复刻提示词 · 替换场景后使用

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

查看保留的原始规格

Use an expandable table with nested row details.

使用行可展开详情的表格。

做出的效果不一致,应该检查什么?

只画出了样子 → 把缺失的点击、键盘或状态变化逐项交给 AI;交互已存在但行为不同 → 提供实际步骤、预期和结果,要求只修正差异。先在示例资料上验证,再接入产品。

继续描述组件 →

寻找起点

板块快捷入口

大家在做什么 · AI收益调研 · 50个方向 · GitHub项目完整路线图 · 从想法到上线先记下自己的想法只有“想做一个网站”,不知道写什么整理成可以交给 AI 的项目描述不知道第一版的流程怎么写打开一个能制作文件的 AI 工具无法安装、登录,或界面不一样给项目建一个自己的文件夹侧栏没有“文稿”或找不到文件夹让 AI 打开刚才的文件夹AI 说的是另一个项目建立 Git 仓库,写好项目说明和规则提交失败或要求填写姓名邮箱亲手核对 AI 创建的文件找不到上一步的文件一次回答一个问题AI 问的技术词看不懂确认这版只做哪几件事删减以后只剩外观把约定留成看得懂的说明说明太长,不知道该确认哪句把用户怎样使用写清楚AI 只列功能名,没有使用过程先看关键页面,再决定怎么开发原型看起来能用,但不清楚哪些是假数据把实际条件交给 AI 选做法我不知道“本机”和“共享”怎么选让 AI 列出下一小步第一项只有“完成前端”检查运行环境,启动最小项目安装或启动失败,不知道停在哪里打开第一张属于自己的页面地址打不开或一直加载只调整眼前这一页改外观后其他功能也变了让“保存”真正留下内容保存不了,或刷新后记录不见了从开始到结束走通一次按钮能点,但没有结果试试空白和连续点击出现空记录或重复记录关掉以后,还能重新打开第二天地址打不开对照最初想法,确认真的能用AI 说全部完成,但我仍不会用把试用结果记录成反馈问题偶尔出现,不能稳定重现先确定怎么修、怎样算修好AI 没给计划就开始修改按计划修复,再交给本人复测AI 说修好了,同样的操作仍失败先决定:自己用,还是分享发给别人后打不开检查是否具备交付条件评估说可上线,却没有证据准备交付物,并实际试运行安装包打不开或部署后启动失败确认交付,再检查实际入口自己的电脑能开,其他人打不开可选:把简单网页放到 GitHub Pages正式网址显示 404下次继续时,不用从头讲换对话后 AI 要重新做选择工具 · Codex Claude Cursor Qoder TRAE Kimi 价格首页项目分类和 Agent 沟通 · 提示词与排查技术栈选择前端与 UI · 组件词典术语库 · AI与项目开发 · 生活例子与图解打开工具,确认能操作项目把项目、版本记录和 AI 规则准备好把想要的界面风格说清楚只修改一个地方,让 AI 找准目标后端:保存资料与访问规则测试:亲手检查是否能用部署上线:交付一个真实入口运维:让产品继续可用Web 网站与应用 · 把想法变成一个网址。小程序 · 在用户熟悉的地方,做一个小工具。手机 App · 让一个好想法,成为日常习惯。桌面 App · 把重复的电脑工作,交给自己的工具。

一个面向零基础的实践指南

这是面向零基础的双语实践指南,按 6 个阶段、18 个节点、31 个动作组织。页面中的应用画面是示意图;项目完成情况由使用者核对。