文档提示工程人工智能【免费下载链接】claude-code-system-promptsAll parts of Claude Codes system prompt, 27 builtin tool descriptions, sub agent prompts (Plan/Explore/Task), utility prompts (CLAUDE.md, compact, statusline, magic docs, WebFetch, Bash cmd, security review, agent creation). Updated for each Claude Code version.项目地址https://gitcode.com/gh_mirrors/cl/claude-code-system-prompts点击查看免费下载Artifact 是 Claude Code 中一种可发布、可交互的页面产物。本指南基于 Claude Code 系统提示词仓库中的工具描述文档 tool-description-artifact-page-authoring-and-html-skeleton-app-wording.md完整拆解 Claude 在创作 Artifact 页面时必须遵守的两层契约写作前必须加载 Artifact 设计技能以及发布时由查看器包裹的 HTML 骨架与最小重置样式。读完本文你将理解 Artifact 页面的标准创作流程、骨架边界、安全区safe-area适配规则、可见性切换约定并掌握如何结合仓库内相邻的响应式、CSP、主题等契约写出合规的页面。这份工具描述在 Claude Code 系统提示词体系中的位置本仓库claude-code-system-prompts镜像了 Claude Code 各版本的系统提示词、27 个内置工具描述、子代理提示词Plan / Explore / Task以及实用提示词。本关联文档属于工具描述Tool Description类其 frontmatter 声明如下nameTool Description: Artifact page authoring and HTML skeleton (app wording)description面向应用app措辞的、要求在创作前加载 Artifact 设计技能、并针对查看器提供的 HTML 骨架编写页面内容的规范ccVersion2.1.271随 Claude Code 版本更新的版本号variables声明了ARTIFACT_DESIGN_SKILL_NAME、IS_WORKSHOP_SUPPORTED、WORKSHOP_SKILL_NAME、ARTIFACT_DIAGRAMMING_SKILL_NAME、IS_ARTIFACT_QUICKSTART_ENABLED、ARTIFACT_QUICKSTART_GUIDANCE六个模板变量这些variables由 Claude Code 运行时在注入提示词时填充例如${ARTIFACT_DESIGN_SKILL_NAME}会被替换为当前环境中实际的设计技能名称。理解这一点很重要文档正文中所有${...}占位符都不是静态文本而是按当前会话能力动态决定的配置点。与其同属一个系列的文档还包括 tool-description-artifact-html-document-skeleton.md同一契约的非 app 措辞版本与 tool-description-artifact-design-skill-loading-guidance-app-wording.md设计技能加载规则的独立版本可以互为印证。写作前的强制门槛先加载 Artifact 设计技能文档的第一条规则是一条硬性前置条件在写文件之前Claude 必须加载${ARTIFACT_DESIGN_SKILL_NAME}技能——即使是某个技能让 Claude 去写的.md文件也不例外。这条约束有四个关键点适用对象无差别无论是写 HTML 页面还是写 Markdown 文件只要目标是 Artifact都必须在落笔前加载设计技能。设计技能中承载了完整的页面契约——从创作格式HTML或仅在已加载技能要求时才使用 Markdown、标题、库引用、存储方式、尺寸限制、布局、主题到图标。设计技能决定设计投入该技能设定了请求应获得多少设计努力how much design effort the request deserves。也就是说设计深度不是由 Claude 自行揣摩的而是由技能按请求类型分派的。格式规则与设计分离文档明确上面的 Format 规则负责定格式即最终用 HTML 还是 Markdown 由 Format 规则裁定而设计技能负责页面设计的深度与质量。禁止用 Markdown 绕过设计流程文档原句 Claude never writes Markdown to get around the design pass——Claude 绝不能为了规避设计环节而改写成 Markdown。这是对格式降级逃避设计行为的明确禁止。唯一的例外Workshop 文档当${IS_WORKSHOP_SUPPORTED}为真时存在一个例外路径来自${WORKSHOP_SKILL_NAME}技能的 workshop 文档自带设计carries its own design。此时 Claude跳过${ARTIFACT_DESIGN_SKILL_NAME}改为加载${ARTIFACT_DIAGRAMMING_SKILL_NAME}专门用于模板页中的图表绘制。换句话说workshop 模板的设计是预先定好的Claude 只需要为其配图。仓库中 skill-artifact-diagramming.md 即是该图表技能的定义文件。快速启动Quickstart条件注入当${IS_ARTIFACT_QUICKSTART_ENABLED}为真时文档会在该位置追加${ARTIFACT_QUICKSTART_GUIDANCE}的内容。这说明整套提示词是按能力裁剪的快速启动流程开启时Claude 会额外获得一份快速启动指引未开启则完全不注入避免对不需要的用户造成噪音。创作流程写文件再以路径调用 Artifact完成设计技能加载后文档给出标准的创作链路写文件Claude 通过 Write/Edit 把页面内容写入一个文件。调用 Artifact 并传入文件路径Claude 随后调用 Artifact 工具把该文件路径作为参数传入由发布管线完成骨架包裹与发布。scratchpad 目录规则当系统提示词列出了 scratchpad 目录、且用户没有指定其他位置时该文件应放入 scratchpad 目录。这是为了让 Claude 维护的本地文件与已发布页面之间保持可追踪的关系——这一点在运行时能力契约中还会进一步体现见后文自保存页面与本地版本冲突。发布时包裹的 HTML 骨架作者只写内容不写外壳文档的 Skeleton 部分定义了发布时的包裹行为发布时文件会被包裹进一个!doctype html…head…/headbody骨架中因此 Claude 直接编写页面内容即可以它自己的title和style开头不再写html、head或body标签。这与常规前端开发习惯形成鲜明对照。作者侧的输入文件大致是这个样子title今日数据概览/title style /* 页面自己的样式 */ /style !-- 页面主体内容直接开始 -- h1今日数据概览/h1 p…/p而发布后查看器实际得到的页面是!doctype html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1, viewport-fitcover style /* 最小重置样式由发布管线注入 */ /style title今日数据概览/title style /* Claude 自己的样式 */ /style /head body !-- Claude 的页面内容 -- /body /html关键点骨架的head中只承载字符集、viewport meta含viewport-fitcover以及一小段重置样式。作者不要试图自己写!DOCTYPE、html、head、body否则会与发布管线注入的骨架冲突。文档在 tool-description-artifact-html-document-skeleton.md 中给出了完全一致的说明可以作为本规则的独立佐证。最小重置minimal reset契约逐条解读骨架头部注入的重置样式虽然小但每一条都有明确的设计意图。综合本关联文档与 tool-description-artifact-html-document-skeleton.md重置契约包含以下五条规则具体内容设计意图color-scheme浅色color-scheme让表单控件、滚动条等原生 UI 在浅色模式下保持一致外观:root安全区内边距根元素顶部与底部各填充手机的安全区插入量safe-area insets刘海屏/挖孔屏下内容不被系统 UI 遮挡body基础排版零外边距、14px 系统字体、米白off-white底色提供一致的阅读基线与页面底色图片约束img{max-width:100%}防止大图溢出视口是响应式契约的基础隐藏元素[hidden]{display:none!important}保证hidden属性的语义在任何情况下都生效为什么[hidden]要用!important文档特别强调切换可见性要用el.hidden而不是style.display。原因是骨架已声明[hidden]{display:none!important}任何元素只要带有hidden属性就必然不可见不会被页面自己的display规则意外覆盖。因此正确的做法是// 正确切换 hidden 属性 el.hidden true; // 隐藏 el.hidden false; // 显示 // 错误直接改 style.display会绕过 [hidden] 契约 el.style.display none;这条约定保证了隐藏语义始终来自属性而非行内样式使骨架的重置规则与页面脚本之间不会互相踩踏。保留:root的安全区内边距文档用强调语气要求保留keep:root的 padding——Claude 不得为了追求无内边距的沉浸式布局而把根元素的安全区 padding 清零。原因在于安全区内边距是骨架布局的一部分固定条和吸顶头都要在它的基础上叠加计算。安全区适配固定条与吸顶头的正确写法这是本文档最具体的实战规则值得单独成节。文档原文Claude keeps that:rootpadding: a bar fixed to the top or bottom addsenv(safe-area-inset-top, 0px)orenv(safe-area-inset-bottom, 0px)to its own padding, and a sticky header usestop: env(safe-area-inset-top, 0px), not0.拆解为两种场景场景一position: fixed的顶栏/底栏。固定定位的元素脱离文档流:root的 padding 对它不生效因此它必须在自己身上叠加安全区.top-bar { position: fixed; top: 0; /* 在自身 padding 上叠加顶部安全区而不是 top: env(...) */ padding-top: env(safe-area-inset-top, 0px); } .bottom-bar { position: fixed; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }场景二position: sticky的吸顶头。sticky 元素仍在文档流中:root的 padding 会把它往下推但滚动时它需要贴住视口顶部此时要用top而不是 padding.sticky-header { position: sticky; /* 必须用 env()而不是 0否则会贴进刘海区域 */ top: env(safe-area-inset-top, 0px); }注意两处都使用了env(safe-area-inset-*, 0px)的带回退值写法——在不支持安全区的桌面浏览器上回退为0px页面依然正常。这份规范性描述在 tool-description-artifact-html-document-skeleton.md 中也有同义表述a bar fixed to the top or bottom stays at0and adds … to its own padding两处文档相互印证。与骨架配套的相邻契约响应式页面骨架只是壳页面内容本身还受一组相邻契约约束。与创作最直接相关的是响应式契约定义于 tool-description-artifact-responsive-page-contract.md要点如下手机宽度必须可用约 400px且页面主体永不横向滚动任意宽度下保持至少 16px 的侧边距一次性在body或唯一外层包裹元素上设置侧 padding该元素的垂直 padding 用padding-block书写禁止用会清空侧边的padding简写使用相对单位flex/grid 行在窄屏下换行或堆叠为一列承载正文、代码或表格的 flex/grid 子项设置min-width: 0让长内容在内部换行或滚动而不是把页面撑宽图片与aspect-ratio盒子设置max-width: 100%任何元素的min-width不得宽于屏幕只有表格、图表和代码块可以更宽且各自放在独立的overflow-x: auto容器中。这条契约与骨架中的img{max-width:100%}是一体的骨架提供图片约束的兜底响应式契约则规定了布局层面的结构性要求。作者在写style时应把这两层同时纳入考虑。骨架之外CSP、存储、尺寸、主题与图标页面发布后运行在查看器的沙箱中因此还有一组实现要求契约记录在 tool-description-artifact-page-implementation-requirements-app-wording.md 中与本文档的创作规则形成完整闭环外部资源白名单脚本只允许来自 cdnjs.cloudflare.com首选、cdn.jsdelivr.net/npm/、unpkg.com、cdn.tailwindcss.com、code.jquery.com 五个主机且通过script srchttps://cdnjs.cloudflare.com/ajax/libs/lib/exact version/file固定精确版本、在使用它的内联脚本之前引入样式表仅允许 fonts.googleapis.com 及其字体文件 fonts.gstatic.com其余一切外部请求含库自身的运行时 fetch都会被 CSP 静默拦截因此所有其他 CSS/JS 必须内联资源以data:URI 嵌入浏览器存储localStorage、sessionStorage、IndexedDB 按 Artifact 源origin生效且只存在于当前查看器的浏览器中可能为空或抛异常必须 try/catch 包裹且只用于记住标签页、未发送草稿这类单查看器便利需要可靠持久化、跨查看器共享或由 Claude 回读的状态应使用运行时能力runtime capability尺寸渲染后的页面必须不超过${MAX_ARTIFACT_BYTES}字节含内嵌 data: URI主题感知页面跟随查看器主题渲染根元素显式data-themedark/data-themelight默认 system 设置不盖章、只保留prefers-color-scheme浅色调色板定义为裸:root上的令牌深色块在:root:not([data-themelight])与:root[data-themedark]两处守卫下覆盖保证切换器在两个方向都生效任何颜色不得只在 media 或[data-theme]块内定义且body必须有显式背景色图标首次发布时必须提供一个简短通用词作为icon如chart、calendar、recipe用于浏览器标签页图标不得使用产品/品牌名、emoji 或标记语言重新部署时省略icon仅当用户明确要求时才传新的。这些约束解释了为什么骨架的head如此精简外部资源受限页面必须自给自足骨架只需保证最小的可运行基线。运行时能力与自保存页面创作的后续闭环本仓库 中的运行时能力文档进一步说明已发布页面可以通过capabilities输入声明能力——读取用户的实时/已连接数据、记住访客行为投票、签到表、清单、就地编辑的文档、跨查看器共享状态、感知访客、向 Claude 提问、存储用户添加的文件、或给访客提供可保存的文件。其规则与本创作契约直接衔接只要这些能力会让页面更有用Claude 就必须在写作前加载${ARTIFACT_CAPABILITIES_SKILL_NAME}技能且总是先于传递capabilities或编写任何window.claude.*运行时代码之前——这与本文档写作前先加载设计技能是同一套先加载技能再动手的模式能保持状态的能力优先于浏览器存储用于该状态localStorage降级为单查看器便利设施重复部署时省略capabilities字段保留已有能力{}则清空自保存页面会造成本地版本冲突就地编辑的文档会保存自身的新版本使 Claude 的本地文件过期Claude 需要重新读取页面、合并改动并重新发布。仓库中的>赞分享文档提示工程人工智能【免费下载链接】claude-code-system-promptsAll parts of Claude Codes system prompt, 27 builtin tool descriptions, sub agent prompts (Plan/Explore/Task), utility prompts (CLAUDE.md, compact, statusline, magic docs, WebFetch, Bash cmd, security review, agent creation). Updated for each Claude Code version.项目地址https://gitcode.com/gh_mirrors/cl/claude-code-system-prompts点击查看免费下载相关推荐Claude Code Artifact 决策组件 HTML 骨架规范从 data-artifact-decision-component-html-skeleton 到可交互发布页的实战指南Claude Code Artifact 决策组件 HTML 骨架规范从 data artifact decision component html skel文档提示工程人工智能Claude Code Artifact 响应式页面契约在 400px 手机宽度下实现零横向滚动的完整规范Claude Code Artifact 响应式页面契约在 400px 手机宽度下实现零横向滚动的完整规范 Claude Code 的 Artifact 工具文档提示工程人工智能Claude Code 系统提示词解析Artifact 运行时能力声明capabilities的语义、契约与自我发布规则Claude Code 系统提示词解析Artifact 运行时能力声明capabilities的语义、契约与自我发布规则 本篇技术指南基于 claude文档提示工程人工智能上一篇Kryo高效Java二进制序列化框架下一篇Stryker.NET性能优化技巧10个实用策略提升测试效率创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考