원클릭으로 Manus에서 모든 스킬 실행

ui-pencil-drawer

스타1

포크0

업데이트2026년 3월 2일 14:44

Automates end-to-end drawing of UI screens in Pencil canvas from module spec files. Reads spec file → generates wireframe blueprint → draws each screen using Pencil MCP tools. Triggers when user provides a UI spec path and asks to draw, generate, or auto-build screens for Steve Void modules M1–M6 in STi.pen.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

vuthuonghai-steve

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

웹·디지털 인터페이스 디자이너컴퓨터 및 수학직·SOC 15-1255

파일 탐색기

9 개 파일

SKILL.md

readonly

name	ui-pencil-drawer
description	Automates end-to-end drawing of UI screens in Pencil canvas from module spec files. Reads spec file → generates wireframe blueprint → draws each screen using Pencil MCP tools. Triggers when user provides a UI spec path and asks to draw, generate, or auto-build screens for Steve Void modules M1–M6 in STi.pen.
category	ui
pipeline	{"stage_order":7,"input_contract":[{"type":"file","path":"Docs/life-2/ui/specs/{module}-ui-spec.md","required":true},{"type":"file","path":"Docs/life-2/ui/wireframes/{module}.pen","required":false}],"output_contract":[{"type":"file","path":"Docs/life-2/ui/wireframes/{module}.pen","format":"pen"}],"validation":{"script":null,"expected_exit_code":0},"dependencies":["ui-architecture-analyst"]}

⚡ CHẾ ĐỘ TỰ ĐỘNG (PIPELINE AUTOMATION MODE): Bạn đang chạy dưới sự ủy quyền của Orchestrator (Tool Task).

KHÔNG CHÀO HỎI, KHÔNG CHỜ ĐỢI: BẮT ĐẦU DÙNG TOOL LÀM VIỆC NGAY LẬP TỨC! Đừng bao giờ trả lời kiểu "Tôi đã hiểu, hãy cung cấp UC-ID...". Prompt bạn nhận được CHÍNH LÀ LỆNH THỰC THI Cuối cùng, hãy dùng Tool Read đọc file Blueprint và Generate Output ngay!

KHÔNG ĐƯỢC PHÉP HỎI (NO INTERACTION GATE): Bỏ qua TẤT CẢ các GATE trạm dừng, không được dừng lại hỏi ý kiến user. Tự suy luận và quyết định theo spec!

INPUT ĐỘNG (DYNAMIC INPUT): TUYỆT ĐỐI không đi tìm project-registry.json trừ khi Orchestrator bảo. CHỈ đọc các file mà Orchestrator chỉ định trong Prompt.

OUTPUT TRỰC TIẾP (DIRECT OUTPUT): Sau khi đọc input và suy luận <think> xong, GHI THẲNG CODE vào file ở thư mục đích bằng tool Write. Đừng hỏi "Ghi file chưa?".

이 저장소의 다른 Skills

같은 저장소

activity-diagram-design-analyst

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Senior Solutions Architect chuyên về Activity Diagram (High-Fidelity) theo tư duy Clean Architecture (B-U-E). Kích hoạt khi cần tạo activity diagram từ class diagram hoặc chạy pipeline UML stage 4. Đầu ra: Docs/life-2/diagrams/activity/{module}-activity.md

2026-03-021

class-diagram-analyst

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Class Structure Analyst chuyên về Class Diagram theo chuẩn dual-format (Mermaid + YAML Contract) cho PayloadCMS/MongoDB. Kích hoạt khi cần tạo class diagram từ sequence diagram hoặc chạy pipeline UML stage 3. Đầu ra: Docs/life-2/diagrams/class/{module}/class-{module}.md + class-{module}.yaml

2026-03-021

flow-design-analyst

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Senior Business Analyst chuyên về Business Process Flow Diagram (High-Fidelity) theo chuẩn 3-lane Swimlane (User/System/DB). Kích hoạt khi cần tạo flow diagram từ specs hoặc chạy pipeline UML stage 1. Đầu ra: Docs/life-2/diagrams/flow/{module}-flow.md

2026-03-021

global-system-planner

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Master System Planner. Phân tích ngữ cảnh tổng thể từ Functional Requirements, sinh ra Global Blueprint cho quá trình UML Generation. Đóng vai trò làm Stage 0 để truyền context tổng quát cho các Agent phân rã phía sau.

2026-03-021

payload-expert

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Payload CMS 3.x specialist for Steve Void project. Use when designing or implementing Payload collections, hooks, access control, Local API calls, or debugging Payload-related issues.

2026-03-021

pipeline-orchestrator

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Điều phối pipeline chạy các skill theo thứ tự. Dùng khi cần tự động chạy nhiều skill (flow-design → sequence-design → class-diagram → ...) mà không cần can thiệp thủ công giữa các bước. Đọc pipeline.yaml, quản lý _queue.json, spawn subagents và theo dõi tiến trình.

2026-03-021

name	ui-pencil-drawer
description	Automates end-to-end drawing of UI screens in Pencil canvas from module spec files. Reads spec file → generates wireframe blueprint → draws each screen using Pencil MCP tools. Triggers when user provides a UI spec path and asks to draw, generate, or auto-build screens for Steve Void modules M1–M6 in STi.pen.
category	ui
pipeline	{"stage_order":7,"input_contract":[{"type":"file","path":"Docs/life-2/ui/specs/{module}-ui-spec.md","required":true},{"type":"file","path":"Docs/life-2/ui/wireframes/{module}.pen","required":false}],"output_contract":[{"type":"file","path":"Docs/life-2/ui/wireframes/{module}.pen","format":"pen"}],"validation":{"script":null,"expected_exit_code":0},"dependencies":["ui-architecture-analyst"]}

⚡ CHẾ ĐỘ TỰ ĐỘNG (PIPELINE AUTOMATION MODE): Bạn đang chạy dưới sự ủy quyền của Orchestrator (Tool Task).

KHÔNG CHÀO HỎI, KHÔNG CHỜ ĐỢI: BẮT ĐẦU DÙNG TOOL LÀM VIỆC NGAY LẬP TỨC! Đừng bao giờ trả lời kiểu "Tôi đã hiểu, hãy cung cấp UC-ID...". Prompt bạn nhận được CHÍNH LÀ LỆNH THỰC THI Cuối cùng, hãy dùng Tool Read đọc file Blueprint và Generate Output ngay!

KHÔNG ĐƯỢC PHÉP HỎI (NO INTERACTION GATE): Bỏ qua TẤT CẢ các GATE trạm dừng, không được dừng lại hỏi ý kiến user. Tự suy luận và quyết định theo spec!

INPUT ĐỘNG (DYNAMIC INPUT): TUYỆT ĐỐI không đi tìm project-registry.json trừ khi Orchestrator bảo. CHỈ đọc các file mà Orchestrator chỉ định trong Prompt.

OUTPUT TRỰC TIẾP (DIRECT OUTPUT): Sau khi đọc input và suy luận <think> xong, GHI THẲNG CODE vào file ở thư mục đích bằng tool Write. Đừng hỏi "Ghi file chưa?".