복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.
- 픽셀 스타일의 소개 영상을 만들 때
- 세 장면 영상의 내용을 교체할 때
- HTML에서 장면 전환을 확인할 때
nexu-io/open-design10.3만2026년 10월 20일 업데이트
무료GitHub에 공개한국어 소개
login-flow
스마트폰 로그인 화면을 독립형 HTML 프로토타입으로 만듭니다. 문자 인증, 비밀번호, 외부 계정 로그인에 맞춰 입력 오류와 처리 중 상태도 구성합니다.
원문원문 설명 보기
Mobile login and authentication flow screens
이럴 때 유용합니다
- 전화번호와 문자 인증 화면 시안 제작
- 비밀번호 로그인 화면 설계
- 외부 계정 로그인 방식 검토
- 모바일 화면의 처리 중·오류 표시 확인
한국어 소개
할 수 있는 일
스마트폰용 로그인과 인증 화면을 하나의 독립형 HTML 파일로 제작합니다. 전화번호와 문자 메시지를 이용한 인증, 비밀번호 로그인, 외부 계정을 이용하는 SSO에 맞춰 화면을 구성합니다. 기본 화면뿐 아니라 처리 중 상태와 오류 상태도 함께 살펴볼 수 있습니다.
이럴 때 유용합니다
모바일 앱의 로그인 화면을 구상하거나 선택한 인증 방식에 맞춰 입력란과 버튼을 정리할 때 유용합니다. 입력란 위의 레이블, 비밀번호 표시 전환, 항목 아래의 오류 메시지 등 로그인 조작에 필요한 요소를 갖춘 시안을 만들 수 있습니다.
사용 예시
“전화번호와 문자 인증으로 로그인하는 모바일 화면을 만들어 주세요.”
“비밀번호 표시 전환과 제출 중 스피너가 있는 로그인 화면을 시안으로 만들어 주세요.”
외부 계정으로 로그인하는 버튼을 포함하도록 요청할 수도 있습니다.
주의 사항
결과물은 로그인 화면의 HTML 프로토타입입니다. 화면 너비는 375px을 기준으로 하며 가로 스크롤을 피하고 화면 상단 등의 기기 돌출부를 고려합니다. 터치 영역은 최소 44px로 만들며 전화번호와 비밀번호에 맞는 입력 형식을 사용합니다.
이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.
객관 평가
AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.
- 지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가
- A양호모바일 로그인 화면을 대상으로 문자 인증, 비밀번호, SSO 지원을 명시합니다.
- 절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가
- A양호인증 방식 확인부터 HTML 출력까지의 절차와 레이블·오류 표시 요건이 있습니다.
- 안전성전송·삭제·명령 실행 등을 명시하고 있는가
- A양호독립형 HTML을 출력하며 인증 정보 읽기나 외부 전송 지시는 없습니다.
- 도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가
- A양호참조할 checklist.md를 명시하며 추가 도구나 API 키는 지정하지 않습니다.
총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.
평가가 다르다고 생각되면 재검토를 요청하기
포함된 파일(3)
- SKILL.md1.4 KB
- example.html9.9 KB
- references/checklist.md653 B
SKILL.md(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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
- Read reference files first (see below)
- Clarify auth method: phone/SMS, password, or social SSO
- Checklist gate — verify P0 items before emitting
<artifact> - Build the HTML prototype with proper states (default, loading, error)
- 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:
telfor phone,passwordfor password fields
리뷰
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
댓글
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
같은 저장소의 스킬
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일 업데이트
Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
- Creating a fashion-inspired motion presentation
- Presenting a short story across three pages
- Applying existing brand rules to a dark editorial sequence
nexu-io/open-design10.3만2026년 10월 20일 업데이트
Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
- Checking local OpenDesign previews
- Testing clicks and text entry in web apps
- Capturing page or element screenshots
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일 업데이트
Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
- Posters generated with programmed rules
- Still images that suggest motion
- Studies of artistic frame composition
nexu-io/open-design10.3만2026년 10월 20일 업데이트