복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.
- 픽셀 스타일의 소개 영상을 만들 때
- 세 장면 영상의 내용을 교체할 때
- HTML에서 장면 전환을 확인할 때
멤버 목록, 활동 기록, 역할별 차트를 갖춘 팀 관리 화면을 만듭니다. 탭 전환, 밝고 어두운 테마, CSV 내보내기가 작동하는 단일 HTML 원형을 제공합니다.
Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.
팀 멤버 정보와 활동 현황을 확인하는 FlowAI 스타일의 관리 화면을 만듭니다. 멤버 목록, 팀 상세 정보, 활동 기록의 세 탭에 주요 지표, 역할별 막대 차트, 온라인 상태와 활동 추이, 기여도가 높은 멤버를 배치합니다. 결과물은 단일 HTML 파일입니다.
팀이나 작업 공간 관리 화면의 원형을 만들고 표시 내용과 조작감을 확인할 때 적합합니다. 탭 전환, 차트 수치 표시, 패널 확대, 밝고 어두운 테마 전환이 작동하므로 직접 조작하며 화면 구성을 설명할 수 있습니다. 현재 표시된 팀 표는 CSV로 내보낼 수 있습니다.
기존 DESIGN.md의 색상, 글꼴, 여백 등의 규칙을 읽고 포함된 assets/template.html을 바탕으로 만듭니다. 구체적인 예시 데이터를 사용하는 데스크톱용 원형입니다. 완성된 HTML은 빌드나 외부 실행 라이브러리 없이 인터넷 연결이 끊긴 상태에서도 열 수 있습니다.
이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.
AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.
총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Produce a single-screen, multi-tab team management dashboard inspired by the FlowAI aesthetic. The output is a self-contained HTML file (no external runtime dependencies) with built-in interactions: tab switching, an animated bar chart, hover tooltips on charts, click-to-zoom panels, dark mode toggle, and CSV export of the visible team table.
flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│ └── template.html # reference seed used as the starting structure
├── references/
│ └── checklist.md # P0/P1/P2 quality gates
└── example.html # complete hand-built sample (gallery preview)
assets/template.html. Do not invent new tokens.assets/template.html; never generate the shell from blank.Team Members, Team Details, Activity Log. Tabs must
actually switch and only one view is visible at a time.Member A / Metric B placeholders.#members | #details | #activity)Workflow columnreferences/checklist.md before final output.Emit one short orientation sentence, then the artifact:
<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>
The artifact must render correctly when opened directly from disk with no build step and no network access.
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.
소셜 미디어 광고와 검색 광고의 제목, 설명, 본문을 작성하고 표현을 반복해서 수정합니다. 광고 문구 후보를 준비하고 개선안을 검토할 때 활용합니다.
어두운 배경과 세리프 글꼴로 패션 잡지 같은 세 페이지 동적 연출을 만듭니다. 글자 단계 표시와 장면 전환을 포함한 단일 HTML 파일로 출력합니다.
브라우저에서 페이지를 살펴보고 클릭, 입력, 화면 캡처, 정보 추출을 수행합니다. OpenDesign의 로컬 미리보기를 중심으로 웹 앱의 동작과 품질을 확인합니다.
AI 음악 앨범의 콘셉트 구상부터 가사 초안, 곡 순서 검토, 내보내기까지 다룹니다. 독립 제작 실험과 브랜드 음악 기획에 활용합니다.
p5.js에서 계산 규칙과 난수로 생성 예술을 만듭니다. 난수의 초깃값을 고정해 같은 그림을 재현하며, 포스터와 동적인 느낌의 정지 이미지, 구도 시안 제작에 활용합니다.