Craft Artifact

當使用者說「產成文物」「做成文物」「產出文物」「生成文物」（或任何含「文物」的產出指令）時，必須使用此 Skill，把當次討論的分析、企劃、系統說明或紀錄，產成一份高水準的單檔 HTML 頁面。即使沒說「文物」二字，只要使用者要求「做成 HTML」「做成一頁讓我看懂」「整理成一頁報告」等給人閱讀的頁面型產出，也應使用。不適用於：純程式碼交付、獨立的互動工具型頁面（計算機、遊戲、表單系統）；共編文件、投影簡報、即時數字頁、設計畫面改用 Artifact 平台類型（見本檔「先選載體」）。

6 stars 3 forksOther

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add zhoulan-ai/craft-artifact --skill craft-artifact

Manual install

git clone --depth 1 https://github.com/zhoulan-ai/craft-artifact.git /tmp/craft-artifact
mkdir -p ~/.claude/skills
cp -r /tmp/craft-artifact/. ~/.claude/skills/craft-artifact

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 產成文物

> 版本 v3.8 公開版

把一次完整的思考，產成一份讀者不需要解釋就能看懂的 HTML 頁面。
這個 Skill 鎖住的是**思考結構的呈現慣例**，視覺只是讓結構被看見。文中「他」＝讀這份文物、要做決定的人（見文末「你的參數」）。

## 鐵律：先分析、後排版

排版永遠是最後一步。進入 HTML 之前，先完成：

1. **數據算完**：有原始資料（CSV、資料庫、對話中的數字）就實際計算，不用印象值。
2. **流程推完**：現況與目標流程能用文字一步步講出來，才畫得成圖。
3. **規則定完**：步驟、判斷、對應關係都已明確。

分析不足時，先回頭補分析或向他確認，不先做出一個漂亮的空殼：**文物的上限由分析深度決定，Skill 只保證下限與一致性。**

## 先選載體

文物＝給他看懂、讓他拍板的頁；作答區（點選→補充→複製回覆貼回對話）只有自己寫的 HTML 做得到。其他用途 Artifact 平台有現成類型，做得比手寫好：

| 用途 | 載體 |
|---|---|
| 給他看懂、讓他拍板 | 文物（本 skill） |
| 給別人改或留言、匯出 Word／PDF | Docs |
| 開會翻頁投影、下載 PowerPoint | Slides |
| 數字會一直變、資料來源有連接器 | Dashboard（看的人要連上同一個資料來源才有數字） |
| 畫面、海報、網站版型、社群圖 | Design |

- 兩種用途就拆兩份：給同事的手冊做 Docs，要他拍板的取捨做文物並附連結。
- 他說「做成文物」但用途落在後四列，照表選，回報一句話講用了哪個、為什麼。
- Slides、Design 套帳號的預設 Design System，沒有品牌的要在回報講。開法：claude.ai 首頁「Make something」；Claude Code 用 Artifact 工具 `quickstart` 或 `type_url`。骨架與代幣只用在文物。
- 你的方案沒有這些類型時，照舊做成文物。

## 第〇步：判斷文物類型，選對骨架

不是每份文物都用「現況→目標→落差」。先判斷這次的內容屬於哪一型，選對敘事骨架（可混用，但要有一條主線）：

| 類型 | 適用情境 | 骨架 |
|---|---|---|
| 診斷整合型 | 逆向推導、系統導入、問題盤點 | 一句話結論 → 全局數據 → 現況推導 → 目標對照 → 落差 → 行動步驟 |
| 企劃提案型 | 活動企劃、合作提案、新制度 | 為什麼做 → 做什麼 → 怎麼分工 → 時程與檢核 |
| 系統說明型 | 系統／後台／制度的使用說明 | 全貌圖 → 各模組怎麼用 → 角色分工 → 常見情境 |
| 紀錄彙整型 | 會議、討論、進度的彙整 | 結論 → 分類明細 → 待辦與跟進 |

## 要他拍板的文物：加「作答區」

只要這份文物的目的是**讓他做決定**（多輪專案的拍板、方案選擇、驗收回覆），就在頁尾加一節作答區，讓他直接在頁面上點選、補充、複製回覆貼回對話。在頁面上用點的比在對話框逐題回更踏實，也不會被整片文字卡片累到。

