跳到正文
cccskills
免费在 GitHub 公开中文介绍

login-flow

将智能手机登录界面制作成独立的HTML原型,支持手机号与短信验证、密码登录及外部账号登录,并呈现输入错误和处理中等状态。

原文查看原文说明

Mobile login and authentication flow screens

AI 评分100分/ 100查看安装方法

适用场景

  • 制作手机号与短信验证原型
  • 设计密码登录界面
  • 比较外部账号登录方案
  • 检查移动界面的加载与错误状态

中文介绍

功能

将智能手机的登录与身份验证界面制作成独立的HTML文件。可根据手机号与短信验证、密码登录或使用外部账号的单点登录方式组织界面。原型包含默认、处理中和错误状态,便于查看登录过程中各个阶段的显示效果。

适用场景

适合规划移动应用的登录界面,或根据选定的验证方式整理输入框与按钮。可在同一原型中安排输入框上方的标签、密码显示与隐藏切换,以及字段下方的错误提示,检查登录操作所需的界面要素。

使用示例

“制作一个通过手机号和短信验证码登录的移动界面。”

“制作一个密码登录原型,包含密码显示切换和提交时的加载指示。”

也可以指定加入使用外部账号登录的按钮。

注意事项

交付物是登录界面的HTML原型。以375px屏幕宽度为基准,避免横向滚动,并考虑屏幕顶部等位置的缺口。点击区域至少为44px,手机号和密码字段使用相应的输入类型。

本介绍由 AI(OpenAI Codex)根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容,从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么
A良好明确面向移动登录界面,列出了短信验证、密码登录和SSO。
步骤具体性步骤、输入输出和示例是否具体
A良好列出从确认验证方式到输出HTML的步骤,并规定标签和错误状态。
安全性发送数据、删除文件、执行命令等是否有说明
A良好输出为独立HTML文件,没有读取凭据或向外发送数据的指示。
安装难易度所需工具和 API 密钥是否少且有说明
A良好标明需参考checklist.md,未指定额外工具或API密钥。

总分按每项 A=25 分、B=15 分、C=5 分相加。 由 AI(OpenAI Codex)于 2026年10月20日 评估。仅供参考,安装前请同时查看原文。

如果您认为评估有误,请申请复核

请写明哪一项有误以及原因。无需登录。我们会对照 SKILL.md 重新评估,并在此处更新结果。

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

包含的文件(3)

  • SKILL.md1.4 KB
  • example.html9.9 KB
  • references/checklist.md653 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Login Flow Skill

A skill for generating mobile-first login and authentication screens. Use this when the user wants a sign-in experience for a mobile app, including phone + SMS verification, password-based login, and social SSO options.

Workflow

  1. Read reference files first (see below)
  2. Clarify auth method: phone/SMS, password, or social SSO
  3. Checklist gate — verify P0 items before emitting <artifact>
  4. Build the HTML prototype with proper states (default, loading, error)
  5. Wrap in <artifact> tag referencing the output file

Side Files

  • references/checklist.md — P0/P1 acceptance criteria

Output

A single standalone HTML file implementing the login screen with:

  • Labels above inputs (never placeholder-only)
  • Password field with show/hide toggle
  • Social SSO buttons with SVG icons
  • Error states below fields
  • Loading spinner in primary CTA
  • Touch targets minimum 44px

Mobile-First Constraints

  • Viewport: 375px wide (iPhone standard)
  • No horizontal scroll
  • Safe area insets for notched devices
  • Input keyboards: tel for phone, password for password fields

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

8-bit-orbit-video-template

免费有简介AI 评分 90分

使用Hyperframes的HTML模板制作复古像素风格的三场景视频,替换标题、标签和配色,同时保留场景转换节奏及可重复的动画时序。

  • 制作像素风格的介绍视频
  • 替换三场景视频中的内容
  • 通过HTML预览场景转换
nexu-io/open-design10.3万2026年10月20日 更新

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

中文简介正在准备中。当前显示英语简介。

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design10.3万2026年10月20日 更新

after-hours-editorial-template

免费有简介AI 评分 80分

以深色背景和衬线字体制作时尚杂志风格的三页动态展示,结合文字逐步显现与章节转场,最终生成内嵌CSS和JavaScript的单个HTML文件。

  • 制作时尚杂志风格的动态介绍
  • 用三页展示简短故事
  • 将现有品牌风格融入深色版面
nexu-io/open-design10.3万2026年10月20日 更新

agent-browser

免费有简介AI 评分 100分

通过浏览器查看页面,执行点击、输入、截图和信息提取。主要用于检查OpenDesign的本地预览,以及核查网页应用的运行情况与质量。

  • 检查OpenDesign本地预览
  • 测试网页应用的点击和输入
  • 截取页面或元素图像
nexu-io/open-design10.3万2026年10月20日 更新

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

中文简介正在准备中。当前显示英语简介。

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design10.3万2026年10月20日 更新

algorithmic-art

免费有简介AI 评分 80分

使用p5.js,根据计算规则与随机数创作生成艺术。固定随机种子即可重现相同画面,适合制作海报、表现动感的静态图像和艺术构图草案。

  • 根据规则制作海报
  • 创作具有动感的静态图像
  • 试验艺术作品的构图
nexu-io/open-design10.3万2026年10月20日 更新

查看 nexu-io 的全部技能

报告此技能的问题