@qualisoft/ai-skills 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +234 -0
  3. package/bin/cli.mjs +331 -0
  4. package/package.json +53 -0
  5. package/skills/erd-visual/SKILL.md +294 -0
  6. package/skills/erd-visual/build.mjs +404 -0
  7. package/skills/erd-visual/engine/dbml.mjs +133 -0
  8. package/skills/erd-visual/engine/ingest.mjs +273 -0
  9. package/skills/erd-visual/engine/layout.mjs +165 -0
  10. package/skills/erd-visual/engine/overview.mjs +314 -0
  11. package/skills/erd-visual/engine/render.mjs +144 -0
  12. package/skills/erd-visual/engine/router.mjs +401 -0
  13. package/skills/erd-visual/engine/verify.mjs +138 -0
  14. package/skills/erd-visual/engine/wire.mjs +115 -0
  15. package/skills/erd-visual/fixtures/crm-large.dbml +1337 -0
  16. package/skills/erd-visual/fixtures/edge-cases.dbml +43 -0
  17. package/skills/erd-visual/fixtures/map-dynamics.json +32 -0
  18. package/skills/erd-visual/fixtures/shop-basic.dbml +78 -0
  19. package/skills/erd-visual/fixtures/src-json/api.json +38 -0
  20. package/skills/erd-visual/fixtures/src-prisma/schema.prisma +44 -0
  21. package/skills/erd-visual/fixtures/src-sql/shop.sql +62 -0
  22. package/skills/erd-visual/readers/csv.mjs +81 -0
  23. package/skills/erd-visual/readers/index.mjs +55 -0
  24. package/skills/erd-visual/readers/jsonschema.mjs +86 -0
  25. package/skills/erd-visual/readers/prisma.mjs +102 -0
  26. package/skills/erd-visual/readers/sql.mjs +205 -0
  27. package/skills/erd-visual/readers/xlsx.mjs +220 -0
  28. package/skills/erd-visual/readers/xml.mjs +130 -0
  29. package/skills/erd-visual/readers/zip.mjs +74 -0
  30. package/skills/erd-visual/viewer/index.html +539 -0
  31. package/skills/project-build/SKILL.md +171 -0
  32. package/skills/project-build/templates/build-rules.md +88 -0
  33. package/skills/project-build/templates/change-log.md +29 -0
  34. package/skills/project-build/templates/coverage.md +49 -0
  35. package/skills/project-build/templates/parity.html +375 -0
  36. package/skills/project-build/templates/theme.css +45 -0
  37. package/skills/project-design/MEDIUMS.md +104 -0
  38. package/skills/project-design/QUESTIONS.md +126 -0
  39. package/skills/project-design/SKILL.md +365 -0
  40. package/skills/project-design/templates/audit.html +689 -0
  41. package/skills/project-design/templates/change-log.md +53 -0
  42. package/skills/project-design/templates/design-rules.md +118 -0
  43. package/skills/project-design/templates/mockup-app.html +96 -0
  44. package/skills/project-design/templates/mockup-slides.html +82 -0
  45. package/skills/project-design/templates/mockup-web.html +45 -0
  46. package/skills/project-design/templates/styleguide.html +436 -0
  47. package/skills/project-design/templates/tokens.css +69 -0
  48. package/skills/project-design/templates/tone-options.html +138 -0
  49. package/skills/project-init/GUIDE.md +370 -0
  50. package/skills/project-init/RUNBOOK.md +192 -0
  51. package/skills/project-init/SKILL.md +382 -0
  52. package/skills/project-init/build.mjs +2898 -0
  53. package/skills/project-init/evals/RUBRIC.md +81 -0
  54. package/skills/project-init/evals/cases/conflicting.expect.json +17 -0
  55. package/skills/project-init/evals/cases/conflicting.md +9 -0
  56. package/skills/project-init/evals/cases/vague-idea.expect.json +11 -0
  57. package/skills/project-init/evals/cases/vague-idea.md +7 -0
  58. package/skills/project-init/evals/cases/well-formed.expect.json +18 -0
  59. package/skills/project-init/evals/cases/well-formed.md +28 -0
  60. package/skills/project-init/markdown.mjs +0 -0
  61. package/skills/project-init/modules/a11y.json +46 -0
  62. package/skills/project-init/modules/ai.json +77 -0
  63. package/skills/project-init/modules/audience.json +48 -0
  64. package/skills/project-init/modules/backend.json +129 -0
  65. package/skills/project-init/modules/brand.json +78 -0
  66. package/skills/project-init/modules/core.json +132 -0
  67. package/skills/project-init/modules/design.json +72 -0
  68. package/skills/project-init/modules/engineering.json +86 -0
  69. package/skills/project-init/modules/mobile.json +22 -0
  70. package/skills/project-init/modules/ops.json +122 -0
  71. package/skills/project-init/modules/process.json +104 -0
  72. package/skills/project-init/modules/product.json +37 -0
  73. package/skills/project-init/modules/ux.json +52 -0
  74. package/skills/project-init/modules/web.json +129 -0
  75. package/skills/project-init/presets/ai-product.json +12 -0
  76. package/skills/project-init/presets/internal-system.json +15 -0
  77. package/skills/project-init/presets/mobile-app.json +20 -0
  78. package/skills/project-init/presets/web-corporate.json +116 -0
  79. package/skills/project-init/schema.json +80 -0
  80. package/skills/project-init/templates/log.md +54 -0
  81. package/skills/project-init/templates/readme.md +62 -0
  82. package/skills/project-init/templates/reference.md +34 -0
  83. package/skills/project-init/templates/register.md +63 -0
  84. package/skills/project-init/templates/spec.md +46 -0
  85. package/skills/project-interview/INTERVIEW.md +221 -0
  86. package/skills/project-interview/SKILL.md +156 -0
  87. package/skills/project-interview/fixtures/brief.md +49 -0
  88. package/skills/project-interview/fixtures/decisions.md +13 -0
  89. package/skills/project-interview/fixtures/open-questions.md +9 -0
  90. package/skills/project-interview/templates/brief.md +179 -0
  91. package/skills/project-interview/templates/decisions.md +55 -0
  92. package/skills/project-interview/templates/open-questions.md +40 -0
  93. package/skills/project-interview/validate.mjs +49 -0
