plannotator/effective-html

最近记录的来源活动: 2026年10月31日 18:41

SkillsMP 收录数据更新: 2026年11月2日 18:02

已收集 skills: 8

GitHub 星标: 3,818
GitHub Forks: 260

用 AI 助手安装

复制这段 Prompt，发给你正在使用的 AI 助手。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/plannotator/effective-html.

仓库 README

仓库 README 来源：README.md

查看 README 源文件

展开完整 README

<img src="./assets/effective-html-banner.png" width="1280" alt="Effective HTML by Plannotator — HTML wireframes, mockups, prototypes, charts, and diagrams"> # Effective HTML [简体中文](README.zh.md) 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://www.effectivehtml.com/). https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0 <a href="https://github.com/backnotprop/plannotator"> <img src="./star-plannotator.svg" width="340" alt="Star Plannotator on GitHub"> </a> Render and annotate local HTML with <a href="https://github.com/backnotprop/plannotator">Plannotator</a>. ## Skill references The repo includes eight optional skills for pragmatic visual artifacts. | Skill | Use it for | | --- | --- | | [`html`](skills/html/SKILL.md) | Broad HTML requests, mixed artifacts, reports, explainers, presentations, landing pages, tools, and routing to a specialist | | [`big-pics-little-words`](skills/big-pics-little-words/SKILL.md) | Explain the current subject in HTML with large visuals and minimal text while preserving key details; copied from [bro](https://github.com/backnotprop/bro/blob/main/skills/big-pics-little-words/SKILL.md) | | [`one-pager`](skills/one-pager/SKILL.md) | 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](https://github.com/backnotprop/bro/blob/main/skills/one-pager/SKILL.md) | | [`design-artifact`](skills/design-artifact/SKILL.md) | Subject-specific creative direction for any HTML artifact without imposing a reusable house style | | [`html-wireframe`](skills/html-wireframe/SKILL.md) | Low-fidelity layout directions that test content, hierarchy, navigation, flows, and responsive structure | | [`html-prototype`](skills/html-prototype/SKILL.md) | Working prototypes with realistic states, interaction, keyboard support, and responsive behavior | | [`html-plan`](skills/html-plan/SKILL.md) | Plans, roadmaps, rollouts, and implementation sequences that preserve source commitments | | [`html-diagram`](skills/html-diagram/SKILL.md) | Architecture, sequence, process, state, hierarchy, timeline, and system diagrams | Practical guide: [HTML Wireframes and Prototypes for Coding Agents](https://docs.plannotator.ai/learn/code-context/html-wireframes-and-prototypes-for-coding-agents). ## Install Install the collection when you want these references available to your agent as reusable workflows: ```bash npx skills add plannotator/effective-html ``` List or install individual skills: ```bash npx skills add plannotator/effective-html --list npx skills add plannotator/effective-html --skill big-pics-little-words npx skills add plannotator/effective-html --skill one-pager npx skills add plannotator/effective-html --skill design-artifact npx skills add plannotator/effective-html --skill html-wireframe npx skills add plannotator/effective-html --skill html-prototype ``` ### Claude Code plugin ```text /plugin marketplace add plannotator/effective-html /plugin install plannotator-effective-html@effective-html ``` ### Codex plugin ```bash codex plugin marketplace add plannotator/effective-html codex plugin add plannotator-effective-html@effective-html ``` ## How the skills work The skills separate creative freedom from reliability: - Visual direction comes from the conversation, project, audience, and subject. - `design-artifact` provides a reusable design process without prescribing a reusable look. - Wireframes stay intentionally unfinished so reviewers focus on structure. - Prototypes implement one credible flow and its relevant states. - Plans preserve source commitments. - Diagrams choose a visual model and rendering method that fit the relationship being explained. - Every artifact is responsive, accessible, self-contained, and verified in a browser. Detailed guidance lives only where it is needed. The broad `html` skill routes the work, `design-artifact` supplies optional creative direction, and specialist skills own fidelity and behavior. Each skill remains independently usable. This project was inspired by Thariq Shihipar's [The unreasonable effectiveness of HTML](https://thariqs.github.io/html-effectiveness). <a href="https://github.com/plannotator/tot"> <img src="./use-tot.svg" width="300" alt="Share HTML with tot"> </a> Create a shareable link for an HTML file with <a href="https://github.com/plannotator/tot">tot</a>.

正在加载仓库 README…

Effective HTML：选择 HTML 可视化入口

集合提供线框、交互原型、计划和图示参考。通用 `html` 负责路由，`design-artifact` 提供视觉方向；各 Skill 可独立使用。

用途

看结构选线框，看流程与状态选原型。只读参考无需安装。

操作说明

用 npx skills add plannotator/effective-html --list 查看可选项，再以 --skill 选择单项。

引用来源

README.md

这个仓库中的 skills

网页开发工程师

1 个职业分类 · 已分类 75%

skill

职业分类

描述

更新

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.

原文语言：英语

2026-10-31

big-pics-little-words

未分类

Explain the current subject in HTML with large visuals and minimal text while preserving key details.

原文语言：英语

2026-10-15

design-artifact

网页开发工程师

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or…

原文语言：英语

2026-08-03

html-diagram

网页开发工程师

Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html…

原文语言：英语

2026-08-02

html-plan

网页开发工程师

Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-plan or the broad html skill routes a…

原文语言：英语

2026-08-02

html-prototype

网页开发工程师

Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype or the broad html…

原文语言：英语

2026-08-02

html

网页开发工程师

Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifact, or broad…

原文语言：英语

2026-08-02

html-wireframe

网页开发工程师

Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframe or the broad html…

原文语言：英语

2026-08-02

已展示 8 / 8 个已收集 Skill。