Back to Details

screen-plan

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

screen-plan

screen-plan

화면 기획을 흑백 HTML 와이어프레임으로 작성·수정하는 보편 스킬.
这是一项以黑白HTML Wireframe来编写、修改界面策划的通用技能。

발동 조건

触发条件

다음 의도가 보이면 발동:
  • "화면 기획", "화면 설계", "와이어", "와이어프레임", "스크린"
  • 화면 ID 언급 (O1, M1, E1 등)
  • "이 화면 만들어줘", "메인 화면 어떻게 생길지" 등
当出现以下意图时触发：
  • "界面策划"、"界面设计"、"线框"、"Wireframe"、"屏幕"
  • 提及界面ID（O1、M1、E1等）
  • "帮我做这个界面"、"主界面会是什么样子"等

1. 작업 절차 — 새 화면 작성

1. 工作流程 — 新建界面

① 기존 화면 전수 읽기 (필수, 생략 금지)

① 通读现有界面（必填，禁止省略）

새 화면을 만들기 전에 반드시 다음을 수행한다:
  1. 화면 디렉토리의 모든 HTML 파일을 읽는다.
  2. 다음 패턴을 파악하고 메모한다:
    • 프레임 유형 (
      frame--web
      , 
      frame--app
      등)
    • 네비게이션 구조 (GNB, topbar 등)
    • 레이아웃 패턴 (컬럼 수, 섹션 구조)
    • 컴포넌트 사용 관례 (버튼, 입력, 카드 등)
    • 카피 톤 (문체, 길이, 용어)
  3. 새 화면은 기존 화면과 동일한 패턴을 따른다. 의도적으로 다르게 만들어야 할 이유가 있으면 사이드 노트 "의도"에 명시한다.
이 단계를 건너뛰면 화면 간 결이 달라지는 문제가 반복된다.
在创建新界面之前，必须完成以下操作：
  1. 阅读界面目录下的所有HTML文件。
  2. 识别并记录以下模式：
    • 框架类型（
      frame--web
      、
      frame--app
      等）
    • 导航结构（GNB、topbar等）
    • 布局模式（列数、区块结构）
    • 组件使用惯例（按钮、输入框、卡片等）
    • 文案风格（文体、长度、术语）
  3. 新界面必须遵循与现有界面相同的模式。若有刻意差异化的需求，请在侧边备注「意图」中说明。
跳过此步骤会导致界面风格不一致的问题反复出现。

② 도메인 규칙 참조

② 参考领域规则

프로젝트에 도메인 규칙 문서(
README.md
, 기획 문서 등)가 있으면 반드시 읽고 따른다. 금지어, 공개/비공개 필드, 카피 규칙 등은 스킬이 아닌 프로젝트 문서가 권위.
若项目存在领域规则文档（
README.md
、策划文档等），必须阅读并遵循。禁用词、公开/私有字段、文案规则等以项目文档为准，而非本技能。

③ ID·영역 결정

③ 确定ID·区域

영역 prefix + 순번. 새 영역이 필요하면 사용자에게 확인.
区域前缀 + 序号。若需要新增区域，请与用户确认。

④ 메타 블록 작성

④ 编写元数据块

각 화면 HTML 상단에 
.meta
블록으로 명시:
  • ID + 이름 + 한 줄 목적
  • 진입점 (어디서 어떻게 들어오나)
  • 다음 (어디로 나가나, 분기 조건)
  • 권한·상태 가정
  • 작성일
在每个界面HTML顶部以
.meta
块明确标注：
  • ID + 名称 + 一行描述的用途
  • 入口点（从何处、如何进入）
  • 后续路径（前往何处、分支条件）
  • 权限·状态假设
  • 创建日期

⑤ 화면 본문 작성

⑤ 编写界面主体

  • 기존 화면에서 파악한 패턴을 그대로 적용
  • 실제 카피·실제 구조 사용. lorem ipsum 금지
  • 사용자 데이터는 중괄호 토큰 
    {이름}
    , 
    {거리}
    등
  • 공용 CSS·컴포넌트가 있으면 재사용
  • 完全沿用从现有界面识别出的模式
  • 使用真实文案·真实结构。禁止使用lorem ipsum
  • 用户数据使用大括号标记 
    {姓名}
    、
    {距离}
    等
  • 若有公共CSS·组件，请复用

⑥ 사이드 노트 작성

⑥ 编写侧边备注

3섹션 고정:
  • 의도: 왜 이 구조·카피인가
  • 대안: 다른 옵션 / 보류된 안
  • 미정: 결정 못한 항목
固定分为3个部分：
  • 意图：为何采用此结构·文案
  • 替代方案：其他选项 / 暂存方案
  • 待定：尚未确定的事项

⑦ 인덱스 갱신

⑦ 更新索引

화면 목록 파일(
index.html
등)에 항목 추가.
在界面列表文件（
index.html
等）中添加条目。

2. 작업 절차 — 기존 화면 수정

2. 工作流程 — 修改现有界面

  1. 해당 HTML 직접 편집
  2. 진입점·다음으로 연결된 인접 화면도 점검 (영향 전파)
  3. ID·이름 변경 시 인덱스 갱신
  1. 直接编辑对应的HTML
  2. 检查入口点·后续路径关联的相邻界面（影响范围）
  3. 若ID·名称变更，需更新索引

3. 화면 4안 (필수)

3. 界面4方案（必填）

새 화면을 기획할 때, 컨셉이 다른 4개 안을 만들어서 보여준다. 직장 상사에게 기획 안건을 올린다고 생각할 것 — 4개 모두 근거 있고 실현 가능하되, 서로 다른 관점에서 문제를 푼다.
策划新界面时，需制作4个不同概念的方案并展示。请以向公司上司提交策划提案的心态来完成——4个方案均需有依据且可实现，但需从不同视角解决问题。