**什麼時候加**：頁面上有 ≥2 個需要他回答的題目，或同一份文物會跑多輪拍板。單題、小事直接在對話問。

**一題的固定結構**（元件骨架見 `assets/components.md` 第 10 節）：
1. 題號＋題目（一句話，問句）
2. 一句話背景（為什麼現在問）；長的來龍去脈收進「細節」折疊，不擋路

Read the full skill on GitHub

Details

Skill name: craft-artifact
Repository: zhoulan-ai/craft-artifact
Repo updated: 22 October 2026

FAQ

What does the Craft Artifact skill do?

How do I install the Craft Artifact skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add zhoulan-ai/craft-artifact --skill craft-artifact. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Craft Artifact popular?

It lives in zhoulan-ai/craft-artifact, which has 6 GitHub stars and 3 forks.

Related skills

Google Trends

terryds/google-trends-skill

Fetches Google Trends data including daily trending topics, real-time trends, interest by region, related topics, related queries, and autocomplete suggestions. Use when the user asks about trending searches, search popularity, keyword trends, or Google Trends data.

Other

Config Guard

jzOcb/config-guard

Prevent OpenClaw config changes from crashing the gateway. Auto-backup, schema validation, critical field checks, and auto-rollback. Use before any config.apply, config.patch, or openclaw.json edit.

Other

Daoyou

laoqianritan-create/daoyou

对建筑/街道/街区做空间历史考古，挖出层层堆积的演变史，交付可核查的空间考古档案。触发：daoyou、「导游一下 XX」、「把 XX 考古一遍」。

Other

Web Replica

chusimin/web-replica

输入任意网址,按证据纪律高保真复刻网站前端页面:字体/图片/视频/动效全部使用从原站抓取的真实素材, 逐模块开发、逐模块截图比对验收,严禁用调参拟合冒充还原。当用户给出一个 URL 并要求 "复刻这个网站"、"照着这个做一个"、"还原这个页面/动效/效果"、"把这个网站扒下来"、 "做一个一模一样的"、"clone/replicate this site",或要求提取某网站的字体/背景视频/动效素材时, 都应使用本 skill。也适用于对已有复刻成果继续打磨、比对、补模块的请求。不适用于:从零设计新网页(无参考站)、普通前端开发、只截图不复刻。

Other

Funded Phd Dossier

chinnkirsten/funded-phd-dossier

为社会科学博士申请者检索、查证并匹配全球全额资助的研究型博士项目。根据申请者的专业背景、研究兴趣、语言成绩、国籍或居留身份和目标入学季，核对 PhD、DPhil、项目制 studentship 与带薪博士职位的资助承诺、资格门槛、申请材料和截止日期，并形成可执行、可追溯的候选清单。用户想找全奖博士、判断某个项目是否真正全奖、评估个人资格、比较资助路径，或为一个学科和一批申请者建立持续更新的项目库时使用。

Other

Salary Negotiation Skill

yanliudesign/salary-negotiation

薪资谈判教练。模拟前 FAANG 招聘官 + 薪酬策略师，把「拿到 offer → 签字」这一步拆成 6 个动作：Offer 诊断（Base / RSU / Sign-on / Bonus 每项标 LOW/MED/HIGH leverage）→ 谈判杠杆图（我的力量 / 招聘官的力量 / 弱点）→ 策略排序（Base → RSU → Sign-on → Bonus，按 context 调整）→ 脚本生成（电话 / 邮件 / 招聘官回话模拟）→ Counter 模拟（"这是最好的了" / "预算固定" / "会考虑其他候选人" 三种硬回答）→ 最终建议（要什么 / 别推什么 / 何时停）。三步：贴 offer → 说 context（有没有竞争 offer / deadline / 级别 / 风险偏好 / 最看重什么）→ 自动生成并打开一份 HTML Negotiation Playbook。关键词：salary negotiation, offer negotiation, comp negotiation, RSU, sign-on, base salary, counter offer, competing offer, TC, total comp, 薪资谈判, offer 谈判, 谈薪, 反 offer, 加薪, 谈 package, levels.fyi, 招聘官话术,

Other

Browse the most popular Claude skills, all other skills, or write your own with the skills generator.