effective-html
生成实用、美观且自包含的HTML视觉化交付物
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：effective-html。 它的用途是：生成实用、美观且自包含的HTML视觉化交付物 完整的 Skill 内容见：https://321skill.com/skills/effective-html/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“使用html-diagram技能，为我即将开发的电商平台绘制一个技术栈架构图，包含前端React、后端Node.js、数据库MongoDB和Redis缓存。” 它会生成一个全屏的、带有精美SVG图形的HTML文件，清晰展示各组件关系。或者，
对AI说：“用html-plan技能，为我的‘智能家居IoT项目’创建一个项目计划页面。” 它会生成一个结构清晰、样式专业的HTML计划文档，涵盖目标、里程碑和资源分配。
介绍
这个Skill专注于解决开发者、设计师和内容创作者在需要快速生成具有视觉吸引力的、独立的HTML交付物时面临的效率与美观问题。它并非一个通用的HTML生成工具，而是提供了一套风格化、高质量的模板和生成能力，特别擅长制作全屏架构图、系统图解和计划页面。
使用方式非常灵活，你可以通过命令行工具或作为Claude Code/Codex插件来安装和使用。安装后，在AI对话中直接调用相应的技能（如html-diagram），描述你想要可视化的内容（例如“帮我画一个微服务架构图”），AI便会生成一个完整的、可直接在浏览器中打开的HTML文件，其中包含了高质量的SVG图形和简洁的布局。
它非常适合前端开发、全栈开发和UI设计师等角色，尤其是那些需要频繁向团队或客户展示技术架构、项目计划或产品原型，但又希望交付物兼具专业性和视觉表现力的场景。对于产品经理和内容创作者来说，它也是制作精美、可交互的演示材料的利器。
建议在使用前，先通过--list参数查看所有可用技能，并根据具体需求选择安装。生成的HTML文件是自包含的，可以方便地通过Plannotator（可选工具）进行标注，或通过tot（可选工具）生成即时分享链接，极大提升了协作和演示的便利性。
核心特点
核心区别在于其强烈的“视觉偏向”和“交付物导向”，专注于生成可直接用于演示或交付的、风格统一且美观的完整HTML页面，尤其是其`html-diagram`技能能生成全屏、SVG优先的高质量架构图，而非简单的代码片段或基础HTML结构。
注意事项
不适合需要生成复杂交互逻辑、后端功能或动态数据绑定的Web应用场景，其主要产出是静态的、视觉化的HTML文档。
常见问题
生成的HTML文件可以自定义样式吗？
生成的HTML遵循一套预设的“effective HTML”风格，旨在提供开箱即用的美观效果。深度自定义需要用户自行修改生成的HTML/CSS代码。
这个Skill和普通的代码生成有什么区别？
它不止生成代码，更生成一个完整的、视觉化、可直接交付的HTML产品（如图表、计划页），强调最终呈现效果，而非仅仅实现功能。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/effective-html/raw/index.md 读取 effective-html 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/effective-html/raw/index.md（查看排版版本）