구성

构成

  • 보편 2안: 기존 화면 패턴을 기반으로 하되, 서로 다른 컨셉으로 풀어낸 2개. 둘 다 안정적이지만 강조점·정보 위계·사용자 동선이 다르다.
  • 실험 2안: 기존 패턴에 얽매이지 않는 새로운 시도 2개. 구조를 깨거나, 특이한 인터랙션을 제안하거나, 다른 서비스에서 영감을 받은 접근. 단순히 "구조가 다른" 수준이 아니라 아이디어 자체가 다양해야 한다.
  • 通用方案2个：基于现有界面模式，但以不同概念实现的2个方案。两者均较为稳妥，但侧重点·信息层级·用户动线有所不同。
  • 实验方案2个：不受现有模式束缚的新尝试2个。打破结构、提出特殊交互、借鉴其他服务的思路等。不能仅停留在「结构不同」的层面，需确保创意本身具有多样性。

추론 순서

推导顺序

  1. 기존 화면 패턴 파악 (①에서 수행). 프레임·레이아웃·컴포넌트·카피 톤.
  2. 이 화면이 풀어야 할 핵심 문제를 정의한다. "사용자가 뭘 하러 오는 화면인가?"
  3. 보편 A: 기존 패턴으로 핵심 문제를 가장 직관적으로 푼다.
  4. 보편 B: 같은 기존 패턴이지만 다른 관점에서 푼다 (강조점 변경, 정보 순서 변경, 동선 변경 등).
  5. 실험 A: 기존 패턴을 벗어난 접근. "만약 ~라면?" 식의 발상.
  6. 실험 B: 실험 A와도 다른 방향의 새로운 시도.
  1. 识别现有界面模式（步骤①已完成）。框架·布局·组件·文案风格。
  2. 定义该界面需解决的核心问题。即「用户为何访问此界面？」
  3. 通用方案A：以现有模式最直观地解决核心问题。
  4. 通用方案B：同样基于现有模式，但从不同视角解决问题（调整侧重点、信息顺序、动线等）。
  5. 实验方案A：脱离现有模式的思路。以「如果……会怎样？」的方式发散思维。
  6. 实验方案B：与实验方案A方向不同的新尝试。

좋은 4안의 기준

优质4方案的标准

  • 4개가 서로 다른 이유를 한 줄로 설명할 수 있어야 한다.
  • "레이아웃만 다른" 4개는 나쁜 4안. 컨셉·관점·사용자 경험이 달라야 한다.
  • 보편도 "무난한 1개를 복사"가 아니라 진짜 다른 접근 2개.
  • 실험도 "이상한 1개를 복사"가 아니라 진짜 다른 아이디어 2개.
  • 能够用一句话说明4个方案各自的差异点。
  • 仅「布局不同」的4个方案属于劣质方案。需在概念·视角·用户体验上有所区别。
  • 通用方案不能是「复制一个稳妥的方案」，而需是两种真正不同的思路。
  • 实验方案不能是「复制一个怪异的方案」，而需是两种真正不同的创意。

산출물

产出物

  • 4개를 하나의 HTML 파일에 보편A / 보편B / 실험A / 실험B로 나란히 배치
  • 각 안마다 컨셉 한 줄 (이 안이 다른 안과 뭐가 다른지)
  • 사용자가 선택하면 해당 안을 기반으로 최종 화면 확정. 혼합도 가능.
  • 将4个方案放在同一个HTML文件中，并列展示为通用A / 通用B / 实验A / 实验B
  • 每个方案附带一句概念说明（该方案与其他方案的差异）
  • 用户选择后，以该方案为基础确定最终界面。也可混合多个方案的元素。

4. 시각 규칙

4. 视觉规则

  • 흑백만 사용. 회색 6단계: 
    #000 / #333 / #666 / #999 / #ccc / #eee / #fff
  • 그림자·그라데이션·컬러·배경 이미지 금지
  • 구조는 1px solid 보더로 표현
  • 이미지 플레이스홀더: 1px 보더 + 대각선 X + 레이블
  • 仅使用黑白。6阶灰色：
    #000 / #333 / #666 / #999 / #ccc / #eee / #fff
  • 禁止使用阴影·渐变·色彩·背景图片
  • 结构以1px实线边框表示
  • 图片占位符：1px边框 + 对角线X + 标签

5. 반응형

5. 响应式

  • 모바일 default → 768px+ → 1024px+
  • 고정 모바일 너비 금지 — 처음부터 반응형
  • 移动端优先 → 768px+ → 1024px+
  • 禁止固定移动端宽度 — 从一开始就采用响应式设计

6. 카피 규칙

6. 文案规则

  • 멘트 최소화. 직관적 UI로 전달
  • 짧고 건조하게. 2~3단어 이내
  • 서술형 문장 금지 ("~해 주세요" 등)
  • 감탄사·이모지·느낌표 금지
  • lorem ipsum 금지 — 실제 라벨만
  • 尽量减少文字。通过直观UI传递信息
  • 简短干练。控制在2~3词以内
  • 禁止使用叙述性语句（如「请……」等）
  • 禁止使用感叹词·表情符号·感叹号
  • 禁止使用lorem ipsum — 仅使用真实标签

7. 버전 규칙

7. 版本规则

  • 화면 HTML은 코드 성격 → 직접 편집
  • 큰 구조 변경 시에만 디렉토리 단위 버전업
  • 界面HTML具有代码属性 → 直接编辑
  • 仅在大幅变更结构时，才进行目录级版本升级