무료GitHub에 공개한국어 소개

trading-analysis-dashboard-template

시장 정보를 밀도 있게 배치한 거래 분석 대시보드를 단일 HTML로 만듭니다. 밝고 어두운 테마, 차트 상세 보기, 명령 팔레트를 갖춘 화면을 제공합니다.

원문원문 설명 보기

Professional trading analysis dashboard template (single-file HTML) with light/dark theme switch, dense market panels, chart interactions, demo/live playback, and command palette behavior. Use when users ask for a Wall-Street-style analytics terminal, trading cockpit, or high-tech financial dashboard template with realistic data layout.

nexu-io/open-design

AI 평가90점/ 100 설치 방법 보기

이럴 때 유용합니다

금융 분석 터미널 화면 시제품 제작
시장 정보가 밀집된 화면 제시
차트 상세 보기와 조작 방식 시연
단일 HTML 대시보드 제작

한국어 소개

할 수 있는 일

시장 정보와 위험 관련 패널을 배치한 거래 분석 대시보드의 HTML 템플릿을 만듭니다. 요청에 맞춰 제목, 종목명, 수치 라벨을 바꾸고 기존 DESIGN.md의 색상, 글꼴, 레이아웃을 반영합니다. 밝고 어두운 테마, Live/Demo 모드, 차트의 십자선과 툴팁, 클릭으로 여는 상세 보기, /로 여는 명령 팔레트를 제공합니다.

이럴 때 유용합니다

금융 분석 터미널과 비슷한 화면을 시제품으로 만들거나 시장 정보가 많은 화면의 조작감을 보여 줄 때 적합합니다. 프레임워크에 의존하지 않고 단일 HTML 파일로 대시보드를 준비할 때도 활용할 수 있습니다.

사용 예시

“왼쪽 탐색 메뉴, 위험 패널, 시장 차트가 있는 분석 화면을 만들어 주세요.”
“밝고 어두운 테마와 차트 상세 보기를 유지하고 제목과 종목명을 지정한 내용으로 바꿔 주세요.”

주의 사항

파일을 쓸 수 있는 환경과 적용할 DESIGN.md가 필요합니다. CSS와 JavaScript는 HTML 안에 포함합니다. 실제 데이터에 연결하는 방법은 자료에 설명되어 있지 않습니다. 알 수 없는 수치는 — 같은 자리표시자로 표시합니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호금융 분석 터미널 시제품이라는 용도와 단일 HTML 화면의 기능을 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호DESIGN.md 읽기, index.html로 복사, 상호작용 유지와 결과 확인 절차를 지정합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호파일 쓰기 요건과 index.html 출력 위치를 명시하고 미확인 수치에 자리표시자를 씁니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: B일부 부족파일 쓰기 권한과 DESIGN.md가 필요하지만 DESIGN.md 준비 방법은 설명하지 않습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(4)

SKILL.md2.4 KB
assets/template.html21.7 KB
example.html1.1 KB
references/checklist.md1.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Trading Analysis Dashboard Template

Produce a premium, data-dense, Wall-Street style trading dashboard as a self-contained HTML artifact.

Resource map

trading-analysis-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

Read active DESIGN.md, then map typography/color/layout into CSS variables.
Copy assets/template.html to index.html.
Personalize headings, instrument names, and numeric labels to the user brief.
Preserve interaction fidelity:
- Light/Dark mode switch
- Live/Demo mode
- Chart hover crosshair and tooltip
- Click-to-focus chart (floating modal style)
- Keyboard command palette (/)
Keep output single-file HTML (inline CSS + inline JS, no framework dependency).
Keep placeholders honest (— or neutral labels) where real numbers are unknown.
Validate against references/checklist.md before emitting.

Output contract

One sentence before artifact, then:

<artifact identifier="trading-analysis-dashboard" type="text/html" title="Trading Analysis Dashboard">
<!doctype html>
<html>...</html>
</artifact>

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