plannotator/effective-html
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
유용한 HTML 산출물, 와이어프레임, 인터랙티브 프로토타입, 도면, 다이어그램을 위한 에이전트 기술.
개요
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0 _** 도표는 Fable 5에서 만들었고, 더 많은 Fable 5 아티팩트를 만들어 작은 모델용 스킬 폴더에 추가해 예시 데모를 distill._ 강한 시각적 편향을 가진 자립형 HTML 산출물을 생성하는 집중 기술: - html: 당신이 설명하는 내용에 대한 HTML 파일로, 효과적인 HTML 스타일로 작성됨 - html-diagram: 아키텍처, 스택, 시스템 이해를 고품질 SVG로 전체 화면 HTML 다이어그램으로 렌더링 - html-plan: 효과적인 HTML 스타일로 된 HTML 계획 페이지 Plannotator로 HTML을 렌더링하고 주석을 달으세요 (선택 사항): https://github.com/backnotprop/plannotator 이 저장소는 플러그인 마켓플레이스이기도 합니다. 추가하고 설치하세요: HTML 파일에 즉시 공유 링크를 생성하기(선택 사항): https://github.com/plannotator/tot 영상에서 HTML을 사용하기: https://tot.
개요(AI 번역)
简体中文
저충실도 와이어프레임부터 작동하는 인터랙티브 프로토타입에 이르기까지 유용하고 독립적인 HTML 산출물을 만드는 데 집중된 에이전트 기술입니다.
지방 유물 + 지방 맥락
현대 모델들은 많은 것을 할 수 있습니다. 유용한 참고 자료를 많이 제공하고 활용하세요 당신이 말하는 것을 보여주기 위한 아티팩트들입니다. HTML은 거의 모든 것을 시각화할 수 있으며, 종종 그 이상을 구현할 수 있습니다 분명히 긴 글보다는. 당신의 프롬프트는 단순히 유물을 가리킬 수 있습니다, 저장소와 맥락을 담은 폴더들.
[! 참고] 이 저장소는 아무것도 설치하지 않고도 사용할 수 있습니다. 참고용으로 활용하세요 우선, 설치 가능한 스킬 컬렉션이 그 다음입니다. 참고하세요 효과적인 HTML 가이드.
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
Plannotator로 로컬 HTML을 렌더링하고 주석을 달아주세요.
기술 참조
저장소에는 실용적 시각적 산출물을 위한 7가지 선택적 기술이 포함되어 있습니다.
| 기술 | 그것을 |
|---|---|
html |
광범위한 HTML 요청, 혼합된 산출물, 보고서, 설명, 프레젠테이션, 랜딩 페이지, 도구, 그리고 전문가로의 라우팅 |
big-pics-little-words |
주요 세부사항을 유지하면서 큰 시각적 요소와 최소한의 텍스트로 HTML로 현재 주제를 설명하세요; 브로에서 복사함 |
이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.
README
원문 README의 일부입니다. 원문 보기.
Effective HTML
Focused agent skills for creating useful, self-contained HTML artifacts, from low-fidelity wireframes to working interactive prototypes.
Fat artifacts + fat context
Modern models can do a lot. Give them plenty of useful references and use artifacts to show what you mean. HTML can visualize almost anything, often more clearly than a wall of text. Your prompt can simply point to the artifacts, repositories, and folders that carry the context.
[!NOTE] You can use this repo without installing anything. Treat it as a reference first and an installable skill collection second. See the Effective HTML guide.
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
Render and annotate local HTML with Plannotator.
Skill references
The repo includes eight optional skills for pragmatic visual artifacts.
| Skill | Use it for |
|---|---|
html |
Broad HTML requests, mixed artifacts, reports, explainers, presentations, landing pages, tools, and routing to a specialist |
big-pics-little-words |
Explain the current subject in HTML with large visuals and minimal text while preserving key details; copied from bro |
one-pager |
Make a one-pager: one HTML page that shares an idea with teammates early, or recaps work for them, with big pictures and little words; copied from bro |
design-artifact |
Subject-specific creative direction for any HTML artifact without imposing a reusable house style |
html-wireframe |
Low-fidelity layout directions that test content, hierarchy, navigation, flows, and responsive structure |
html-prototype |
Working prototypes with realistic states, interaction, keyboard support, and responsive behavior |
html-plan |
Plans, roadmaps, rollouts, and implementation sequences that preserve source commitments |
html-diagram |
Architecture, sequence, process, state, hierarchy, timeline, and system diagrams |
추천 도구
다른 키워드를 입력하거나 필터를 제거해 보세요.
설치
npx skillfish add plannotator/effective-html