package/skills/project-design/templates/change-log.md ADDED
@@ -0,0 +1,53 @@
1
+ ---
2
+ id: design-change-log
3
+ title: 디자인 수정 이력
4
+ summary: 스타일이 바뀔 때마다 남기는 기록. 왜 이 값이 됐는지 되짚기 위한 것.
5
+ date: {{YYYY-MM-DD}}
6
+ ---
7
+
8
+ # 디자인 수정 이력
9
+
10
+ > **3단계 기록이다.** 2단계의 의사결정 기록과 별개다.
11
+ > 여기에는 *스타일이 어떻게 변해왔는지*가 쌓인다.
12
+
13
+ ## 기록 규칙
14
+
15
+ - **스타일을 고칠 때마다** 항목을 추가한다. 몰아서 쓰지 않는다.
16
+ - 값이 바뀌면 **바뀌기 전 값도 적는다.** 되돌릴 수 있어야 한다.
17
+ - "좀 더 밝게" 같은 요청이어도 **결과 값**을 기록한다.
18
+ - ID는 `DS-001` 형식. 2단계의 `D-001`·`B-01`과 구분된다.
19
+ - **차수**(`Home 7차 시안`)를 시안 파일과 **같은 문자열로** 적는다.
20
+ `build.mjs check` 가 둘을 대조해 어긋나면 경고한다.
21
+ - **검수 결과와 "확인 못 함"을 반드시 적는다.** 비워 두면 "다 봤다"로 읽힌다.
22
+ 모션·스크롤 동작처럼 도구가 못 보는 것은 늘 있다.
23
+
24
+ > 파일 자체는 `build.mjs build` 가 `mockups/.history/` 에 자동으로 남긴다.
25
+ > 값만 적어서는 되돌릴 수 없다.
26
+
27
+ ---
28
+
29
+ ## DS-001. 최초 규칙 수립
30
+
31
+ **일자** {{YYYY-MM-DD}}
32
+ **입력** URL / 이미지 / 텍스트 / Figma — 무엇을 근거로 했는가
33
+ **변경** 최초 작성
34
+ **이유**
35
+ **영향 화면**
36
+ **검수** audit.html 필수 항목 — 결과 / 확인한 폭
37
+ **확인 못 함** 없음
38
+
39
+ ---
40
+
41
+ ## 템플릿
42
+
43
+ ```
44
+ ## DS-00N. 제목
45
+
46
+ **일자**
47
+ **입력** URL / 이미지 / 텍스트 / Figma
48
+ **변경** 무엇을 어떻게 (이전 값 → 이후 값)
49
+ **이유**
50
+ **영향 화면** 차수를 적는다 — "Home 7차 시안"
51
+ **검수** audit.html 필수 항목 결과 / 확인한 폭
52
+ **확인 못 함** 못 본 것과 그 이유. 없으면 "없음"
53
+ ```
package/skills/project-design/templates/design-rules.md ADDED
@@ -0,0 +1,118 @@
1
+ ---
2
+ id: design-rules
3
+ title: 디자인 규칙
4
+ summary: 3단계에서 도출된 디자인 규칙과 그 근거.
5
+ status: draft
6
+ date: {{YYYY-MM-DD}}
7
+ source: {{url | image | text | figma | 혼합}}
8
+ ---
9
+
10
+ # 디자인 규칙
11
+
12
+ > **3단계 기록이다.** 2단계 디자인 시스템 문서와 충돌하는 항목이 있으면
13
+ > 7항에 차이를 드러내고, 어느 쪽을 따를지 정해진 뒤에 반영한다.
14
+
15
+ > **`status` 는 사람만 올린다.** `draft` → `review` → `approved`.
16
+ > 3단계 진행률이 이 값을 읽는다 — 승인 전에는 100% 가 되지 않는다.
17
+ > AI 가 임의로 `approved` 로 바꾸지 않는다.
18
+
19
+ ## 1. 근거
20
+
21
+ | 항목 | 내용 |
22
+ | --- | --- |
23
+ | 입력 방식 | URL / 이미지 / 텍스트 / Figma |
24
+ | 대상 | (URL 목록 또는 이미지 파일명 또는 인터뷰 일자) |
25
+ | 확인 수단 | 스크린샷 / HTML·CSS / 텍스트만 / 이미지 판독 / **Figma 변수(정확값)** |
26
+
27
+ **확인한 것과 추정한 것**
28
+
29
+ | 항목 | 값 | 근거 |
30
+ | --- | --- | --- |
31
+ | | | 확인 / **추정** |
32
+
33
+ > 화면을 직접 보지 못하고 유추한 값에는 반드시 `추정`을 붙인다.
34
+
35
+ ## 2. 인상
36
+
37
+ 한 문장으로. 그리고 **그 인상을 만드는 요소**를 셋 이내로 적는다.
38
+
39
+ **피해야 할 인상** — 반드시 채운다.
40
+
41
+ ## 3. 토큰
42
+
43
+ > **값은 여기에 적지 않는다.** 정본은 `tokens.css` 하나이고, 실제 값과 명도비는
44
+ > `styleguide.html` 이 그 파일을 읽어 렌더한다.
45
+ > 값을 문서에도 적으면 두 곳이 되고, 두 곳은 반드시 갈라진다.
46
+ > 여기에는 **어떤 토큰이 있고 무엇에 쓰는지**만 적는다.
47
+
48
+ ### 색
49
+
50
+ | 토큰 | 용도 | 주의 |
51
+ | --- | --- | --- |
52
+ | `--bg` | 기본 배경 | |
53
+ | `--ink` | 본문 | |
54
+ | | | 어두운 면에서 뒤집어야 하면 여기에 적는다 |
55
+
56
+ ### 타이포그래피
57
+
58
+ | 토큰 · 항목 | 용도 |
59
+ | --- | --- |
60
+ | `--font-display` | 제목·메뉴·버튼 |
61
+ | `--font-body` | 본문 |
62
+ | `--text-display` `--text-h2` … | 크기 스케일 |
63
+ | 본문 하한 | 16px / 캡션 하한 (예외는 7항에) |
64
+
65
+ ### 간격 · 형태
66
+
67
+ | 토큰 · 항목 | 용도 |
68
+ | --- | --- |
69
+ | `--container` | 콘텐츠 최대 폭 |
70
+ | `--section-y` | 섹션 상하 여백 |
71
+ | `--radius-*` | 면 · 카드 · 작은 UI |
72
+ | `--shadow-*` | **쓰기로 한 곳만 명시한다** |
73
+ | `--tap` | 최소 터치 영역 |
74
+
75
+ > 새 토큰을 만들면 이 표에 이름을 추가한다. 빠뜨리면 `build.mjs check` 가 경고한다.
76
+
77
+ ## 4. 레이아웃 원칙
78
+
79
+ - 정렬, 열 구성, 리듬
80
+ - 반복과 변주를 어디서 쓰는가
81
+
82
+ ## 5. 안티패턴
83
+
84
+ 2단계 디자인 시스템의 금지 목록을 그대로 옮기고, 이번 규칙에서 추가된 것을 덧붙인다.
85
+ **시안이 이 목록을 어기면 안 된다.**
86
+
87
+ ## 6. 기준 예외
88
+
89
+ 매체 기준(글자 하한 · 터치 타깃 · 대비)을 **의도적으로 벗어난 곳**을 여기 적는다.
90
+ 적지 않으면 나중에 누가 "버그네" 하고 되돌린다. 반대로 여기에 없는 위반은 버그다.
91
+
92
+ | 기준 | 원래 값 | 예외 값 | 적용 범위 | 이유 | 보상 조치 | 하한 |
93
+ | --- | --- | --- | --- | --- | --- | --- |
94
+ | | | | | | | 여기서 더 내리지 않는다 |
95
+
96
+ > **보상 조치를 반드시 적는다.** 글자를 줄였으면 대비를 쟀다든지,
97
+ > 터치 타깃을 줄였으면 어느 기준(WCAG 2.5.8 = 24px)은 지켰다든지.
98
+ > 예외에 하한이 없으면 그건 예외가 아니라 기준 폐기다.
99
+
100
+ ## 7. 2단계 디자인 시스템과의 차이
101
+
102
+ | 항목 | 2단계 문서 | 이번 규칙 | 결정 |
103
+ | --- | --- | --- | --- |
104
+ | | | | 유지 / 변경 |
105
+
106
+ 변경으로 정한 항목은 2단계 문서도 함께 고치고 그쪽 변경 이력에 남긴다.
107
+
108
+ ## 8. 시안 대상 화면
109
+
110
+ | 화면 | 근거 문서 | 상태 |
111
+ | --- | --- | --- |
112
+ | | 화면 정의서 N항 | 예정 / 완료 |
113
+
114
+ ## 9. 미결정
115
+
116
+ | 항목 | 결정 주체 | 막히는 것 |
117
+ | --- | --- | --- |
118
+ | | | |
package/skills/project-design/templates/mockup-app.html ADDED
@@ -0,0 +1,96 @@
1
+ <!doctype html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>{{화면명}} — 앱 시안</title>
7
+ <!--
8
+ 모바일 앱 시안. 디바이스 프레임 안에서 확인한다.
9
+ - 토큰은 ../tokens.css 한 곳
10
+ - 세이프 에어리어를 침범하지 않는다 (상단 노치 / 하단 홈 인디케이터)
11
+ - 터치 타깃 최소 44×44pt — var(--tap)
12
+ - 실제 카피를 쓴다. Lorem ipsum 금지
13
+ -->
14
+ <link rel="stylesheet" href="../tokens.css">
15
+ <style>
16
+ body{background:#e9eaee; display:flex; gap:28px; flex-wrap:wrap;
17
+ justify-content:center; padding:40px 20px 90px}
18
+
19
+ /* 디바이스 프레임 — 390×844 (iOS 기준). Android는 폭 360도 확인 */
20
+ .device{width:390px; flex:none}
21
+ .device-label{text-align:center; font-size:12px; color:var(--ink-muted); margin-bottom:8px}
22
+ .screen{
23
+ position:relative; width:390px; height:844px; overflow:hidden;
24
+ background:var(--bg); border-radius:44px; border:10px solid #1c1c1e;
25
+ box-shadow:0 18px 50px rgba(0,0,0,.22);
26
+ }
27
+ /* 세이프 에어리어 — 이 영역 안에 조작 요소를 넣지 않는다 */
28
+ .safe-top{height:59px; flex:none}
29
+ .safe-bottom{height:34px; flex:none}
30
+ .notch{position:absolute; top:10px; left:50%; transform:translateX(-50%);
31
+ width:120px; height:32px; border-radius:20px; background:#1c1c1e; z-index:5}
32
+ .home-bar{position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
33
+ width:140px; height:5px; border-radius:3px; background:var(--ink); opacity:.28; z-index:5}
34
+
35
+ .screen-inner{display:flex; flex-direction:column; height:100%}
36
+ .app-body{flex:1; overflow-y:auto; padding:0 20px}
37
+
38
+ /* 상단 바 — iOS 기준. Android면 뒤로가기 위치와 정렬이 달라진다 */
39
+ .app-bar{display:flex; align-items:center; gap:8px; height:44px; flex:none;
40
+ padding:0 4px; border-bottom:1px solid var(--line)}
41
+ .app-bar-title{flex:1; text-align:center; font-size:17px; font-weight:600}
42
+ .app-bar button{width:var(--tap); height:var(--tap); border:0; background:none;
43
+ color:var(--brand); font-size:16px; cursor:pointer}
44
+
45
+ /* 하단 탭 — 항목마다 최소 44pt */
46
+ .tabbar{display:flex; flex:none; border-top:1px solid var(--line)}
47
+ .tabbar a{flex:1; min-height:var(--tap); display:flex; flex-direction:column;
48
+ align-items:center; justify-content:center; gap:3px; padding:6px 0;
49
+ font-size:11px; color:var(--ink-muted); text-decoration:none}
50
+ .tabbar a.on{color:var(--brand); font-weight:600}
51
+ .tab-dot{width:20px; height:20px; border-radius:6px; background:currentColor; opacity:.28}
52
+
53
+ .app-body h1{font-size:26px; line-height:1.25; margin:20px 0 10px}
54
+ .app-body p{font-size:15px; line-height:1.6; color:var(--ink-secondary)}
55
+ .app-body .btn{width:100%; margin:16px 0 0}
56
+ .app-body .btn + .btn{margin-left:0}
57
+ </style>
58
+ </head>
59
+ <body>
60
+
61
+ <div class="device">
62
+ <div class="device-label">{{화면명}} · 390×844</div>
63
+ <div class="screen">
64
+ <div class="notch"></div>
65
+ <div class="home-bar"></div>
66
+ <div class="screen-inner">
67
+ <div class="safe-top"></div>
68
+
69
+ <div class="app-bar">
70
+ <button aria-label="뒤로">‹</button>
71
+ <span class="app-bar-title">{{화면 제목}}</span>
72
+ <button aria-label="더보기">⋯</button>
73
+ </div>
74
+
75
+ <div class="app-body">
76
+ <h1>{{확정 카피 — 화면 정의서에서 그대로}}</h1>
77
+ <p>{{본문}}</p>
78
+ <a class="btn btn-primary" href="#">{{Primary CTA}}</a>
79
+ </div>
80
+
81
+ <nav class="tabbar">
82
+ <a class="on" href="#"><span class="tab-dot"></span>{{탭1}}</a>
83
+ <a href="#"><span class="tab-dot"></span>{{탭2}}</a>
84
+ <a href="#"><span class="tab-dot"></span>{{탭3}}</a>
85
+ </nav>
86
+
87
+ <div class="safe-bottom"></div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- 화면이 여러 개면 .device 를 복제해 나란히 둔다. 전환 흐름이 눈에 보인다 -->
93
+
94
+ <div class="mockup-flag">시안 · {{YYYY-MM-DD}}</div>
95
+ </body>
96
+ </html>
package/skills/project-design/templates/mockup-slides.html ADDED
@@ -0,0 +1,82 @@
1
+ <!doctype html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>{{제목}} — 발표자료 시안</title>
7
+ <!--
8
+ 발표자료 시안. 16:9, 1920×1080 기준으로 그리고 화면에서는 축소해 본다.
9
+ - 토큰은 ../tokens.css 한 곳
10
+ - 글자 최소: 제목 40px, 본문 24px (1920 기준). 뒷자리에서 읽혀야 한다
11
+ - 한 장 = 한 메시지. 두 주장이 들어가면 장을 나눈다
12
+ - 슬라이드는 보조다. 문장을 다 넣지 않는다
13
+ - 흑백 인쇄에서도 구분되는지 확인한다
14
+ -->
15
+ <link rel="stylesheet" href="../tokens.css">
16
+ <style>
17
+ body{background:#e9eaee; padding:36px 20px 90px; line-height:1.5}
18
+
19
+ .deck{display:flex; flex-direction:column; align-items:center; gap:28px}
20
+ .slide-wrap{width:min(100%, 1100px)}
21
+ .slide-label{font-size:12px; color:var(--ink-muted); margin-bottom:6px}
22
+
23
+ /* 1920×1080 을 그대로 그리고 컨테이너 폭에 맞춰 축소한다.
24
+ px 값을 1920 기준으로 쓸 수 있어 실제 크기 감각이 유지된다 */
25
+ .slide{
26
+ width:1920px; height:1080px; transform-origin:top left;
27
+ background:var(--bg); position:relative; overflow:hidden;
28
+ box-shadow:0 10px 40px rgba(0,0,0,.16);
29
+ padding:110px 130px;
30
+ }
31
+ .slide-frame{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden}
32
+ .slide-frame .slide{position:absolute; top:0; left:0; scale:calc(1 / 1920 * 100vw)}
33
+ @supports not (scale: 1){ .slide-frame .slide{transform:scale(.5729)} }
34
+
35
+ .s-eyebrow{font-size:30px; font-weight:600; letter-spacing:.08em;
36
+ text-transform:uppercase; color:var(--accent); margin:0 0 28px}
37
+ .s-title{font-size:88px; line-height:1.12; letter-spacing:-.03em;
38
+ font-weight:700; margin:0 0 34px; max-width:22ch}
39
+ .s-body{font-size:34px; line-height:1.55; color:var(--ink-secondary); max-width:40ch; margin:0}
40
+ .s-note{position:absolute; left:130px; bottom:60px; font-size:24px; color:var(--ink-muted)}
41
+
42
+ .s-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:56px}
43
+ .s-col h3{font-size:40px; margin:0 0 14px; font-weight:600}
44
+ .s-col p{font-size:28px; line-height:1.5; color:var(--ink-secondary); margin:0}
45
+ .s-rule{width:96px; height:6px; background:var(--accent); border-radius:3px; margin-bottom:20px}
46
+ </style>
47
+ </head>
48
+ <body>
49
+
50
+ <div class="deck">
51
+
52
+ <!-- 표지 -->
53
+ <div class="slide-wrap">
54
+ <div class="slide-label">1 · 표지</div>
55
+ <div class="slide-frame"><div class="slide">
56
+ <div class="s-rule"></div>
57
+ <p class="s-eyebrow">{{Eyebrow}}</p>
58
+ <h1 class="s-title">{{한 문장 메시지}}</h1>
59
+ <p class="s-body">{{보조 설명}}</p>
60
+ <p class="s-note">{{회사명}} · {{YYYY-MM-DD}}</p>
61
+ </div></div>
62
+ </div>
63
+
64
+ <!-- 본문 — 한 장 한 메시지 -->
65
+ <div class="slide-wrap">
66
+ <div class="slide-label">2 · 본문</div>
67
+ <div class="slide-frame"><div class="slide">
68
+ <p class="s-eyebrow">{{섹션명}}</p>
69
+ <h2 class="s-title" style="font-size:64px">{{이 장의 주장 하나}}</h2>
70
+ <div class="s-cols">
71
+ <div class="s-col"><h3>{{항목1}}</h3><p>{{설명}}</p></div>
72
+ <div class="s-col"><h3>{{항목2}}</h3><p>{{설명}}</p></div>
73
+ <div class="s-col"><h3>{{항목3}}</h3><p>{{설명}}</p></div>
74
+ </div>
75
+ </div></div>
76
+ </div>
77
+
78
+ </div>
79
+
80
+ <div class="mockup-flag">시안 · {{YYYY-MM-DD}}</div>
81
+ </body>
82
+ </html>
package/skills/project-design/templates/mockup-web.html ADDED
@@ -0,0 +1,45 @@
1
+ <!doctype html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>{{화면명}} — 시안</title>
7
+ <!--
8
+ 3단계 시안. Docs/_design/mockups/ 에 둔다.
9
+ - 토큰은 ../tokens.css 한 곳에만 있다. 시안마다 값을 복사하면 반드시 어긋난다
10
+ - 이 시안에만 필요한 스타일은 아래 <style> 에 둔다
11
+ - 폰트·이미지를 외부에서 불러오지 않는다
12
+ - 실제 카피를 쓴다. Lorem ipsum 금지
13
+ - 없는 실적·고객사·수치를 만들지 않는다
14
+ -->
15
+ <link rel="stylesheet" href="../tokens.css">
16
+ <style>
17
+ /* 이 시안에만 해당하는 스타일 */
18
+ section{padding:var(--section-y) 0}
19
+ .alt{background:var(--bg-subtle)}
20
+ </style>
21
+ </head>
22
+ <body>
23
+
24
+ <!-- ── 여기부터 화면 정의서의 섹션 순서대로 ─────────────── -->
25
+ <section>
26
+ <div class="container">
27
+ <p class="eyebrow">{{Eyebrow}}</p>
28
+ <h1>{{확정 카피 — 화면 정의서에서 그대로}}</h1>
29
+ <p class="lead">{{서브카피}}</p>
30
+ <a class="btn btn-primary" href="#">{{Primary CTA}}</a>
31
+ <a class="btn btn-secondary" href="#">{{Secondary CTA}}</a>
32
+ </div>
33
+ </section>
34
+
35
+ <section class="alt">
36
+ <div class="container">
37
+ <h2>{{다음 섹션}}</h2>
38
+ <p class="lead">{{내용}}</p>
39
+ </div>
40
+ </section>
41
+ <!-- ─────────────────────────────────────────────────── -->
42
+
43
+ <div class="mockup-flag">시안 · {{YYYY-MM-DD}}</div>
44
+ </body>
45
+ </html>