무료GitHub에 공개한국어 소개

pricing-page

요금제 카드, 기능 비교표, 자주 묻는 질문을 담은 HTML 페이지를 만듭니다. 요금제 수와 추천 표시를 정리해 가입 전에 내용을 비교할 수 있는 시안을 제작합니다.

원문원문 설명 보기

A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.

nexu-io/open-design

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

이럴 때 유용합니다

구독 요금 페이지를 시안으로 만듭니다
요금제별 기능을 비교합니다
개인용과 기업용 요금제를 제시합니다
요금 관련 자주 묻는 질문을 정리합니다

한국어 소개

할 수 있는 일

서비스 요금제를 비교할 수 있는 HTML 페이지를 만듭니다. 도입 설명, 요금제 카드, 기능 비교표, 펼치고 접는 자주 묻는 질문, 마지막 행동 유도 버튼을 함께 구성합니다. 요청에 따라 두 단계에서 네 단계의 요금제를 고르고, 카드마다 가격, 짧은 설명, 기능 네 개에서 여섯 개, 주요 동작 버튼을 배치합니다.

이럴 때 유용합니다

구독 요금 페이지를 시안으로 만들거나 개인용과 기업용 요금제의 차이를 보여 줄 때 사용합니다. 추천 요금제 표시와 기능을 분류한 비교표로 가입 전에 확인할 내용을 정리합니다. 좁은 화면에서도 비교표를 읽을 수 있는 표시 방식을 검토합니다.

사용 예시

“Free, Pro, Team 세 요금제를 비교하는 요금 페이지를 만들어 주세요.”
“개인용과 기업용 두 요금제를 기능 비교표와 자주 묻는 질문과 함께 보여 주세요.”

주의 사항

현재 유효한 DESIGN.md에 정해진 색상, 글꼴, 구성 요소 패턴을 사용합니다. 결과물은 CSS를 포함한 단일 HTML 문서입니다. 질문의 펼치기와 접기에는 <details><summary>를 사용합니다. 자료는 페이지 시안을 다루며 과금이나 가입 처리 연결은 설명하지 않습니다.

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

객관 평가

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

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호요금과 요금제 비교 요청에 사용하며 요금 페이지를 만든다고 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호요금제 수, 구역 순서, 카드 내용, HTML 형식과 화면 너비별 점검을 구체적으로 제시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호HTML 문서 생성이 대상이며 외부 전송이나 인증 정보 읽기를 지시하지 않습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: B일부 부족유효한 DESIGN.md를 전제로 하지만 작성 절차는 설명하지 않습니다.

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

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

포함된 파일(2)

SKILL.md2.8 KB
example.html7.0 KB

SKILL.md(원문)

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

Pricing Page Skill

Produce a single-screen pricing page that respects the active DESIGN.md.

Workflow

Read the active DESIGN.md (injected above). Use only its colors, type tokens, and component patterns.
Classify the product from the brief and pick a tier shape:
- 3-tier (most common): Free / Pro / Team or Starter / Growth / Enterprise.
- 4-tier when the brief says "scale" or "enterprise plus".
- 2-tier when it says "individual / business" or "personal / pro".
Sections, in order:
1. Hero — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
2. Plan cards — one card per tier. Each card: tier name, price (use the display font + larger scale for the number), 1-line positioning, 4–6 bullet features, primary CTA. Mark the recommended tier with the DS accent border or a small badge.
3. Comparison table — feature rows × tier columns, ✓ / — / value cells. Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header.
4. FAQ — 4–6 collapsible Q&A items. Use <details><summary> for the collapse — no JS.
5. Footer CTA — single line + button, accent band sparingly.
Write one self-contained HTML document:
- <!doctype html> through </html>, CSS in one inline <style>.
- CSS Grid for the plan-card row; CSS Grid for the comparison table.
- data-od-id on each tier card and each table row.
Money rendering: use the display font for the big number, body for the currency and "/mo" — sizes per DESIGN.md scale.
Self-check:
- Prices are plausible for the product (not "$X / month").
- Accent is on the recommended tier and one CTA only.
- Comparison table renders cleanly at 1024px and stacks readably below 768px (rotate column headers or scroll-x).
- No fake feature names — every row reads as something a real product would actually offer.

Output contract

Emit between <artifact> tags:

<artifact identifier="pricing-slug" type="text/html" title="Pricing — Product Name">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

리뷰

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

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

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

같은 저장소의 스킬