ui-pencil-drawer

Sterne1

Forks0

Aktualisiert2. März 2026 um 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.

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

vuthuonghai-steve

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

Web- und digitale SchnittstellendesignerInformatik- und Mathematikberufe·SOC 15-1255

Datei-Explorer

9 Dateien

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?".

Mehr aus diesem Repository

gleiches Repository

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?".