用途：为 Artifacts 页面提供设计指导与基础规范，帮助作者像小型多面手工作室的设计负责人那样，按任务所需的设计力度为每个主题建立视觉识别，在配色、字体与布局上做出针对该主题的刻意选择，避免模板化设计。
主要能力：先判断设计力度——文档与落地页同样需要工艺，只是处理方式不同；工具型需求（计划、备忘、演示）要精致但不过度设计，编辑型需求（落地页、游戏、应用）可更放开。基础规范适用于所有产物：优先沿用已有设计系统（如 CLAUDE.md、tokens 或主题文件、现有组件样式），优先级为用户原话、项目现有系统、作者选择；从主题自身世界取材，至少包含一个只有该主题才有的细节，使用真实内容而非占位文本；字体搭配方面，Google Fonts 是 Artifact CSP 允许的唯一字体托管，需直接链接，其他来源字体须以 @font-face data URI 内联，并声明真实回退字体栈，正文约 65 字符宽，设定并遵守字号阶梯；需要库时从 cdnjs 加载固定版本的 UMD 构建，放在使用其全局变量的内联脚本之前，不内联库源码；中性色要有意选择，避免纯中灰；同时设计明暗两套主题，在 token 层组织 CSS，:root 定义完整浅色配色，@media (prefers-color-scheme: dark) 与 :root[data-theme="dark"] 仅重定义 token，深色处设置 color-scheme: dark，组件只通过 token 取色；用 flex 或 grid 的 gap 做间距，保持至少 16px 侧边留白，窄屏约 400px 时换行或单列，宽表格、代码、图表各自容器 overflow-x: auto；重复元素保持一致；卡片样式按角色选择性使用；图表按比例绘制，标签对应真实数值；页面加载后即完整可读，不依赖滚动触发；避免当前常见的 AI 生成设计套路；注意选择器优先级、可见焦点态与 prefers-reduced-motion；文案从用户视角书写，标题像产品名而非说明。
使用方式：先明确页面除阅读外还能让访客做什么，若需输入、保留改动、展示实时数据或向 Claude 提问，则加载 artifact-capabilities 技能；写代码前先做简短设计计划（4-6 个命名十六进制色的配色、2 个以上角色的字体、一两句布局概念），再按计划构建；发布前可查看一次渲染结果并做一轮修改，不做反复截图或 DOM 探测的测试循环，然后发布。
适用场景：Artifacts 中的文档、落地页、游戏、应用、工具、仪表盘、图表与示意图等页面设计。
限制：资料未提供具体收费、价格、平台支持范围与效果数据；部分内容在原文末尾被截断。